WEBVTT

1
00:00:06.320 --> 00:00:10.919
Hello everybody, Welcome back to another
thrilling, exciting episode of javascripts Jabber.

2
00:00:11.039 --> 00:00:14.240
I am Steve Edwards, the host
with the face for radio and the voice

3
00:00:14.240 --> 00:00:17.199
for being a mine. But i'm
your host today because Dan didn't want to

4
00:00:17.239 --> 00:00:20.679
do it. Speaking of Dan,
he is here with my panel, on

5
00:00:20.760 --> 00:00:24.199
my panel with me. How you
doing, Dan, I'm doing really well

6
00:00:24.559 --> 00:00:29.280
on the personal levels. Good good. Dan is coming from Tel Aviv.

7
00:00:30.440 --> 00:00:34.039
I am here in the Portland area
where Mount Hood is getting dumped on with

8
00:00:34.119 --> 00:00:39.439
snow, which is great for us
fears hey, although the winds are like

9
00:00:39.479 --> 00:00:41.679
forty miles an hour or two,
so it makes this sort of hard to

10
00:00:41.679 --> 00:00:45.840
go down instead of a cross.
But anyway, Hey folks, this is

11
00:00:45.920 --> 00:00:49.640
Charles Maxwell. I've been talking to
a bunch of people that want to update

12
00:00:49.679 --> 00:00:53.560
their resume and find a better job, and I figure, well, why

13
00:00:53.640 --> 00:00:56.719
not just share my resume. So
you if you go to topendevs dot com

14
00:00:56.719 --> 00:01:00.840
slash resume, answer your name and
email, then you'll get a copy of

15
00:01:00.840 --> 00:01:07.000
the resume that I use that I've
used through freelancing through most of my career,

16
00:01:07.359 --> 00:01:10.319
as I've kind of refined it and
tweaked it to get me the jobs

17
00:01:10.319 --> 00:01:14.319
that I want. Like I said, top endevs dot com slash resume will

18
00:01:14.319 --> 00:01:17.799
get you that and you can just
kind of use the formatting. It comes

19
00:01:17.840 --> 00:01:21.519
in word and pages formats and you
can just fill it in from there.

20
00:01:22.799 --> 00:01:26.920
Our guest today is mister Michael Hoblich. I think I sort of said it

21
00:01:26.000 --> 00:01:30.760
right. I think that had more
of the Hebrew accent than German. But

22
00:01:30.879 --> 00:01:34.719
how you doing, Michael, Hi, I'm doing well, Thank you very

23
00:01:34.760 --> 00:01:40.120
much. And you're coming to us
from Austria, correct, Yeah, that's

24
00:01:40.200 --> 00:01:44.719
right. I am based in Austria
and Derek work is the product manager for

25
00:01:45.079 --> 00:01:52.480
Chrome deftols and Puppeteer essentially think a
lot about testing and debugging applications. Alrighty,

26
00:01:52.719 --> 00:01:56.640
so you work for Google A yeah, I've worked on the Chrome team

27
00:01:57.680 --> 00:02:01.599
at Google. Excellent. Talk about
getting stuff right from the horse's mouth.

28
00:02:01.640 --> 00:02:06.840
Doesn't get any better than that.
All right, So, as you mentioned,

29
00:02:06.879 --> 00:02:09.439
we're here to talk about one of
my favorite topics, which is debugging

30
00:02:09.599 --> 00:02:15.400
in the Chrome dev tools for you
know, for someone like me who came

31
00:02:15.520 --> 00:02:21.280
up starting with PHP, where I
had xd bug on the server and I

32
00:02:21.280 --> 00:02:24.719
could debug the crap out of anything
with my break points and profilers and stuff.

33
00:02:24.759 --> 00:02:30.759
It was when I started writing first
Angular JS and then view on the

34
00:02:30.759 --> 00:02:36.520
front end, the dev tools and
debugging became one of my better friends.

35
00:02:36.759 --> 00:02:40.439
So I'm all about debugging and how
to troubleshoot and debug things on the front

36
00:02:40.560 --> 00:02:45.319
end. So where do you want
to start, Michael, that's a good

37
00:02:45.400 --> 00:02:50.199
question. So we can start a
PHP because I also started a program with

38
00:02:50.240 --> 00:02:55.080
peachp like you. So I'm the
only one here who's never really programmed in

39
00:02:55.159 --> 00:03:00.120
PHP. Oh interesting, Wow,
I'm a impressed. How did you dodge

40
00:03:00.199 --> 00:03:07.159
that pullet? Bullet? Great tech, super useful, I got it or

41
00:03:07.520 --> 00:03:12.560
helps and oh my god, I
would never ever want to use the applications

42
00:03:12.560 --> 00:03:16.960
that wrote twenty years ago. And
by the way, just so you know,

43
00:03:17.280 --> 00:03:23.240
I think that PHP kind of got
it starting in uh in a well,

44
00:03:23.400 --> 00:03:27.840
it didn't get it started in Israel, but it got a significant push

45
00:03:27.879 --> 00:03:35.080
in Israel. Like the one of
the first versions of PHP was actually implemented

46
00:03:35.159 --> 00:03:40.360
by two israelis Rasmus one of them. Or it's Zen, the guys.

47
00:03:40.840 --> 00:03:45.800
They're the guys that created zend technologies. All right, okay, yeah,

48
00:03:46.159 --> 00:03:49.479
that's still you see that as an
option in like phb storm is using the

49
00:03:49.560 --> 00:03:53.719
Zen Debugger as compared to that's the
other option other than xd bug. Anybody

50
00:03:53.800 --> 00:03:59.879
remember real quick what PHP initially stood
for Personal Home Picture. That's right.

51
00:04:00.280 --> 00:04:02.360
It was just you know, it
was like drupel. It was like heck

52
00:04:02.400 --> 00:04:04.879
anything else. If someone started out, hey, I want to do this

53
00:04:04.919 --> 00:04:08.840
for myself. Oh look this is
cool, everybody else likes it. Let's

54
00:04:08.879 --> 00:04:13.039
watch it go. I did manage
to dodge PHP, but I didn't manage

55
00:04:13.120 --> 00:04:18.560
to dodge ASP and JSB. So
yeah, so you know, I didn't

56
00:04:18.600 --> 00:04:25.560
dodge that bullet completely. I did
want to say though, that I'm the

57
00:04:25.600 --> 00:04:30.360
one who invited Michael on and really
wanted to talk with him because I think

58
00:04:30.720 --> 00:04:35.399
for me, first of all,
for two big reasons. One is that

59
00:04:35.879 --> 00:04:41.720
a lot of goodness is recently coming
out of Chrome into the Chrome Debt,

60
00:04:42.480 --> 00:04:46.720
out of Google, into the Chrome
Deaf tools. I feel like features coming

61
00:04:46.759 --> 00:04:49.720
fast and furious, and I'm really
happy with all the advancements that are being

62
00:04:49.720 --> 00:04:55.319
made there. But it really goes
for me beyond that, because for me,

63
00:04:56.399 --> 00:05:02.560
the debuggers that are built into the
browser are like the big reason that

64
00:05:02.759 --> 00:05:09.160
web development has been able to advance
so much. Like we take these tools

65
00:05:09.240 --> 00:05:15.639
for granted because they're built in because
they're ubiquitous, but like, you can't

66
00:05:15.680 --> 00:05:19.439
imagine how the world would have been
without them, And I sort of can

67
00:05:19.639 --> 00:05:25.879
because I was there at the time
and debugging with alerts and stuff like that,

68
00:05:26.160 --> 00:05:30.480
and you know, it's you really, I really can't imagine modern web

69
00:05:30.519 --> 00:05:38.519
development without the various debuggers and development
tools that are built into modern browsers.

70
00:05:38.639 --> 00:05:43.439
And personally, I like using dev
tools the best, So that's the one

71
00:05:43.480 --> 00:05:46.920
that I mostly use when I have
a choice. That's very nice of you

72
00:05:46.000 --> 00:05:49.519
to say, so, Michael,
Let's start with history. I guess of

73
00:05:49.600 --> 00:05:56.399
the dev tools, and I know
from back early two thousands, I can

74
00:05:56.439 --> 00:06:00.439
remember the first thing I ever remember
seeing that was like this was Firebug in

75
00:06:00.480 --> 00:06:03.279
a Firefox browser, and I think
that predates the Chrome dev tools. I

76
00:06:03.319 --> 00:06:08.240
could be wrong, Is that correct? Yeah, that's correct, so fire

77
00:06:09.160 --> 00:06:11.759
I don't know if five buck was
the first. I guess Netscape and so

78
00:06:11.839 --> 00:06:15.160
on also had the debugger. I
can't think the Internet. I think Internet

79
00:06:15.199 --> 00:06:19.839
Explorer had a debugger before Firepark.
That's the first that I recall. I'm

80
00:06:19.879 --> 00:06:23.680
not sure, to be honest,
you know, I mean, at that

81
00:06:23.720 --> 00:06:28.600
point it was a blurry line.
Also, you saying wish you basic and

82
00:06:28.639 --> 00:06:32.120
so on to debarking republications because he
had all those nice actipix content. M

83
00:06:32.319 --> 00:06:38.759
hm, so, but yeah,
five buck for sure was first. And

84
00:06:39.160 --> 00:06:45.040
as far as I can recall,
when Chrome actually was released, there was

85
00:06:45.120 --> 00:06:48.279
already deaf toos included. Okay,
that sounds right. And one of the

86
00:06:48.319 --> 00:06:53.319
really cool things about Chrome dep Tools
that again I don't know if a lot

87
00:06:53.360 --> 00:06:59.399
of our listeners realize, is that
it's actually implemented in JavaScript and htmail and

88
00:06:59.480 --> 00:07:05.199
other web technologies. That's correct,
which is also essentially when you when people

89
00:07:05.240 --> 00:07:12.680
start talking about debuggles or about Chrome
Depth tools or Firebug and so on and

90
00:07:12.720 --> 00:07:16.759
so on, they need to realize
it's actually going to be two main components.

91
00:07:16.800 --> 00:07:20.240
One of them is going to be
the introspection capabilities for the runtime,

92
00:07:20.519 --> 00:07:28.040
which is like exposing what's currently happening
in random, so all the information the

93
00:07:28.079 --> 00:07:30.399
back end essentially, But on the
other side, you're also going to have

94
00:07:30.800 --> 00:07:34.360
the front end because we need to
surface the deformation somehow they use it give

95
00:07:34.439 --> 00:07:40.879
the user a way to control breakpoints
and so on, and that particular front

96
00:07:40.920 --> 00:07:44.920
end, for example, in in
Chrome deft tols is when Chrome in Depth

97
00:07:44.959 --> 00:07:48.680
tools is written in Now this isn't
typescript. I think we migrated two typescript

98
00:07:48.680 --> 00:07:54.519
two years ago something like that for
three years from script to sub subscripts.

99
00:07:54.879 --> 00:08:01.480
That must have been a really big
rewrite. Yes it was. I mean

100
00:08:01.519 --> 00:08:05.439
it changed a lot of a lot
of files and a lot of lines of

101
00:08:05.879 --> 00:08:15.319
codes. Of course, so we
did actually tried doing it in small chunks,

102
00:08:15.439 --> 00:08:18.160
but then it was like also not
great. So we actually we had

103
00:08:18.199 --> 00:08:20.920
hackertons where we changed bigger chunks of
the quotes and so on. But yeah,

104
00:08:22.040 --> 00:08:26.519
that took a lot of time.
But typect is simply more more organomic

105
00:08:26.600 --> 00:08:31.840
to develop a republication like that.
How many people, by the way,

106
00:08:31.879 --> 00:08:37.879
if you can say, work on
the Chrome dev tools inside Google, let's

107
00:08:37.879 --> 00:08:48.600
say it's roughly twenty ish something like
that. Yeah, so including software engineers,

108
00:08:48.919 --> 00:08:54.759
UX designers, uxrpeople, PMS program
managers, managers and so on,

109
00:08:56.240 --> 00:09:05.639
it's roughly twenty And you, like
I mentioned before, you release features really

110
00:09:05.679 --> 00:09:09.600
fast and furious. I mean that
literally every time a new version of Chrome

111
00:09:09.679 --> 00:09:15.039
comes out, which is what like
every month or two every month months,

112
00:09:15.840 --> 00:09:18.639
I see like you guys coming out
with the video about the new features and

113
00:09:18.720 --> 00:09:22.360
capabilities that you're adding into it.
So how are you able to add so

114
00:09:22.480 --> 00:09:30.480
much capabilities into into the dev tools
as such a rapid pace? Right,

115
00:09:30.720 --> 00:09:35.960
so quick shot out regarding videos,
I forgot deferal people that are also working

116
00:09:35.000 --> 00:09:37.519
on the team that are creating those
content. And yes, I really like

117
00:09:37.559 --> 00:09:41.919
the videos. They are so great. And also that's what our use actually

118
00:09:41.919 --> 00:09:46.120
are also telling us, like the
video is a great super use for them

119
00:09:46.159 --> 00:09:50.639
to actually get to know about the
features. What videos are these? Were

120
00:09:50.639 --> 00:09:54.600
they? What's new in the tools? I think the cadence now is every

121
00:09:54.720 --> 00:10:00.039
two mature, every two months we're
releasing a new one and stuff like that.

122
00:10:00.080 --> 00:10:03.639
I need to check, or maybe
it's for each major version nowadays.

123
00:10:05.320 --> 00:10:07.639
By the way, and the Chrome
Dev Tools itself, when you open it

124
00:10:07.720 --> 00:10:13.000
in the drawer, it will actually
tell you what what's new and have a

125
00:10:13.039 --> 00:10:16.440
link to that video so you can
actually get at the video from inside the

126
00:10:16.480 --> 00:10:22.279
Chrome devtos. Yeah that's great.
And this also has like release no small

127
00:10:22.360 --> 00:10:28.360
ass like this feature showcase it's linking
too. Yeah that's probably playlist it is.

128
00:10:28.840 --> 00:10:35.320
I didn't. Oh, yeah,
that's really useful. Like if you

129
00:10:35.360 --> 00:10:39.360
have like eight minutes ortuff like that
every month and look at that you will

130
00:10:39.399 --> 00:10:43.200
see all the features. How we
do that, yeah, I mean it's

131
00:10:43.679 --> 00:10:52.960
a constant evolution, so the debugger
always needs to adapt to how the did.

132
00:10:52.639 --> 00:11:00.559
The debugging target is also changing.
What I'm saying is the web platform

133
00:11:00.759 --> 00:11:05.600
constantly changes, in particular Chrome constantly
changes, so exposing new APIs or APIs

134
00:11:05.600 --> 00:11:09.759
are going to be changed and so
on. That requires a certain amount of

135
00:11:11.200 --> 00:11:13.799
maintenance in our ends to also make
sure that we're not breaking, which is

136
00:11:16.279 --> 00:11:20.600
taking up quite a lot of capacity
honestly, because there's a lot of a

137
00:11:20.679 --> 00:11:26.879
lot of churn and we need to
keep keep keep having holds on those issues.

138
00:11:28.639 --> 00:11:35.840
And how we select that we what
we're going to work on next.

139
00:11:35.320 --> 00:11:41.000
That depends heavily on feedback we get
from developers, but also initiatives that we

140
00:11:41.080 --> 00:11:46.240
know that they're important to us,
like for example, co work, vitals

141
00:11:46.360 --> 00:11:52.039
and performance debugging. We know we
have the case studies that this is important,

142
00:11:52.039 --> 00:11:56.200
that this is really going to change
the conversion rate, so we are

143
00:11:56.200 --> 00:12:00.919
investing a lot in performance debugging to
make that more that's called it more efficient,

144
00:12:01.000 --> 00:12:05.200
so essentially that you're that you get
more bang for the bug out of

145
00:12:05.240 --> 00:12:11.720
your time invested as a developer or
similarly network debugging, which this year we

146
00:12:11.759 --> 00:12:16.840
want to take a deeper look into
a network debugging network panel for example.

147
00:12:16.679 --> 00:12:22.360
That because nearly every Depth tools user
out there is using network panel one sort

148
00:12:22.440 --> 00:12:28.120
or another for performance debugging or for
network debugging by something that doesn't show up,

149
00:12:28.720 --> 00:12:31.960
and so on and so one.
The network panel is used quite often.

150
00:12:31.519 --> 00:12:35.360
And for this year we actually said, okay, we are going to

151
00:12:35.360 --> 00:12:41.399
take a deep a book and what
we can improve there to there, which

152
00:12:41.440 --> 00:12:46.840
is not easy because if you ask
two people which of the changes is more

153
00:12:46.200 --> 00:12:52.519
is better, you get two answers. So very often it's finding a good

154
00:12:52.519 --> 00:13:01.279
middle ground or opening up don't find
the middle ground, and providing capabilities to

155
00:13:01.320 --> 00:13:07.320
make it configurable what is best for
you. Although there's this maxim that I've

156
00:13:07.320 --> 00:13:11.200
heard like a while back which says
that every checkbox you've seen in an options

157
00:13:11.240 --> 00:13:18.919
dialogue is two product managers fighting and
couldn't decide who's who's the right who's got

158
00:13:18.000 --> 00:13:22.519
the right opinion, So they said, let's just make it an option,

159
00:13:22.879 --> 00:13:26.519
and then of course you start fighting
over what should be the default. But

160
00:13:28.159 --> 00:13:33.399
that said, you know, so
you said that you get a lot a

161
00:13:33.440 --> 00:13:37.639
lot of the decisions are actually driven
by community feedback. How do you actually

162
00:13:37.679 --> 00:13:41.399
get that feedback? If I have
certain ideas for things that I would like

163
00:13:41.480 --> 00:13:43.960
to see in Chrome def tools and
say, hey, I think they can

164
00:13:45.000 --> 00:13:48.360
make the network app so much better
if they do X, Like, how

165
00:13:48.360 --> 00:13:54.399
do I send this feedback over to
you or suggestions or whatever? Okay,

166
00:13:54.639 --> 00:14:01.159
so the most fait forward thing is
open Chrome deft tools and there's this Hamburger

167
00:14:01.159 --> 00:14:05.919
menu. The three Dogs menu does
help on this report the Depts issue that

168
00:14:05.080 --> 00:14:11.120
is going to open our issue track
cand there you can submit the bug or

169
00:14:11.279 --> 00:14:16.080
feature requests and that is regularly we
have SLOs to actually go over this list

170
00:14:16.120 --> 00:14:22.799
and actually trias. So it's not
just issues, it's also suggestions and requests

171
00:14:22.840 --> 00:14:28.279
and stuff like that. Yes,
an issue is like either feature requests or

172
00:14:28.320 --> 00:14:37.080
a buck trish process should hopefully categorize
them correctly because it also depends. For

173
00:14:37.159 --> 00:14:41.200
some users, feature request is actually
the perceives of the buck, which is

174
00:14:41.240 --> 00:14:48.840
fine. Yeah, it takes some
conversations. And when are you going to

175
00:14:48.879 --> 00:14:58.320
integrate AI? That's a good question. How would you see the debt tools

176
00:14:58.320 --> 00:15:03.480
integrating a ideas? I was just
joking, I mean everywhere, I'm just

177
00:15:03.559 --> 00:15:05.879
I know I'm just trying to think
that how would you use I guess I

178
00:15:05.879 --> 00:15:11.120
could see some applications. I'm not
sure. I mean, we obviously are

179
00:15:11.320 --> 00:15:22.279
talking with weblovers about how you're using
EI like JGPT or Gemini and so on

180
00:15:22.399 --> 00:15:28.799
and so on for web development tasks, which is super interesting and it's but

181
00:15:28.879 --> 00:15:33.240
it's very new. Their results are
very nuanced, and uh, I need

182
00:15:33.279 --> 00:15:39.080
a lot of understanding when the interpret
the results. So what I'm saying with

183
00:15:39.240 --> 00:15:46.840
that is it's not a magical silver
bullet. And for example, you get

184
00:15:46.840 --> 00:15:54.879
a result back from your random EI
assistant and it still need to be able

185
00:15:54.919 --> 00:15:58.840
to interpret what is coming back if
this is actually correct or not, because

186
00:16:00.840 --> 00:16:04.919
if you can't do that, you're
going to be you could be in a

187
00:16:06.039 --> 00:16:11.840
very bad spot. So the quality
of responses is very it's actually very important.

188
00:16:11.159 --> 00:16:15.440
Having said that, with all those
new model updates that are coming in

189
00:16:15.879 --> 00:16:22.639
the Germany Gemini Ultra or be it
open GPT with Russiah four, all of

190
00:16:22.639 --> 00:16:26.159
them are getting more powerful, of
course because you can also proply more information

191
00:16:26.200 --> 00:16:32.120
to it and so on. But
yeah, I understand judging the quality of

192
00:16:32.120 --> 00:16:37.519
the response is super important. That
actually requires a certain level of experience from

193
00:16:37.559 --> 00:16:47.919
the user to judge that. So, yeah, there's potential, but it's

194
00:16:48.200 --> 00:16:55.279
it's nuanced. Yeah. So on
a most serious note though, you know,

195
00:16:55.399 --> 00:16:59.200
so, as I said, a
lot of new features and capabilities being

196
00:16:59.240 --> 00:17:03.400
headed in, can you like give
us an quick overview of let's say,

197
00:17:03.480 --> 00:17:07.720
like a couple of your recent favorite
features that made it in that you're really

198
00:17:07.759 --> 00:17:11.799
happy that made it into the product. Okay, so that's going yeah,

199
00:17:11.839 --> 00:17:15.480
I know. Continue, No no, no, no, no, I'm

200
00:17:15.559 --> 00:17:21.519
just thinking how to start explain that. I think a year ago or something

201
00:17:21.559 --> 00:17:26.839
like that, it might be longer. We started tracking down bugs in our

202
00:17:29.240 --> 00:17:33.799
how how we are treating breakpoints and
if we are hitting breakpoints by debugging,

203
00:17:37.319 --> 00:17:41.920
which means sometimes brak points were not
hit, and sometimes they were hit and

204
00:17:41.960 --> 00:17:45.240
then he reloaded, and then they
were hit, but then you didn't reload

205
00:17:45.240 --> 00:17:48.039
and it weren't it and sometimes new
brakepoints appeared and stuff like that. Yeah,

206
00:17:48.640 --> 00:17:56.079
I'm guessing basic Usually issues come up
with like virtual like code, right

207
00:17:56.839 --> 00:18:06.200
mhm. Yes, that's so we
did go down that rabbit hole what's actually

208
00:18:06.279 --> 00:18:11.799
happening there? And it turned off? Of course, it was a number

209
00:18:11.799 --> 00:18:21.319
of issues, which is for example, a web applications might look the same

210
00:18:21.359 --> 00:18:25.039
when you reload, but you might
not actually be the same under the hoods

211
00:18:25.720 --> 00:18:29.119
because code gets in check that or
you might be running in a B test,

212
00:18:29.200 --> 00:18:32.160
and so on and so on and
so on. So if you set

213
00:18:32.759 --> 00:18:38.720
breakpoints in version A of the application, and now that breakpoint should move to

214
00:18:38.799 --> 00:18:42.920
somewhere else because the code when after
reload this version B, and it's actually

215
00:18:42.960 --> 00:18:49.920
a little bit of different codes,
the debugging back end actually needs to migrate

216
00:18:49.960 --> 00:18:59.480
that breakpoint. And that's that's not
super straightforward. So basically you're saying that

217
00:18:59.640 --> 00:19:04.839
in an ideal world, you'll be
able to somehow magically identify that a particular

218
00:19:06.359 --> 00:19:10.880
piece of code has moved down a
few lines or moved up a few lines

219
00:19:10.920 --> 00:19:15.680
and then moved the breakpoint along with
it, instead of just hard coding into

220
00:19:15.680 --> 00:19:21.240
a particular line number in a in
A in a file. Right, And

221
00:19:21.440 --> 00:19:26.759
there are herristics that help you there, of course, built into deft tools

222
00:19:26.759 --> 00:19:33.240
and other debuggers. There's also technology
like source maps that also again help you

223
00:19:33.640 --> 00:19:37.480
doing that. Yes, and you're
saying who source maps, And I'm saying,

224
00:19:37.720 --> 00:19:45.000
yes, who maps. But it's
the technology that we have, and

225
00:19:45.240 --> 00:19:48.359
there is actually no standard for that
yet, which is going to change hopefully,

226
00:19:51.279 --> 00:19:59.319
which hopefully is going to then result
in the more reliable usage of source

227
00:19:59.359 --> 00:20:10.960
maps. M right where was I? Yes, source maps whatever? I

228
00:20:11.079 --> 00:20:15.559
know? Going back to breakpoints and
how they so migration of breakpoints when you

229
00:20:15.640 --> 00:20:18.480
reload for example. Uh, then
we found out, oh yeah, there

230
00:20:18.480 --> 00:20:19.839
are a few issues in there,
so we fixed those, and then we

231
00:20:19.920 --> 00:20:27.279
found new issues, and then we
started digging into well, what if you

232
00:20:27.359 --> 00:20:32.440
set a breakpoint but that breakpoint is
an ignored code section, so we actually

233
00:20:32.519 --> 00:20:34.759
don't want to see that. Should
it trigger? Should it not trigger?

234
00:20:36.920 --> 00:20:40.400
We had I think two camps of
what in the team like, no,

235
00:20:40.480 --> 00:20:41.680
we should be doing that, No, we should be doing that? Okay,

236
00:20:41.680 --> 00:20:48.240
can we answered that somehow with with
a few wigs are like, oh

237
00:20:48.319 --> 00:20:52.000
yeah, yeah, let's do that. So we have in from deftors.

238
00:20:52.000 --> 00:20:56.599
We have a process called RBC Request
for Commands, but we have a kid

239
00:20:56.640 --> 00:21:00.480
top repository and we are asking that
community essentially, hey, we have this

240
00:21:00.559 --> 00:21:06.720
hard problem to solve. We know
there's different solutions, please help us identify

241
00:21:06.759 --> 00:21:14.200
what they actually prefer in such cases. So we did that. Yeah,

242
00:21:14.200 --> 00:21:17.480
A long story short of that.
That is a perfect example of like Wow,

243
00:21:18.039 --> 00:21:22.079
the results were a little were split
a little bit from preferences. So

244
00:21:22.319 --> 00:21:26.799
okay, what this means essentially is
we need to make it configurable because there's

245
00:21:26.839 --> 00:21:36.440
no winner, right. So I
found that particular endeavor quite interesting because like

246
00:21:36.960 --> 00:21:42.119
very technical, and it was like, oh my god, it's so complicated

247
00:21:42.119 --> 00:21:47.400
to think through all of that.
But honestly, that's not something that a

248
00:21:47.400 --> 00:21:49.759
lot of fear or that's something that
a lot of people might be encountering but

249
00:21:51.000 --> 00:21:53.119
might be able to fix with a
reload. But still under the hoods something

250
00:21:53.119 --> 00:21:59.119
else is happening. So hey,
there, this is Charles max Wood.

251
00:21:59.200 --> 00:22:02.359
I'm excited because I wanted to let
you know about this thing that I pulled

252
00:22:02.359 --> 00:22:07.240
together that I had just I've been
dying to have this for years and I

253
00:22:07.359 --> 00:22:10.400
never felt like I could, and
then I just realized that there's no reason

254
00:22:10.400 --> 00:22:12.160
why I can't. So I'm putting
together a book club and we're going to

255
00:22:12.240 --> 00:22:18.079
read development focused books, career books, you know, technical books, whatever.

256
00:22:18.160 --> 00:22:21.920
The first book that we're going to
do is going to be Clean Architecture

257
00:22:22.079 --> 00:22:25.720
by Uncle Bob Martin. If you're
not familiar with clean Code or some of

258
00:22:25.759 --> 00:22:27.599
the other stuff that Bob has done, check that out. I've also talked

259
00:22:27.640 --> 00:22:30.440
to him on the Clean Coders podcast, which is on Top End Devs.

260
00:22:30.839 --> 00:22:33.279
But yeah, we're going to get
on. He's going to show up to

261
00:22:33.319 --> 00:22:37.400
some of our meetings. And what
I'm thinking is we'll probably have like five

262
00:22:37.480 --> 00:22:41.839
or six people part of the conversation
along with Bob and I at the same

263
00:22:41.880 --> 00:22:45.400
time, and we'll just so somebody
can come on, they can ask their

264
00:22:45.480 --> 00:22:49.119
question, and then we'll just rotate
people through, so we'll mute one person,

265
00:22:49.279 --> 00:22:52.440
unmute another person when it's their turn
to come on and be part of

266
00:22:52.480 --> 00:22:56.240
the discussion. So we'll do that
for like an hour hour and a half.

267
00:22:56.279 --> 00:22:59.680
And then the other part of it
that I'm putting together is just kind

268
00:22:59.720 --> 00:23:06.279
of a meet and greet gather area
on Gathertown, And so after the meetup

269
00:23:06.359 --> 00:23:08.559
and the call, we we'll do
as we'll all go over to gather Town

270
00:23:08.880 --> 00:23:11.039
and you can just log in,
walk up to a group and have a

271
00:23:11.079 --> 00:23:15.440
conversation, and that way we can
all kind of get to know each other

272
00:23:15.559 --> 00:23:18.960
and make friends and get to know
people across the world. One thing that

273
00:23:19.000 --> 00:23:22.559
I'm finding is that, yeah,
the meetups are starting to come back,

274
00:23:22.799 --> 00:23:25.640
but a lot of people don't have
the opportunity to go to a meetup and

275
00:23:25.680 --> 00:23:27.240
I really want to meet you guys
and talk to you. So we're gonna

276
00:23:27.240 --> 00:23:30.359
put all that together. It'll all
be part of that book club. You

277
00:23:30.400 --> 00:23:33.519
can go to topendevs dot com slash
book Club to be part of it,

278
00:23:33.839 --> 00:23:37.720
and I'm looking forward to seeing you
there. The first book club meeting will

279
00:23:37.720 --> 00:23:40.960
be in December, the beginning of
December. We're starting the first week of

280
00:23:41.000 --> 00:23:45.319
December, and you'll also be part
of the conversation about which book we do

281
00:23:45.480 --> 00:23:48.359
next. I have one in mind, but I want to see where everybody's

282
00:23:48.359 --> 00:23:55.880
at. So there you go.
So I've been playing around and I've noticed

283
00:23:55.920 --> 00:23:59.640
recently, and I don't know how
recently these have been added in, but

284
00:24:00.079 --> 00:24:04.319
we were talking about the YouTube channel
of all the what's new in dev tools

285
00:24:04.680 --> 00:24:10.400
videos and you were talking about issues, and so if you bring up the

286
00:24:10.440 --> 00:24:14.799
dev tools over to the right,
you'll notice, you know, if you

287
00:24:14.799 --> 00:24:18.519
have any console errors, it will
give you a little red X that shows

288
00:24:18.559 --> 00:24:22.920
you know you've got one error a
bazillion, which is my case sometimes,

289
00:24:22.160 --> 00:24:27.640
and then you'll get another little icon
with a triangle with an exclamation mark and

290
00:24:29.440 --> 00:24:32.839
looks like a quote balloon with an
exclamation mark, and if you click on

291
00:24:32.880 --> 00:24:37.480
those brings up another little window,
and this is really cool. One is

292
00:24:37.480 --> 00:24:41.200
labeled What's New, and it has
the latest video right there in the depth

293
00:24:41.240 --> 00:24:45.039
tools. And this as we're recording
right now, the YouTube channel shows up

294
00:24:45.039 --> 00:24:48.559
through number one twenty and in the
dept tools itself that has a video on

295
00:24:48.680 --> 00:24:53.799
number one twenty one and it lists
a whole bunch of different issues like source

296
00:24:53.839 --> 00:25:00.000
map improvements, enhanced performance and so
on. So right within the debt tool

297
00:25:00.119 --> 00:25:04.880
itself you can see what's the latest, and then there's an issues tab and

298
00:25:07.000 --> 00:25:11.599
it looks like there's what current issues
right now? For instance, there's one

299
00:25:11.640 --> 00:25:17.039
about a deprecated feature use reading a
cookie and cross site context will be blocked

300
00:25:17.039 --> 00:25:21.440
in future Chrome versions. Setting cookie
and cross site content will be blocked in

301
00:25:21.519 --> 00:25:26.400
future Chrome versions. So really cool
way I guess to get instead of having

302
00:25:26.440 --> 00:25:27.559
to go hunt around, right there
in the tools, you can get to

303
00:25:27.599 --> 00:25:33.920
the latest and see what ongoing issues
are being addressed. Is that a fair

304
00:25:33.960 --> 00:25:37.640
statement? Yes? So if you're
talking about the issues pedal, then yes.

305
00:25:37.720 --> 00:25:42.279
The idea the division for that one
is actually to be something like launch

306
00:25:42.279 --> 00:25:48.720
bed where you look at the issues
pedal and then you can go through the

307
00:25:48.759 --> 00:25:53.480
list and fix the issues on the
page. Because so that was introduced like

308
00:25:53.559 --> 00:26:00.640
a few years back, because we've
seen a lot of cons hold spam.

309
00:26:00.720 --> 00:26:06.599
Everybody was spamming the warnings and errors
to the console. So that's the rep

310
00:26:06.720 --> 00:26:14.559
interface that you have in that the
heaving theft tools also everybody's using and it

311
00:26:14.599 --> 00:26:18.119
was simply spam with a lot of
warnings and rows. So we moved certain

312
00:26:18.079 --> 00:26:22.200
a certain amount of those eras into
something called an issue panel where you actually

313
00:26:22.240 --> 00:26:29.640
can instead of throwing errors, you
can put spector information in there, as

314
00:26:29.680 --> 00:26:33.000
with the information Okay, you're facing
this issue, that's what they should be

315
00:26:33.039 --> 00:26:37.559
doing, like also with the suggestion
or a link to a web the depth

316
00:26:37.599 --> 00:26:42.440
articles on. I really like this
approach of trying to clean up like the

317
00:26:44.119 --> 00:26:48.240
like you said, it's kind of
the console had to a certain extent,

318
00:26:48.319 --> 00:26:52.400
has become this kind of a grab
bag of like everything, and a lot

319
00:26:52.400 --> 00:26:56.240
of organizations basically even started kind of
ignoring it because there was just so much

320
00:26:56.240 --> 00:27:00.640
stuff there. By the way,
I'm old enough to remember that is when

321
00:27:00.119 --> 00:27:07.440
companies would actually like post jobs in
there, so you would like going to

322
00:27:07.480 --> 00:27:10.799
a website, open the deaf tools
and says if you can read that,

323
00:27:11.039 --> 00:27:14.599
then we would like for you to
apply for a job at our company.

324
00:27:15.920 --> 00:27:21.839
I think that's kind of I don't
see that happening very much anymore, but

325
00:27:22.960 --> 00:27:27.039
that was an interesting time. I
sometimes see still see that. What I

326
00:27:27.160 --> 00:27:34.119
see more often is messages to end
users, not developers, with the content

327
00:27:34.160 --> 00:27:38.839
of you shouldn't be here if anybody
told you to open up tools. You're

328
00:27:38.880 --> 00:27:44.359
looking at this thing closely right now. Yeah, I'm guessing yeah, for

329
00:27:44.440 --> 00:27:48.319
security reasons. They're worried about the
phishing attacks or stuff like that. Yeah.

330
00:27:48.400 --> 00:27:53.799
Correct, that's why we also half
a year ago off like that,

331
00:27:53.920 --> 00:28:00.599
we had a little bit of a
of a ball or speed bump there were

332
00:28:00.720 --> 00:28:06.519
with you are pasting in some code
into the console. The first time,

333
00:28:07.400 --> 00:28:10.960
it's going to reply to you,
Hey, you're not allowed to do that

334
00:28:11.160 --> 00:28:19.440
because for security reasons, essentially please
type in I need to check I'm a

335
00:28:19.480 --> 00:28:23.440
developer of stuff like that, and
then actually that feature wasn't able that you

336
00:28:23.440 --> 00:28:30.559
can paste code into the console.
Interesting, you mentioned the war. You

337
00:28:30.680 --> 00:28:37.720
mentioned source maps before, and indeed
one of my biggest gripes like forever with

338
00:28:37.200 --> 00:28:45.160
effectively like every dev tools ever that
I've ever used is how kind of problematic

339
00:28:47.160 --> 00:28:51.880
or how limited source maps are.
Like they're better than nothing, for sure,

340
00:28:52.559 --> 00:28:59.039
but then not always by much.
So you know, the lines never

341
00:28:59.279 --> 00:29:03.640
actually match up exactly, and when
you're in the console, the names of

342
00:29:03.680 --> 00:29:11.519
the variables don't match and and stuff
like that. So it's it's a real

343
00:29:11.640 --> 00:29:17.720
pain sometimes to debugg code when when
it's like you know, minified and whatnot,

344
00:29:18.400 --> 00:29:23.480
and even if you ship the source
maps for it. And the reality

345
00:29:23.720 --> 00:29:29.279
is that I often do debug in
production. So is there anything you can

346
00:29:29.319 --> 00:29:32.960
say about that? Uh, yes, I can say a lot about that.

347
00:29:33.200 --> 00:29:38.640
Let me structural ef thoughts a little
bit about that summarizing. Yeah,

348
00:29:38.640 --> 00:29:42.119
that's what we also see, like
when you're debugging something, either you're going

349
00:29:42.160 --> 00:29:47.880
to have sorce maps, you're not
going to have source maps. And let's

350
00:29:47.880 --> 00:29:52.920
go down with the route of you
don't have source maps, the features like

351
00:29:52.960 --> 00:29:57.039
pretty print or local over rides are
going to be very very useful for you,

352
00:29:57.559 --> 00:30:03.599
and it would be really useful to
actually somehow and you can also attach

353
00:30:03.680 --> 00:30:07.079
them source maps afterwards to it and
so on. But if you're using source

354
00:30:07.119 --> 00:30:14.720
maps, you actually have them available. Getting that working correctly is really hard,

355
00:30:15.319 --> 00:30:21.880
and it really depends if your technology
is deck can set it up correctly

356
00:30:21.960 --> 00:30:26.440
as default. It turns out that
creating good source maps actually takes a lot

357
00:30:26.440 --> 00:30:36.720
of time when you're building. So
that's why sometimes there are options like speedy

358
00:30:36.839 --> 00:30:41.119
or of creating fast creating source maps
that are not one hundred percent correct.

359
00:30:41.759 --> 00:30:48.519
And that's also again I talked about
interesting breakpoint bucks that then result in very

360
00:30:48.559 --> 00:30:56.039
interesting breakpoints or debugging bucks when you're
when you're resolving a variable for example,

361
00:30:56.079 --> 00:31:00.599
we also re encounter when we do
using views we called a lot of uses.

362
00:31:00.839 --> 00:31:07.240
Uh, also running into those problems. Uh okay, but what what

363
00:31:07.279 --> 00:31:10.480
are we actually doing in order to
improve the situation. One hand, we

364
00:31:11.000 --> 00:31:18.440
are working with TC for nine to
stanardize source maps because you're not standardized.

365
00:31:18.960 --> 00:31:21.519
Yeah, that's one of the That's
one of the things that I kind of

366
00:31:21.519 --> 00:31:25.480
wanted to mention is that people don't
realize that it's source maps are something that

367
00:31:25.640 --> 00:31:30.599
kind of like kind of like happened
rather than being properly designed in you know,

368
00:31:30.839 --> 00:31:36.839
with like this really nice process and
as I recalled, some guy just

369
00:31:36.920 --> 00:31:41.000
created them and we're more or less
stuck with whatever he created, or something

370
00:31:41.039 --> 00:31:45.440
like that let's it's the story is
probably a little bit more complicated than that,

371
00:31:45.960 --> 00:31:48.359
but yeah, it's not standardized,
and that's a problem of course.

372
00:31:48.480 --> 00:31:57.799
So standardization should, hopefully when it's
actually stanardized, result in a more reliable

373
00:31:57.920 --> 00:32:04.480
usage of of source maps, and
also for stakeholders, enable them to actually

374
00:32:04.599 --> 00:32:07.279
change the standard and add new features
to it, because right now it's super

375
00:32:07.319 --> 00:32:14.039
hard for an entity, that for
any entity to actually make changes to our

376
00:32:14.079 --> 00:32:19.079
additions to the source maps back except
with the ex Google extensions and stuff like

377
00:32:19.119 --> 00:32:21.839
that. You have a standard,
there's actually a way to do that and

378
00:32:22.160 --> 00:32:29.319
orchestrated absolute So the bottom line,
is there going to be like a solution

379
00:32:29.759 --> 00:32:35.319
for let's say using proper the correct
variable names or the original variable names in

380
00:32:35.359 --> 00:32:38.279
the console for example. Yes,
there could be a solution, and I

381
00:32:38.279 --> 00:32:43.480
think I need to check. So
you're going to tell me that the solution

382
00:32:43.640 --> 00:32:51.240
is already there. So I'm eighty
percent I think we did something into that

383
00:32:51.319 --> 00:32:55.240
direction, or I know we did
something in the re direction. I don't

384
00:32:55.279 --> 00:32:59.519
know how much of that already has
shipped. Mm hmm. Yeah, we'll

385
00:32:59.559 --> 00:33:06.759
need to check. But yeah,
also because again I think you also did

386
00:33:06.799 --> 00:33:09.599
some usage testing, was like oh, but I wouldn't would expect the opposite

387
00:33:09.759 --> 00:33:16.440
as it works. The problem then
is that it's really difficult to if you're

388
00:33:16.519 --> 00:33:22.279
working with the source maps, then
you see the original code, but the

389
00:33:22.400 --> 00:33:28.480
variable in the console is the like
minified variable. It's actually really difficult to

390
00:33:28.599 --> 00:33:32.680
find out what the benified variable name
that matches what you see in the code

391
00:33:32.960 --> 00:33:37.200
is. So you're kind of like
screwed both ways. It would have been

392
00:33:37.240 --> 00:33:42.920
easier to see the original code or
because then at least you would have seen

393
00:33:42.960 --> 00:33:46.000
the correct variable names as it were, but you're like kind of stuck in

394
00:33:46.039 --> 00:33:55.640
the middle. Right. It's a
good segue into something we shipped last year,

395
00:33:57.240 --> 00:34:00.720
oh yeah, or one and a
half years ago, which is called

396
00:34:00.960 --> 00:34:07.319
the offered and deployed mode. So
in the source panel, if you can

397
00:34:07.359 --> 00:34:09.880
actually switch between the offered code,
which is which is all with the source

398
00:34:09.920 --> 00:34:14.960
map code, and the deployed code, which is not which is completely ignoring

399
00:34:15.000 --> 00:34:19.239
source maps at all, it's showing
you the thing that how it's actually importanless

400
00:34:19.400 --> 00:34:22.599
How do you do that? There
should be a button up there. If

401
00:34:22.639 --> 00:34:28.800
there's no button, then you need
to enable it in the preferences under experiments

402
00:34:29.320 --> 00:34:35.760
exactly. Oh yeah, unther experiments
in the settings group sources into offered and

403
00:34:35.800 --> 00:34:38.880
deployed trees, and with that you
can actually switch between the two of them.

404
00:34:39.079 --> 00:34:43.639
Four exactly the reason you just out
outlined, like, hey, actually

405
00:34:43.639 --> 00:34:47.280
you're debugging two worlds and you would
want to switch, and that's a concept

406
00:34:47.360 --> 00:34:51.800
we in the future. Sometimes in
the future you want to explore a little

407
00:34:51.800 --> 00:34:54.880
bit more like can you switch between
those store modes and what are the implications

408
00:34:54.960 --> 00:35:02.280
like variable resolution? Alternatively, maybe
show a tool tip like if you're hovering

409
00:35:02.360 --> 00:35:09.039
on top of the of the variable
in the minute, like you know in

410
00:35:09.480 --> 00:35:14.320
the source map, at least show
the name of the minified variable or something

411
00:35:14.360 --> 00:35:17.719
like that. That might be useful
as well. Okay, along the lines

412
00:35:17.719 --> 00:35:23.440
of practicality, I'm all about practicality. What I'd like to do is,

413
00:35:24.000 --> 00:35:29.000
you know, there's I'm counting what
eight or nine different tabs. The first

414
00:35:29.039 --> 00:35:31.360
four are probably speaking for me.
The first four are the ones that I

415
00:35:31.480 --> 00:35:35.119
use the most, the elements,
the console, the sources, and the

416
00:35:35.159 --> 00:35:39.400
network tabs. So what I'd like
to do is sort of walk through those

417
00:35:40.199 --> 00:35:45.440
different tabs, different pages within the
DEAV tools and just sort of go over

418
00:35:45.559 --> 00:35:51.239
what how you normally use them,
and maybe if you can think of any

419
00:35:51.519 --> 00:35:54.599
lesser known feature that you could think
would be really useful. So, for

420
00:35:54.599 --> 00:36:00.360
instance, if we start with the
elements, yeah right, the element elements

421
00:36:00.360 --> 00:36:05.880
basically shows your HTML markup and then
if you click on for instance, if

422
00:36:05.880 --> 00:36:07.920
you click on an element over on
the side, you can see the CSS

423
00:36:07.920 --> 00:36:14.519
that's applied and the layout have what
are the computed styles? You know,

424
00:36:14.599 --> 00:36:22.840
how things are put together and so
on. Okay, so let me also

425
00:36:22.840 --> 00:36:28.920
go with a with a bonus finger
to what I'm quite quite often using is

426
00:36:28.960 --> 00:36:36.199
our command so which means what they
have to do code. For example,

427
00:36:36.599 --> 00:36:42.039
if you do shift, I think
it's the option key on on on Mac

428
00:36:42.119 --> 00:36:51.000
and P you can actually shift command
okay, fift command. Yeah, sorry,

429
00:36:51.360 --> 00:36:57.800
I have a combined keyboard. Here's
a little it's hard to identify which

430
00:36:57.840 --> 00:37:04.800
of those machis it is, and
that actually enables you to to run all

431
00:37:04.840 --> 00:37:07.519
the commands and death tools. That's
what I'm using quite often if I want

432
00:37:07.559 --> 00:37:14.119
to look for something. Uh,
And that is the segue into when I'm

433
00:37:14.119 --> 00:37:22.000
talking about elements. What one feature
that I find very useful and is emulate

434
00:37:22.159 --> 00:37:28.599
focus page. So essentially, if
you are using deft tools, the page

435
00:37:28.639 --> 00:37:31.480
is actually losing the focus because they
have to set the focus. But with

436
00:37:31.639 --> 00:37:38.679
that thing, you can and cannot
let the page lose the focus, which

437
00:37:38.719 --> 00:37:49.360
is relevant for example, if you're
debugging subsiding problems with over menus or something

438
00:37:49.440 --> 00:37:54.639
like that, it will disappear when
the focus posy like drop down menus or

439
00:37:54.679 --> 00:37:59.159
something like that. Yeah, right, but I think that one is actually

440
00:37:59.159 --> 00:38:01.559
in the rendering draw or not like
that, whatever, But I find it

441
00:38:01.639 --> 00:38:07.239
very useful. And the other one
in elements, that iyem wall is used

442
00:38:07.280 --> 00:38:10.000
regularly and then don't keep back very
often in elements, I'm not that much

443
00:38:10.039 --> 00:38:16.280
into stidin is break on making drawn
break points. For example, if I

444
00:38:16.320 --> 00:38:22.360
want to know, oh, I
wonder when that particular element is going to

445
00:38:22.440 --> 00:38:25.000
change, it's going to be created, I can set a breakpoint there,

446
00:38:25.039 --> 00:38:29.599
and then if a new are a
sub item for example, is going to

447
00:38:29.639 --> 00:38:35.000
be added and filled into that particular
element, the execution brakes and I know

448
00:38:35.119 --> 00:38:40.159
exactly what's happening there. Then Yeah. Unfortunately, that's a lot less useful

449
00:38:40.239 --> 00:38:44.360
than it used to be with modern
frameworks. I mean, you know,

450
00:38:44.599 --> 00:38:47.760
so it breaks in the middle of
the React code somewhere, you know,

451
00:38:47.840 --> 00:38:53.599
what do you do now, but
it was much more useful in the jae

452
00:38:53.639 --> 00:39:00.559
Query days. Let's put it this
way, right, which is also a

453
00:39:00.679 --> 00:39:07.679
nice segu with another topic. So
previously mentioned a little bit about ignoaledsts and

454
00:39:07.679 --> 00:39:14.119
stuff. So ignore you can use
icknowledged to ignore files and stacks in your

455
00:39:14.119 --> 00:39:20.000
stack trace. What this means,
for example, typically the inner workings of

456
00:39:20.480 --> 00:39:23.480
the React frameworking. Typically you're not
going to be interested in that. You're

457
00:39:23.519 --> 00:39:27.760
probably going to be more interested in
the code that they actually wrote that they

458
00:39:27.760 --> 00:39:34.639
actually have influence and control of.
So with ignowledged, you can let those

459
00:39:34.679 --> 00:39:38.960
things be ignored in stack traces and
then everything else. So that's super useful.

460
00:39:39.039 --> 00:39:46.320
And now where did you how do
you say that? Uh? That's

461
00:39:46.360 --> 00:39:52.719
also in the settings. Yeah,
I think in the So I think that

462
00:39:52.840 --> 00:39:58.679
in the sources channel when you see
a stack you can actually right click,

463
00:39:58.920 --> 00:40:02.119
I think on an end in the
second say I can ignore this. You

464
00:40:02.159 --> 00:40:06.920
can also do that, And they
can also add foldos and files or use

465
00:40:06.960 --> 00:40:15.360
the settings dialogue in the DEFTO settings, or a framework might already pre populating

466
00:40:15.360 --> 00:40:22.880
the list because that lists, I
think we addit this experimental source maps extension

467
00:40:22.920 --> 00:40:25.519
or something like that. I need
to check how it's actually implemented. And

468
00:40:25.719 --> 00:40:30.360
if the framework, like for example, Anglo is already supporting that, then

469
00:40:30.400 --> 00:40:34.760
you actually don't need to do anything. Then the wol frameworkord is not going

470
00:40:34.840 --> 00:40:38.280
to show up at all. Yeah. I just here's what I found.

471
00:40:38.639 --> 00:40:44.880
If you do the COMMANDSFP, you
get quite an extensive list of different things

472
00:40:44.920 --> 00:40:49.679
that you can do. There's one
that should shows CSS overview. Oh yeah,

473
00:40:50.440 --> 00:40:52.360
that's a great panel, and you
can see memory and shows all your

474
00:40:52.400 --> 00:40:59.199
background colors being used, text colors, contrasts, you can see in all

475
00:40:59.239 --> 00:41:04.920
their codes and what they look like, font info, media queries. Oh

476
00:41:04.960 --> 00:41:07.679
my gosh, just the colors and
the overview summaries. I can think of

477
00:41:07.719 --> 00:41:10.920
many times I've been looking for like
browser extensions to find this stuff, and

478
00:41:10.960 --> 00:41:15.440
it's already there. Okay, so
let's move on to the console. So

479
00:41:15.119 --> 00:41:22.559
probably you know Dan mentioned debugging by
alerts. I think you know everybody knows

480
00:41:22.559 --> 00:41:24.079
how to do like alert something.
You know, Oh, I hit my

481
00:41:24.119 --> 00:41:28.719
code here. Great, that tells
me. I know there's a heck of

482
00:41:28.719 --> 00:41:30.239
a lot more you can do with
the console. And I have an article

483
00:41:30.920 --> 00:41:35.840
bookmark somewhere about all these different things
you can do with the Console like Console

484
00:41:36.000 --> 00:41:39.840
error and Console I think you can
do stack traces and there's just all kinds

485
00:41:39.840 --> 00:41:45.480
of crazy stuff that you can put
out in the console that even you know,

486
00:41:45.679 --> 00:41:49.679
breakpoints are awesome, but they don't
do everything until the console really helps

487
00:41:49.679 --> 00:41:54.119
shit see some stuff there. Anything
else what can you think about the console?

488
00:41:54.159 --> 00:42:00.440
Maybe some hidden gems in there.
So what I find well in the

489
00:42:00.440 --> 00:42:13.599
console is using snippets okay essentially that
it can run code that you have prepared

490
00:42:14.000 --> 00:42:17.800
for some tasks in there. What
I really find find useful in console is

491
00:42:17.840 --> 00:42:23.519
the dollar sign zero two I think
four, stuff like that which give you

492
00:42:23.559 --> 00:42:31.440
automatic access to the late the last
select at HTML element. Yeah zero,

493
00:42:31.679 --> 00:42:36.440
you get access to the last select
that element. That's very useful w if

494
00:42:36.440 --> 00:42:38.800
you want to try on something.
The one thing that I really love about

495
00:42:38.800 --> 00:42:45.119
the Console in their tools is that
when you log out elements it behaves is

496
00:42:45.280 --> 00:42:53.760
if you copied something out of the
element's view that you can actually like expand

497
00:42:53.840 --> 00:42:58.880
them and you can obviously you can
right click on them and go to the

498
00:42:58.920 --> 00:43:04.079
elements itself, but you can also
do a lot of stuff even like in

499
00:43:04.119 --> 00:43:08.199
the Console with elements is if you're
in the elements panel which is which is

500
00:43:08.280 --> 00:43:15.880
really which is really nice. And
I also like the various dollar shortcuts.

501
00:43:15.920 --> 00:43:22.360
They're they're useful. And the one
thing that I haven't found very useful maybe

502
00:43:22.400 --> 00:43:29.519
I'm just not using it right is
the uh, the ability to watch expressions.

503
00:43:29.960 --> 00:43:32.400
I don't know, I've yet to
find a really useful use case for

504
00:43:32.440 --> 00:43:37.840
that. One thing to watch out
for the with the console is if you

505
00:43:37.199 --> 00:43:43.519
change if you put in a filter, or if you change the default levels,

506
00:43:43.800 --> 00:43:46.760
or if you go into an eye
frame, then you might suddenly be

507
00:43:46.880 --> 00:43:52.440
surprised why you're not seeing things that
you expect to see. So so always

508
00:43:52.480 --> 00:43:57.920
be careful about what you put in
the filter and remember to to take into

509
00:43:57.960 --> 00:44:01.480
account that you're filtered, potentially filtering
out stuff that you may want to see.

510
00:44:02.599 --> 00:44:07.320
Yeah, that's true, Thank you
for saying that. Yeah, the

511
00:44:07.480 --> 00:44:15.519
console is actually super powerful. Yeah. Life expressions. I find them useful

512
00:44:15.840 --> 00:44:22.679
when I want to have a life
eberlation and life update when something happens on

513
00:44:22.679 --> 00:44:25.760
a page. So if I'm running
the console, for example, next to

514
00:44:25.800 --> 00:44:31.199
the page, and I lose some
interactions on a page, then a live

515
00:44:31.280 --> 00:44:35.719
expression is going to change depending what
the life expression is for example. But

516
00:44:36.719 --> 00:44:38.599
I don't need to go back to
the console all the time to issue new

517
00:44:38.599 --> 00:44:46.440
command, but it seemed automatically updates. I do put watches like in the

518
00:44:46.480 --> 00:44:52.880
source panel, which kind of do
similar things. I've yet to really find

519
00:44:52.960 --> 00:44:57.239
the need for live expressions in the
console. But like I said, you

520
00:44:57.280 --> 00:45:01.880
know, maybe it's it's not every
user is going to use all the features.

521
00:45:01.920 --> 00:45:10.079
It's often mixed. The watch expressions
are going a great same with breakpoints.

522
00:45:10.239 --> 00:45:15.719
Sometimes you will not be able to
use them properly and pretty active bugging.

523
00:45:15.719 --> 00:45:22.679
It's gonna be more useful. Uh
yeah. So live expression is that

524
00:45:23.039 --> 00:45:28.440
where a value changes as as the
code is running, it changes right there

525
00:45:28.480 --> 00:45:31.239
on the console for you or yeah, you see, Steve. If you

526
00:45:31.320 --> 00:45:35.800
go to the console tab, you
will see the eye icon. Oh right,

527
00:45:35.880 --> 00:45:38.400
huh And if you click that,
it opens up this new line where

528
00:45:38.400 --> 00:45:45.119
you can write in an expression.
Oh okay, and that expression will update

529
00:45:45.159 --> 00:45:50.639
automatically as things change. Oh okay, So like a value of a variable

530
00:45:50.679 --> 00:45:54.159
maybe or yeah, for example anything. Really it's like a watch okay,

531
00:45:54.239 --> 00:45:59.559
yeah, the PHP de tools as
in my ideas a watch KP thing.

532
00:45:59.800 --> 00:46:02.159
Yeah. So it's like I said, like I said, you have in

533
00:46:02.559 --> 00:46:07.760
the sources panel you have something called
watch which effectively does exactly the same thing.

534
00:46:07.800 --> 00:46:12.639
It's just okay, this is doing
it in the console. Okay,

535
00:46:14.000 --> 00:46:15.920
yeah, console log, there's console
errors. There's all kinds of stuff you

536
00:46:16.000 --> 00:46:20.480
can I like console table, which
a lot of people are not familiar with.

537
00:46:20.639 --> 00:46:25.440
Right does it prints out everything in
a nice little neat table in internet

538
00:46:25.679 --> 00:46:30.639
if if, if your data is
proper is appropriately like organized or configured,

539
00:46:30.679 --> 00:46:36.119
if it's effectively tabular data, then
then the table that can be really useful.

540
00:46:37.960 --> 00:46:44.079
I also like using the some of
the web performance APIs directly from the

541
00:46:44.119 --> 00:46:52.800
console, So things like performance get
entries or get entries by by name or

542
00:46:52.800 --> 00:46:57.239
get entries by type are really powerful
things to be able to do directly from

543
00:46:57.280 --> 00:47:00.320
the console. Yeah. Yeah,
I remember one time, Dan, you

544
00:47:00.360 --> 00:47:06.000
and I were talking about promises and
going from the promises and stuff. You

545
00:47:06.039 --> 00:47:08.280
just sit there and worked in the
console the entire time. You know,

546
00:47:08.360 --> 00:47:12.239
right, code said a variable,
run this, run that, and everything

547
00:47:12.360 --> 00:47:15.239
was just right in the console.
Yeah. I know that a lot of

548
00:47:15.280 --> 00:47:22.920
people like launch node in in in
the terminal. I'm just I just opened

549
00:47:22.960 --> 00:47:27.239
theF tools and go to the console. I'm that's I feel right it home

550
00:47:27.239 --> 00:47:29.800
there for a lot of these sorts
of things, so a lot when I

551
00:47:30.079 --> 00:47:34.760
when I need one to play with
code and like get immediate feedback, the

552
00:47:34.840 --> 00:47:37.400
console is often where I like to
do it. But for example, one

553
00:47:37.440 --> 00:47:40.599
of the things is when. So
for example, let's say we mentioned that

554
00:47:40.719 --> 00:47:44.519
one of the other tabs that,
like Steve, that you said that you

555
00:47:44.559 --> 00:47:49.599
talked about as being a really commonly
used tab is the network tab. But

556
00:47:49.679 --> 00:47:53.559
the problem with the network tab is
let's say I opened the page after the

557
00:47:53.599 --> 00:47:59.760
pages already loaded, so I kind
of missed stuff. But I can use

558
00:47:59.840 --> 00:48:06.440
the the performance get entries or get
entries by type to see network information about

559
00:48:06.599 --> 00:48:13.000
things that already happened even while even
if the deaf tools was closed. So

560
00:48:13.119 --> 00:48:15.559
that's really useful. So you're just
going to the console, opening your line

561
00:48:15.599 --> 00:48:20.559
and type that in and it shows
you Yeah, I do like, yeah,

562
00:48:20.719 --> 00:48:23.760
get entries by type resource and I
can see the various resources that down

563
00:48:23.840 --> 00:48:29.320
downloaded. Now it's not as like
visually pleasing to see as the as the

564
00:48:29.360 --> 00:48:35.840
network tab, but it's better than
nothing. Sure, Yeah, I will

565
00:48:36.119 --> 00:48:40.119
try to find the article I used
to have bookmarked or have bookmark somewhere that

566
00:48:40.119 --> 00:48:44.719
shows all the different things you can
do in the console. It's it's really

567
00:48:45.079 --> 00:48:47.079
amazing. You know, there's more
than let's just say, there's a lot

568
00:48:47.119 --> 00:48:52.559
more than console lot. The one
of the funny changes that you recent that

569
00:48:52.800 --> 00:48:55.480
was, well it's not recent anymore, but it was like this small thing

570
00:48:57.159 --> 00:49:02.440
and it was really helpful is that
isn't really const the in the console anymore

571
00:49:02.800 --> 00:49:08.639
that you can redefine const. Yeah, I can recall that. It was

572
00:49:08.719 --> 00:49:12.960
such a great thing. It was
such a useful thing. It was so

573
00:49:13.000 --> 00:49:16.880
small. Ye, it's so useful
because you would accidentally type cons something because

574
00:49:16.880 --> 00:49:22.199
you copied some line of code somewhere, and then you were kind of screwed

575
00:49:22.280 --> 00:49:25.840
because you couldn't change it anymore until
you like reloaded the tab or something like

576
00:49:25.880 --> 00:49:32.079
that. And now you can effectively
just redefine the const So that's really nice.

577
00:49:32.679 --> 00:49:36.199
All right, So let's move over
to the sources tab. That's one

578
00:49:36.280 --> 00:49:42.760
of my one of my favorites that
I use quite a bit. Now.

579
00:49:42.800 --> 00:49:45.480
I do have one question Michael before
we get started. And I don't know

580
00:49:45.519 --> 00:49:50.119
if if this is a bug or
way things have changed, and maybe it

581
00:49:50.159 --> 00:49:53.039
has to do with the source maps
discussion that you were talking about. I

582
00:49:54.599 --> 00:49:58.519
work mostly in view when it comes
to the JavaScript on the front end.

583
00:49:58.960 --> 00:50:01.559
And it used to be pretty easy
to be able to go to my documentary

584
00:50:01.599 --> 00:50:04.719
over on the left and find a
file and open it, and that was

585
00:50:04.760 --> 00:50:08.800
it. Now I have to use
like a debugger line to find it right

586
00:50:08.840 --> 00:50:14.000
open the file because webpack has created
so many different variations, you know,

587
00:50:14.119 --> 00:50:17.079
of a particular file, and it's
not so easy just to you know,

588
00:50:17.159 --> 00:50:22.440
command P type my file name and
open it. Is that something that's changes

589
00:50:22.760 --> 00:50:24.519
have to do with source maps?
What? What do you know? What

590
00:50:25.039 --> 00:50:29.960
you understand what I'm talking about?
Are you talking about files at the ending

591
00:50:30.000 --> 00:50:32.880
with a hash? Yes? Well, yeah, that's what I see is

592
00:50:32.920 --> 00:50:37.400
when I go to open them and
I can't find the one that actually is

593
00:50:37.480 --> 00:50:39.159
running my you know that has my
code. So if I put a debugger

594
00:50:39.199 --> 00:50:42.960
line in there and run and then
I'll hit that, Okay, that's the

595
00:50:43.000 --> 00:50:45.320
one that I want to put my
brake points in and in or It's just

596
00:50:45.480 --> 00:50:49.679
it didn't used to be so difficult. So I'm not sure what's changed,

597
00:50:49.719 --> 00:50:52.280
if it's a combination of the view
code, or if it's the deb tools

598
00:50:52.440 --> 00:51:00.679
or or something. So it's so
we I think we use ago when we

599
00:51:00.719 --> 00:51:06.880
started that we actually did have a
look at the default experience from different from

600
00:51:06.920 --> 00:51:14.519
a different popular frameworks and how the
debugging experience is out out of the box.

601
00:51:14.599 --> 00:51:22.440
Essentially. That was enlightening and very
interesting, and we found bugs in

602
00:51:22.440 --> 00:51:28.239
Chrome deftols that we addressed, but
we also found enhancements that frameworks can be

603
00:51:28.280 --> 00:51:31.119
doing in order to provide essentially better
information or stuffing like that, so they

604
00:51:31.280 --> 00:51:37.599
fault debugging experience is better. I
think we also so I can recall that

605
00:51:37.639 --> 00:51:42.159
particulation, for example with the hashers
because again same thing. Hey, now

606
00:51:42.280 --> 00:51:45.440
I hot monel load and kicked in, and now I have five files with

607
00:51:45.519 --> 00:51:49.639
the same name but different touches.
Which one is the last one? I

608
00:51:49.679 --> 00:51:55.000
don't care about anything else anyway,
and some fixes have been made. I

609
00:51:55.039 --> 00:52:04.360
would need to check if if that
effected View. I think it has,

610
00:52:05.039 --> 00:52:07.679
because then it also depends what we're
about, version of you you're actually running,

611
00:52:07.760 --> 00:52:12.719
and so on. So a question
about that, do you actually work

612
00:52:13.239 --> 00:52:17.039
with the framework makers directly, Like
if let's say you say, hey,

613
00:52:17.760 --> 00:52:22.960
we think that the view could be
doing something a bit differently in that that

614
00:52:22.000 --> 00:52:28.159
would really improve the integration, do
you actually reach out to the view contributors

615
00:52:28.199 --> 00:52:30.320
and you know, suggests a change
to them. How does it work?

616
00:52:30.400 --> 00:52:37.400
Shortly answers that question, Yes,
that's what we're doing. So we we

617
00:52:37.440 --> 00:52:42.039
obviously can't fix everything ourselves, be
it because we don't have to know how,

618
00:52:42.159 --> 00:52:44.639
or we don't have the capacity,
or we don't have control over the

619
00:52:44.679 --> 00:52:49.400
source code. So we need to
work with partners like you, like React,

620
00:52:49.519 --> 00:52:53.960
like Angola and so on to get
a better experience to our users.

621
00:52:55.159 --> 00:52:59.039
So yes, we're reaching out to
them and ask them, hey, we

622
00:52:59.119 --> 00:53:02.199
have seen that, can you at
that? Or hey, we are really

623
00:53:02.199 --> 00:53:07.199
interested in making the experience for reacting
this better. What are the topic issues

624
00:53:07.239 --> 00:53:09.360
did to see when they're debugging and
how can we help there? And so

625
00:53:09.400 --> 00:53:15.639
on. Now, one of my
favorite features in Chrome dev tools, and

626
00:53:15.679 --> 00:53:23.480
it's part of the Sources panel,
is the override aspect. For those of

627
00:53:23.519 --> 00:53:31.360
you don't know, overrides mean that
you can effectively like edit the file and

628
00:53:31.559 --> 00:53:37.880
save a local copy of the edited
file, so that then if you even

629
00:53:37.920 --> 00:53:42.840
if you reload the page, it
will really it will use your your edited

630
00:53:43.000 --> 00:53:50.559
changes. And it's a really cool
way of trying out a fix without having

631
00:53:50.679 --> 00:53:55.239
to redeploy a new version. Of
course, there are problems with it.

632
00:53:55.320 --> 00:53:59.519
I mean, butlers get in the
way. If your code is bundled,

633
00:53:59.559 --> 00:54:04.760
then then then editing it can be
you know, editing let's say, editing

634
00:54:04.840 --> 00:54:08.760
the minified bundle code is a lot
less fun. It's it's it's doable,

635
00:54:08.800 --> 00:54:15.440
and I've done it, but but
it's a lot less fun. And so

636
00:54:15.440 --> 00:54:21.519
so that's one option. I've even
done like crazy things like uh, copy

637
00:54:21.639 --> 00:54:27.320
the non minified version and paste it
over the entire file and then edit that

638
00:54:27.920 --> 00:54:31.639
and save it into the overrides.
But but when you can get them to

639
00:54:31.760 --> 00:54:37.480
work, overrides are immensely powerful feature. One thing that I would have liked,

640
00:54:37.519 --> 00:54:42.519
which is kind of similar to overrides, would have been the ability to

641
00:54:42.639 --> 00:54:46.440
redirect, say, like you know, instead of download the file from this

642
00:54:46.719 --> 00:54:52.159
r L, like like behaviors if
you're downloading the file from this RL,

643
00:54:52.239 --> 00:54:57.920
but actually download it from a different
URL, like what you might get with

644
00:54:57.920 --> 00:55:06.639
with certain local proxies. Right,
Okay, so yes, all right is

645
00:55:06.639 --> 00:55:12.320
a great feature. Network over rights
and local over rights. And we also

646
00:55:12.599 --> 00:55:15.519
did actually spend a few cycles to
improve it, and of last year,

647
00:55:15.519 --> 00:55:19.159
I think, oh yeah, the
timing, the load timing, I think

648
00:55:19.199 --> 00:55:22.960
you improved that. It that it
behaves as if it's not local but downloads

649
00:55:23.000 --> 00:55:29.760
over the net from the network.
Yeah, and also we also did some

650
00:55:29.880 --> 00:55:35.000
UI changes with local overrights. I
think because it was hard. It's a

651
00:55:35.000 --> 00:55:38.239
super useful feature, super hard,
super hard to find if you don't know

652
00:55:38.280 --> 00:55:45.239
where we're looking or if or you
might find if if somebody else that's already

653
00:55:45.280 --> 00:55:46.800
known about it is going to tell
you about that, which is are you

654
00:55:47.239 --> 00:55:51.880
Are you familiar with it? By
the way, Steve with the overrides feature,

655
00:55:52.239 --> 00:55:54.039
No, I haven't used it before. I've seen something similar. I

656
00:55:54.039 --> 00:56:00.639
remember Chris Koyer a few years ago
from CSS Tricks and codepen and shop Talk

657
00:56:00.679 --> 00:56:07.360
show did a video about, uh, making your CSS local so you can

658
00:56:07.440 --> 00:56:09.960
change it and tweak it, you
know, if you're working like a remote

659
00:56:09.960 --> 00:56:14.480
site and you can tweak it actually
locally, which is I thought was awesome.

660
00:56:14.960 --> 00:56:16.599
This sounds familiar. Although the question
I have for you, Dan is

661
00:56:16.639 --> 00:56:22.079
how is using the overrides panel within
the dev tools different? Say, if

662
00:56:22.119 --> 00:56:25.239
I'm working locally right and I'm editing
code and my ID and I changed that

663
00:56:25.440 --> 00:56:30.639
and you know how it happens,
what's the difference. Obviously if you can

664
00:56:30.760 --> 00:56:36.119
if you have hot reload with actual
debugging, local debugging, that's the better

665
00:56:36.199 --> 00:56:39.599
option. Okay, let's say you've
got it already shipped in production. Let's

666
00:56:39.599 --> 00:56:45.199
say and you're thinking, hey,
you know, yeah, I think we

667
00:56:45.280 --> 00:56:50.199
could do X better if we do
this instead of that. But you know,

668
00:56:50.400 --> 00:56:52.039
you you don't want to be instead
of you know, firing up the

669
00:56:52.079 --> 00:56:58.119
development environment and starting and doing like
that. Way, you just opened open

670
00:56:58.239 --> 00:57:01.480
it up to the override. I
didn't test and effectively test your change in

671
00:57:01.559 --> 00:57:07.519
production. Oh yeah, oh that's
nice. And for example, I did

672
00:57:07.559 --> 00:57:15.039
a workshop like once I remember,
and instead of having people like install a

673
00:57:15.119 --> 00:57:22.440
whole development environment, I created the
website with would like themo code and and

674
00:57:22.639 --> 00:57:28.159
we basically work together by overriding it
with more and more sophisticated versions. So

675
00:57:28.199 --> 00:57:37.400
they actually used Chrome dev tools as
their development environment creating overrides. And the

676
00:57:37.400 --> 00:57:42.679
the sibling of all right is the
workspace feature. So if you actually have

677
00:57:42.760 --> 00:57:45.480
access to the source code and you
want to keep on hacking in the tools

678
00:57:45.480 --> 00:57:49.400
because you want to make small changes
and stuff like that, you can use

679
00:57:49.480 --> 00:57:53.519
workspace to actually hook up to to
a file system and make a link to

680
00:57:53.760 --> 00:58:01.840
your actual source code. That's really
so that's really about using the depv tools

681
00:58:01.840 --> 00:58:07.639
effectively as your development environment effectively.
So what is it doing is creating a

682
00:58:07.679 --> 00:58:10.679
local copy within the browser there and
then your tweaking. No, No,

683
00:58:10.800 --> 00:58:16.880
it's really mapping to your actual code. Think about instead of using vis code

684
00:58:17.039 --> 00:58:24.119
for your coding, using Chrome dev
tools for your coding. Yeah, okay,

685
00:58:24.159 --> 00:58:28.039
so if I if I add a
folder, I'm adding it so I

686
00:58:28.079 --> 00:58:30.519
can do that on my prod site, you know, my whatever dot com.

687
00:58:30.559 --> 00:58:35.320
And it's actually connecting with that code
that's bundled code that's running on my

688
00:58:35.360 --> 00:58:42.400
server. Well, that's if your
server is local or or or accessible as

689
00:58:42.519 --> 00:58:45.400
via the file system. Okay,
so then, but you were talking about

690
00:58:45.480 --> 00:58:51.360
running using the Chrome dev tools like
as your workspace against check against pride.

691
00:58:51.400 --> 00:58:53.440
How does how does that work?
I guess that's what I'm trying. Is

692
00:58:53.440 --> 00:58:55.840
that what you're talking about? You
know? So we're saying that there are

693
00:58:55.840 --> 00:59:00.920
two different features which are related.
One is a feature called overrides, and

694
00:59:00.960 --> 00:59:07.440
the other, the feature called workspace. Workspace is about mapping your actual development

695
00:59:07.519 --> 00:59:13.320
workspace into dev tools so that when
you make changes, you're actually making changes

696
00:59:13.719 --> 00:59:21.079
in your original code files. Override
is a feature that lets you override the

697
00:59:21.159 --> 00:59:24.119
file if the original the file coming
from the server remains the same, but

698
00:59:24.239 --> 00:59:31.639
you're creating like a local copy that
the browser uses instead. Gotch nice,

699
00:59:32.320 --> 00:59:36.639
Yes, okay, that makes that
makes a lot of sense. I mean

700
00:59:36.679 --> 00:59:38.400
I can. The classic case that
comes to mind is, hey, it

701
00:59:38.440 --> 00:59:43.000
works on local but why is it
not working on products? You know,

702
00:59:45.960 --> 00:59:50.440
like if you, for example,
a debugging if you are offering library for

703
00:59:50.480 --> 00:59:53.199
example, and the buck whits not
working on a client site, you will

704
00:59:53.199 --> 00:59:57.320
not have access to the client's most
code, but you still need to debuggets

705
00:59:57.360 --> 01:00:00.719
so it all writes. You can
actually try it fixes stuff like that.

706
01:00:00.599 --> 01:00:08.039
In the production environment, it's very
useful. Protect that's cool, Okay,

707
01:00:08.239 --> 01:00:12.719
learn something new every day, all
right. Now. The other thing that

708
01:00:12.760 --> 01:00:17.679
I want to talk about in this
dev tools environment we're on running out of

709
01:00:17.719 --> 01:00:24.320
time here is breakpoints, just because
they are so incredibly useful the ways I

710
01:00:24.400 --> 01:00:28.119
use them, and I am sure
I don't come close to maximum out is

711
01:00:28.119 --> 01:00:30.119
the way they could be in it, and they work pretty much the same

712
01:00:30.119 --> 01:00:34.480
as they do in my PHP.
Ide is one, you know, obviously,

713
01:00:34.559 --> 01:00:37.599
just to stop code and see what's
the value of certain variables at a

714
01:00:37.679 --> 01:00:38.760
certain point. You know, if
you're in a loop, you're in a

715
01:00:38.800 --> 01:00:45.000
function whatever. That's probably the most
useful thing sometimes, but I know there's

716
01:00:45.000 --> 01:00:49.800
other things where you can edit the
break points and set conditions. You know,

717
01:00:49.840 --> 01:00:52.960
whether it's okay, only hit this
breakpoint, if this variable has a

718
01:00:52.000 --> 01:00:55.280
specific value because you're inside of a
monster loop and you don't want to stop

719
01:00:55.320 --> 01:01:00.679
every single time, or you can
and you know it's temporary, disable it

720
01:01:00.960 --> 01:01:06.079
instead of removing it. You know, there's all kinds of conditions. If

721
01:01:06.079 --> 01:01:08.440
you write click on a breakpoint,
edit it. You can see all the

722
01:01:08.440 --> 01:01:14.119
different options. But it's a lot
more useful than just click it. Okay,

723
01:01:14.159 --> 01:01:21.119
it's going to stop every time it
runs here A yeah, Conditional breakpoints

724
01:01:21.119 --> 01:01:27.440
are very useful. There's also the
option of log points, which is it's

725
01:01:27.480 --> 01:01:31.559
also it's instead of breaking it,
just logs something to the console. You

726
01:01:31.599 --> 01:01:37.639
could do it in the old days
by just creating a condition with a console

727
01:01:37.679 --> 01:01:40.639
log in it. But I guess
that a lot of people just didn't think

728
01:01:40.679 --> 01:01:49.880
about that trick. So so yeah, but so, but it's useful because

729
01:01:49.880 --> 01:01:52.599
something you just want to, like, you thinking, it would have been

730
01:01:52.599 --> 01:01:55.719
really useful if I had this log
statement, but I don't have it in

731
01:01:55.760 --> 01:02:01.760
the code. So I'll just add
it as as as a log option or

732
01:02:01.800 --> 01:02:06.599
if you're doing product bugging again where
it can't change the source code except if

733
01:02:06.639 --> 01:02:09.639
you're all writing. But that doesn't
might not some reason not working. So

734
01:02:09.719 --> 01:02:15.199
you can do a lock point and
it's like a printer. Or you can

735
01:02:15.239 --> 01:02:21.400
actually can you actually even change local
variables in in kind of like this slog

736
01:02:21.480 --> 01:02:28.320
point, like effectively add some logic
in a log point. Yeah, you

737
01:02:28.360 --> 01:02:31.360
can add an expression in there.
I think it needs to be a side

738
01:02:31.400 --> 01:02:35.360
effect free or something like that,
or I might be mixing it up,

739
01:02:35.440 --> 01:02:42.360
but you can add an expression.
Hm hmm. That's interesting. One more

740
01:02:42.440 --> 01:02:47.000
thing that it's worth while mentioning about
breakpoints is that sometimes you have like a

741
01:02:47.039 --> 01:02:52.440
complex line with multiple instructions on it. If you put a brake point,

742
01:02:52.480 --> 01:02:57.239
you will actually see that there are
small arrows inside the line itself and you

743
01:02:57.320 --> 01:03:04.000
can actually turn on and off breakpoints
in side the line. Yep, welcome

744
01:03:04.039 --> 01:03:08.760
to Challas, crist Well, that's
that's that was that's true even from the

745
01:03:08.840 --> 01:03:13.239
sea days. You know, I
know, I know, But why is

746
01:03:13.239 --> 01:03:19.320
it super It gets super interesting is
when you have minimizers at work in bundlers,

747
01:03:19.760 --> 01:03:23.639
everything gets cramped together into one line
to squeeze out as many bites as

748
01:03:23.679 --> 01:03:29.679
possible. Yeah, that's that's kind
of why I think the AGG is now

749
01:03:29.719 --> 01:03:34.480
trying to get us all to just
uh work in the original source code without

750
01:03:34.519 --> 01:03:39.960
minifiers and and basically rely on on
the compression and and not on the manification

751
01:03:40.880 --> 01:03:45.159
uh for to to you know,
and and there's a lot of truth in

752
01:03:45.159 --> 01:03:47.880
that in a lot of ways,
but you know, he he's trying to

753
01:03:47.920 --> 01:03:52.960
take it even a step further and
trying to convince us not to use bundlers.

754
01:03:52.440 --> 01:04:00.280
And we're not We're not there yet. I all right, So finally

755
01:04:00.880 --> 01:04:05.320
we want to go to the talk
about the network tab. And there's a

756
01:04:05.360 --> 01:04:09.360
lot you can see on your network
tab in terms of basically all the community,

757
01:04:09.360 --> 01:04:13.280
all the files that are being downloaded
as a XHR requests that are being

758
01:04:13.320 --> 01:04:17.440
made. Uh, there's all kinds
of information. My primary use of them,

759
01:04:17.440 --> 01:04:23.280
where I'm dealing with a you know, a front end framework that's communicating

760
01:04:23.280 --> 01:04:26.159
over APIs to a back end,
is to see, Okay, what calls

761
01:04:26.199 --> 01:04:29.880
were made, what was the payload, what was the response? Was it

762
01:04:29.880 --> 01:04:33.079
an error code? Was it you
know, era within the return JSON or

763
01:04:33.119 --> 01:04:39.320
the return you know whatever the response
is, et cetera. So that's my

764
01:04:39.440 --> 01:04:43.159
primary use I usually have. For
instance, you can filter all the different

765
01:04:44.119 --> 01:04:48.159
items that are written to the to
the console log log I usually have my

766
01:04:49.000 --> 01:04:55.199
betch slacks slash x hr button enabled
to so I can just see the traffic

767
01:04:55.239 --> 01:04:58.719
going back and forth. But you
can see CSS files that are downloaded,

768
01:04:58.760 --> 01:05:01.199
JS files, font images, et
cetera. You know sizes, how long

769
01:05:01.239 --> 01:05:06.239
they took and so on. So
that's and then you even have filter capabilities,

770
01:05:06.239 --> 01:05:09.679
so if you have a huge console, you can just type in and

771
01:05:09.719 --> 01:05:15.719
filter and you know, pretty standard
stuff. What other stuff is can you

772
01:05:15.760 --> 01:05:20.760
do in the network tab that I
haven't touched on? So? What I

773
01:05:20.840 --> 01:05:27.920
see that severally utilized and also controversial
if most people are setting it all off,

774
01:05:28.000 --> 01:05:34.559
is disabled cash for example, Yes, so you see people running quite

775
01:05:34.599 --> 01:05:43.840
often either having it enabled, so
cash is obviously disabled or disabled. And

776
01:05:45.280 --> 01:05:48.880
yeah, why is this useful?
That's useful if you want to debug and

777
01:05:49.000 --> 01:05:53.119
code load of a website for example, oil, if you're interested in performance

778
01:05:53.159 --> 01:06:00.039
debugging where you want to replicate similar
citation and so on. In particular performance

779
01:06:00.079 --> 01:06:05.320
cases, disabled cash is quite quite
often heavily used. Just a comment on

780
01:06:05.440 --> 01:06:12.039
that as somebody who's really into performance, it's important to understand that while disabling

781
01:06:12.119 --> 01:06:15.920
cash is the easiest way to simulate
the first load, it's not really the

782
01:06:16.000 --> 01:06:23.159
same because in the first load you're
starting with an empty cash. That's true,

783
01:06:23.599 --> 01:06:28.599
but cash is not disabled. So
if you have things like prefetches and

784
01:06:28.679 --> 01:06:33.960
preloads, disabled cash kind of kills
them, whereas in the normal flow of

785
01:06:34.039 --> 01:06:40.639
things they do work. So disabled
cash, like I said, is nice,

786
01:06:40.800 --> 01:06:44.800
is the easiest way to simulate the
first load, but it's not the

787
01:06:44.880 --> 01:06:49.079
same as the first load. If
you want to do that, you probably

788
01:06:49.159 --> 01:06:55.800
want to do like open your like
create a special profile, or even use

789
01:06:55.800 --> 01:07:05.840
the incognito or whatever that would be
potentially better simulation. Yes, that's true.

790
01:07:06.199 --> 01:07:13.000
It's for use is often about economics
because like we're when to get DP

791
01:07:13.079 --> 01:07:24.079
two percent there find enough. Similarly, also going into with the with demolation

792
01:07:24.280 --> 01:07:31.039
of the different network conditions, that's
also very often being used, like the

793
01:07:31.079 --> 01:07:39.400
throttling feature for example, if you
see the throttling feature, yeah, okay,

794
01:07:39.639 --> 01:07:43.440
right, So in other words,
as I understand it, that's you

795
01:07:43.480 --> 01:07:45.400
know, if you're working on a
you know, a hundred gig BET connection

796
01:07:45.559 --> 01:07:49.000
on a very fast computer. You're
gonna think, hey, everything is great.

797
01:07:49.039 --> 01:07:54.360
But then if someone gets out there, you know, in a remote

798
01:07:54.880 --> 01:07:58.440
location where they have three G or
you know, something really slow, you're

799
01:07:58.440 --> 01:08:00.239
not going to be able to see
what those effects are. And so what

800
01:08:00.280 --> 01:08:05.519
this allows you to do is stallow
down your connection so that you can emulate

801
01:08:06.000 --> 01:08:11.400
as best possible a much slower connection
to see how your code loads and performs.

802
01:08:11.960 --> 01:08:15.239
Right, but keep in mind that's
only emulation, and as then already

803
01:08:15.280 --> 01:08:18.720
said, it's the same we disabled
cash. That's only emulating. It's not

804
01:08:18.840 --> 01:08:26.039
one of percent how it actually would
be. But it's close enough for at

805
01:08:26.119 --> 01:08:31.000
least to debut such cases and to
understand what's actually happening and how see how

806
01:08:31.079 --> 01:08:35.720
slow your webpage, for example,
woodload on a free cheat connection. All

807
01:08:35.760 --> 01:08:39.680
right, it's the best. Well, any emulation is never going to be

808
01:08:39.720 --> 01:08:42.920
perfect, so I think that goes
without saying, but it can certainly get

809
01:08:42.960 --> 01:08:46.960
you a lot closer. One configuration
that I often like to change when I'm

810
01:08:47.039 --> 01:08:57.000
using the network tab is I actually
prefer color coded resources. So the bars

811
01:08:58.600 --> 01:09:04.000
in the in the waterfall part of
the network actually, like you know,

812
01:09:04.079 --> 01:09:11.079
they show you they're like the green
for the time to first BITE and then

813
01:09:11.119 --> 01:09:15.199
the blue for the actual BITE downloads. But instead you can go to the

814
01:09:15.439 --> 01:09:23.920
general settings and in the network section
you can change to color coded UH,

815
01:09:24.640 --> 01:09:30.760
to color code the resources UH.
And if you do that, then instead

816
01:09:30.800 --> 01:09:35.239
of all the resources being shown in
in like you know, green and blue,

817
01:09:35.720 --> 01:09:41.239
you'll actually see the JavaScript in yellow, and the fonts in red,

818
01:09:41.359 --> 01:09:46.680
and CSS in purple, and HGML
in in like blue. And it's much

819
01:09:46.720 --> 01:09:57.359
easier to identify various different resources this
way. So that's sort of the only

820
01:09:57.479 --> 01:10:02.479
downside of that. And and I've
complete I've complained to you guys Michael about

821
01:10:02.479 --> 01:10:08.000
it, is that when you do
that, you don't actually see the DNS

822
01:10:08.159 --> 01:10:15.079
times and the and the DCP handshake
times, so you kind of either you

823
01:10:15.680 --> 01:10:18.680
either see this or you see that
you can't see them together, which is

824
01:10:18.800 --> 01:10:23.640
kind of unfortunate. In an ideal
world, I would like to you have

825
01:10:23.720 --> 01:10:28.359
it color coded and still be able
to see the DCP time in the DNS

826
01:10:28.479 --> 01:10:33.359
time. Right. Have you created
an issue for that? I think I

827
01:10:33.439 --> 01:10:42.119
did, Okay, like a long
time ago. Okay, I need to

828
01:10:42.199 --> 01:10:45.039
check. That's interesting. One another
thing that might also be useful, in

829
01:10:45.079 --> 01:10:56.119
particular for Foma's debugging is also if
you capture screenshots. Similar to the performance

830
01:10:56.199 --> 01:11:01.560
the performance panel typically works with it's
capturing screenshots and show you how the page

831
01:11:01.600 --> 01:11:05.520
actually looks at a certain certain point
in time. You can also do the

832
01:11:05.520 --> 01:11:10.760
same thing for the network on a
network count that it capture speen shots,

833
01:11:11.239 --> 01:11:16.560
which helps if you want to understand
holiday pitches actually be surely looting. So

834
01:11:16.640 --> 01:11:20.199
if I go to the performance tab, I see the screenshots checkbox. You

835
01:11:20.239 --> 01:11:26.880
said it's on the network tab as
well. Yeah, it's back on the

836
01:11:26.920 --> 01:11:31.600
top right has the ski I can
You can click on that and then you

837
01:11:31.640 --> 01:11:42.000
will get some additional settings. Okay, more tools? Oh yes, recorder

838
01:11:42.119 --> 01:11:45.039
rendering. Okay, yes, I
see those three little dots there, and

839
01:11:45.039 --> 01:11:48.000
there are more tools. It's quite
a long list of more tools. We

840
01:11:48.039 --> 01:11:51.079
could probably spend a few hours going
over all these tools, that's for sure,

841
01:11:53.439 --> 01:11:56.680
but we don't have a few hours, so we're going to wrap it

842
01:11:56.760 --> 01:12:00.159
up for here and move on to
picks. Thank you forcoming. This is

843
01:12:00.279 --> 01:12:06.600
one of my favorite topics to discuss, and the more you understand the debugging

844
01:12:06.640 --> 01:12:12.640
tools you have, the better you
can do it writ in your code or

845
01:12:12.920 --> 01:12:17.039
in Dan's favorite subject, you can
make it more performant. We didn't even

846
01:12:17.079 --> 01:12:21.239
get to the various performance tabs,
like there are like three or four different

847
01:12:21.279 --> 01:12:26.000
types just for performance. We didn't
even talk about them. Right, we

848
01:12:26.079 --> 01:12:29.439
might have have to have Michael back
to cover more of this stuff, for

849
01:12:29.479 --> 01:12:32.880
sure, we do have. We'll
put this in the show notes. The

850
01:12:33.000 --> 01:12:40.239
link to the list of YouTube videos
on what's new and dev tools. I

851
01:12:40.239 --> 01:12:44.159
have found something to take up a
large part of my afternoon for a while

852
01:12:44.159 --> 01:12:46.039
to catch up on these videos.
For sure? Who is that that's doing

853
01:12:46.079 --> 01:12:50.359
it? Looks like the same person, yes, Essa, a DEFL person

854
01:12:50.560 --> 01:12:58.680
that's mainly doing them. I think
you're seaming up then with Cliza for but

855
01:12:58.760 --> 01:13:02.960
it's mainly chessling. Okay. Have
you ever wished that you had a group

856
01:13:02.960 --> 01:13:06.319
of people that were just as passionate
about writing code as you are? I

857
01:13:06.399 --> 01:13:09.880
know I did. I did that
for most of my career. I'd go

858
01:13:09.920 --> 01:13:12.840
to the meetups, I try and
create other opportunities, and it was just

859
01:13:12.960 --> 01:13:15.840
really hard. Right the meetups.
I got some of that, but they

860
01:13:15.880 --> 01:13:18.199
were only like once or twice a
month, and it was just really hard

861
01:13:18.199 --> 01:13:23.439
to find that group of people that
I connected with and really wanted to talk

862
01:13:23.439 --> 01:13:26.760
about code a lot, right,
I mean, I love writing code.

863
01:13:26.800 --> 01:13:31.039
I think it's the best. And
so I've decided to create this community and

864
01:13:31.079 --> 01:13:34.760
create a worldwide community that we can
all jump in and do it. So

865
01:13:34.800 --> 01:13:39.680
we're going to have two workshops every
week. One of those or two of

866
01:13:39.680 --> 01:13:42.279
those every month, are going to
be Q and A calls right where you

867
01:13:42.279 --> 01:13:45.079
can get on you can ask me
or me and another expert questions. The

868
01:13:45.079 --> 01:13:49.600
rest of them are going to be
focused on different aspects of career or programming

869
01:13:49.760 --> 01:13:54.319
or things like that. Right,
So it'll go anywhere from like deployments and

870
01:13:54.359 --> 01:13:58.600
containers all the way up to managing
your four oh one K and negotiating your

871
01:13:59.000 --> 01:14:01.439
benefits package. Well, we'll cover
all of it, okay. And then

872
01:14:01.439 --> 01:14:05.760
we're also going to have meetups every
month for your particular technology area. So

873
01:14:05.800 --> 01:14:10.680
we have shows about JavaScript, react, angular view and so on. We're

874
01:14:10.720 --> 01:14:13.239
going to have meetups for all of
those things. I'm going to revive the

875
01:14:13.279 --> 01:14:15.359
freelancer show. We'll have one about
that, right, so you can get

876
01:14:15.359 --> 01:14:19.760
started freelancing or continue freelancing if that's
where you're at. And I'm working on

877
01:14:19.840 --> 01:14:27.239
finding authors who can actually do weekly
video tutorials on some thing for ten minutes.

878
01:14:27.520 --> 01:14:30.000
That's related again to those technology areas
so that you can stay current,

879
01:14:30.079 --> 01:14:33.920
keep growing. So if you're interested, go to topendevs dot com slash sign

880
01:14:34.000 --> 01:14:40.279
up and you can get in right
now for thirty nine dollars. When we're

881
01:14:40.399 --> 01:14:44.039
done, that price is going to
go up to seventy five dollars, and

882
01:14:44.119 --> 01:14:48.760
the thirty nine dollars price gets you
access to two calls per week. The

883
01:14:49.439 --> 01:14:53.920
full price at one hundred and fifty
dollars, which is going to be seventy

884
01:14:53.920 --> 01:14:57.800
five dollars over the next few weeks. That price is going to get you

885
01:14:57.840 --> 01:15:00.319
access to all of the calls and
all of the tutorials and everything else that

886
01:15:00.359 --> 01:15:05.359
we put out from top endevs,
along with member pricing for our remote conferences

887
01:15:05.399 --> 01:15:10.319
that are coming up next year.
So go check it out topendevs dot com

888
01:15:10.359 --> 01:15:14.960
slash sign up. All righty,
So that we'll move on to Picks,

889
01:15:15.319 --> 01:15:18.000
the part of the show where we
get to talk about something other than code,

890
01:15:18.119 --> 01:15:21.479
or we can talk about code if
we want. All depends Dan,

891
01:15:21.520 --> 01:15:26.159
What do you got for us?
Well, not not a lot this time,

892
01:15:26.319 --> 01:15:30.039
so I'll refrain from talking about the
various wars that are going on in

893
01:15:30.199 --> 01:15:35.079
Ukraine and Israel, because it's just
too unfortunate and sad and I don't feel

894
01:15:35.119 --> 01:15:43.159
like it. So instead I'll mention
a nice TV show that I'm kind of

895
01:15:43.279 --> 01:15:48.760
enjoying, which is called Killing Eve. It's on Netflix. Sounds very fuzzy.

896
01:15:49.880 --> 01:15:57.479
Yeah, it's about this. It's
like a woman led TV show.

897
01:15:57.640 --> 01:16:01.119
So the two, like I would, the main figures there. One is

898
01:16:01.960 --> 01:16:12.359
this kind of wackle hit person for
some clandestine organization it's unclear for whom,

899
01:16:12.880 --> 01:16:16.720
and she's like she's basically a psychopath, but they're taking advantage of that and

900
01:16:16.840 --> 01:16:21.560
using her as a as a hit
person. And then there's them I six

901
01:16:21.680 --> 01:16:27.319
agent who's trying to hunt her,
which is the other lead figure, female

902
01:16:27.319 --> 01:16:31.560
figure in the show. Uh and
uh, it's it's really interesting and I'm

903
01:16:31.600 --> 01:16:35.439
and I'm you know, it's not
an amazing TV show, but it's a

904
01:16:35.560 --> 01:16:42.319
really enjoyable one and I'm liking it
awesome. So those would be my pick

905
01:16:42.399 --> 01:16:46.000
for today, and unfortunately I actually
have to drop off. So Michael,

906
01:16:46.079 --> 01:16:50.600
I really enjoyed our conversation today and
and hopefully we can have you on the

907
01:16:50.640 --> 01:16:56.399
show again to talk about more Chrome
Deftools features, because I think we talked

908
01:16:56.399 --> 01:17:00.560
about less than half the panels,
so there are I think it was.

909
01:17:01.319 --> 01:17:04.880
Yeah, we didn't even again and
we didn't even get to the drawer at

910
01:17:04.880 --> 01:17:09.520
the bottom and all the options that
are there. So you know, there's

911
01:17:09.560 --> 01:17:13.439
a lot more to talk about.
So guys, thank you for having me

912
01:17:13.520 --> 01:17:15.920
and Michael, thank you for coming
on, and I'll see you next time.

913
01:17:17.640 --> 01:17:21.640
Thank you. All right, So
my turn before I get to the

914
01:17:21.840 --> 01:17:27.239
high point of every episode, which
are the dad jokes, I do have

915
01:17:27.319 --> 01:17:31.239
one pick one of the ways I
do my working out exercises with CrossFit,

916
01:17:31.319 --> 01:17:33.800
And no, I'm not one of
those CrossFit people that always has to blob

917
01:17:33.840 --> 01:17:41.239
about me doing CrossFit, but uh, there's just one piece of equipment that

918
01:17:41.279 --> 01:17:45.239
I have started using recently that has
been a lifesaver rather handsaver. So part

919
01:17:45.239 --> 01:17:49.319
of CrossFit is doing a lot on
a bar. So there's like pull ups,

920
01:17:49.920 --> 01:17:53.319
bar muscle ups, toes to bar, that kind of stuff. It

921
01:17:53.359 --> 01:17:57.640
can bars can really, really,
really really tear up your hands. I've

922
01:17:57.640 --> 01:18:01.000
had that happen a few times.
And so there's a company called Victory Grips.

923
01:18:02.039 --> 01:18:06.279
They make these grips that are various
kinds. The ones I use are

924
01:18:06.319 --> 01:18:12.039
these leather ones, and what they
do is they strap around your wrist and

925
01:18:12.079 --> 01:18:15.439
then it only has material right there
in the palm of your hand. It's

926
01:18:15.439 --> 01:18:19.199
not like a glove or something that
goes over your hand. And so then

927
01:18:19.319 --> 01:18:21.800
what you can do is you can
just use them while you're holding onto the

928
01:18:21.840 --> 01:18:26.159
bar and doing whatever you're doing,
and then you can spin them around so

929
01:18:26.199 --> 01:18:28.880
they get out of the way for
you know, whatever else you're doing that

930
01:18:29.000 --> 01:18:30.279
you don't want them in the way, and you put them back in place.

931
01:18:30.359 --> 01:18:33.319
But they give you a really good
grip. A lot of bars tend

932
01:18:33.319 --> 01:18:36.520
to be really slick, and it's
really hard to do those kinds of workouts

933
01:18:36.560 --> 01:18:40.239
when you're trying to do a pull
up by your hands slipping, so you're

934
01:18:40.239 --> 01:18:43.159
trying to get a grip half the
time and wasting half your energy. So

935
01:18:43.920 --> 01:18:47.760
but they're at Victory grips dot com
and they got some really great things.

936
01:18:47.840 --> 01:18:50.760
Even with them on, I've sort
of torn up my hands a little time,

937
01:18:50.800 --> 01:18:56.760
but far less than if I didn't
use the grips at all. And

938
01:18:56.800 --> 01:19:02.239
then finally the dad jokes of the
week. So I went out to dinner

939
01:19:02.279 --> 01:19:06.640
recently and the server said to me, you know, there was refill your

940
01:19:06.640 --> 01:19:09.960
glass with water, and they said, I see your glasses empty, store,

941
01:19:09.960 --> 01:19:13.359
would you like another one? And
I said, why would I want

942
01:19:13.359 --> 01:19:21.359
to empty glasses? Right as compared
to a full one question? So why

943
01:19:21.399 --> 01:19:27.560
did the vulture get kicked off of
the airplane? People kept complaining about his

944
01:19:27.800 --> 01:19:33.800
carry on luggage c ar r io
n for those who don't get it.

945
01:19:34.439 --> 01:19:38.600
And then finally this one. I
saw this. As soon as I saw

946
01:19:38.600 --> 01:19:42.399
this topic, I got this one
is just perfect. So I went to

947
01:19:42.439 --> 01:19:45.720
my boss and I said, what
web browser do you use? He said,

948
01:19:45.760 --> 01:19:48.239
I use Chrome. I said,
why does everybody on the team say

949
01:19:48.239 --> 01:19:58.680
you're always on edge? Oh my
god, very good, Very good.

950
01:19:58.760 --> 01:20:02.119
I figured that was appropriate for today. All right, So that's all I

951
01:20:02.199 --> 01:20:06.520
have, Michael, do you have
any picks for us? Okay? So

952
01:20:08.000 --> 01:20:12.840
I like playing board games and I
think I have one favorite game, which

953
01:20:12.880 --> 01:20:20.359
is called Spirit Island. So imagine, instead of you colonizing an island and

954
01:20:20.399 --> 01:20:26.159
then building a nice city there,
imagine you are actually playing the island and

955
01:20:26.279 --> 01:20:30.000
you are not very eager of being
colonized, So you're playing spirits on that

956
01:20:30.159 --> 01:20:36.600
island that tries to defy the invaders, which is a great cooperative super complex

957
01:20:36.920 --> 01:20:43.359
bod King. Uh, my wife
and I really enjoy playing together. So

958
01:20:43.439 --> 01:20:45.600
you're playing so the other players,
you're playing as a team as compared to

959
01:20:45.640 --> 01:20:53.199
playing against yourself against each other.
Correct, right, So you try to

960
01:20:53.399 --> 01:20:57.479
define invaders and they're all us so
and they have different spirits with different powers

961
01:20:57.479 --> 01:21:01.039
and so on, with different complexity. And it almost wanted to like it

962
01:21:01.079 --> 01:21:04.520
would be cool if you would play
something like Gozillo or something like that,

963
01:21:06.039 --> 01:21:15.680
like wandering over the over the island
and then simply trembling everything. And like

964
01:21:15.720 --> 01:21:20.640
a few months ago, actually you
released an expansion and yeah, essentially Gozilla

965
01:21:20.640 --> 01:21:25.159
and yeah it is a turtle,
but it's like Cosilla. It really feels

966
01:21:25.159 --> 01:21:31.760
that way, like you are trembling
over religious and destroy them because that's what

967
01:21:31.800 --> 01:21:38.880
Goodsay is doing. Yeah, I
was like, you really really liked that

968
01:21:40.199 --> 01:21:42.760
Spirit Island. That's something. Yeah, I've seen some other games. There's

969
01:21:42.760 --> 01:21:45.399
another game I played and I forget
what it's called, where it's like the

970
01:21:45.479 --> 01:21:48.960
island is sinking and you're trying to
get off of it. It's another team

971
01:21:49.039 --> 01:21:51.239
game. I have a neighbor who
plays a lot of these types of games,

972
01:21:51.239 --> 01:21:56.119
so I have to ask them about
this one. But yeah, Board

973
01:21:56.159 --> 01:21:59.239
Game Week. I'm not sure what
the rating is, but there's a page

974
01:21:59.239 --> 01:22:02.239
there for sure. Excellent. All
right, Michael, Well, thank you

975
01:22:02.279 --> 01:22:08.119
for coming on. It sounds like
we do need to have you back to

976
01:22:08.279 --> 01:22:12.079
talk about more of the dev tools, considering, at least for myself,

977
01:22:12.079 --> 01:22:15.439
they're sort of an integral part of
web development, I think, so love

978
01:22:15.479 --> 01:22:20.039
to all right, thank you,
and we will talk to everybody next time

979
01:22:20.039 --> 01:22:23.000
on JavaScript Jabber Audios.