Hello everybody, Welcome back to another thrilling, exciting episode of javascripts Jabber.
I am Steve Edwards, the host with the face for radio and the voice
for being a mine. But i'm your host today because Dan didn't want to
do it. Speaking of Dan, he is here with my panel, on
my panel with me. How you doing, Dan, I'm doing really well
on the personal levels. Good good. Dan is coming from Tel Aviv.
I am here in the Portland area where Mount Hood is getting dumped on with
snow, which is great for us fears hey, although the winds are like
forty miles an hour or two, so it makes this sort of hard to
go down instead of a cross. But anyway, Hey folks, this is
Charles Maxwell. I've been talking to a bunch of people that want to update
their resume and find a better job, and I figure, well, why
not just share my resume. So you if you go to topendevs dot com
slash resume, answer your name and email, then you'll get a copy of
the resume that I use that I've used through freelancing through most of my career,
as I've kind of refined it and tweaked it to get me the jobs
that I want. Like I said, top endevs dot com slash resume will
get you that and you can just kind of use the formatting. It comes
in word and pages formats and you can just fill it in from there.
Our guest today is mister Michael Hoblich. I think I sort of said it
right. I think that had more of the Hebrew accent than German. But
how you doing, Michael, Hi, I'm doing well, Thank you very
much. And you're coming to us from Austria, correct, Yeah, that's
right. I am based in Austria and Derek work is the product manager for
Chrome deftols and Puppeteer essentially think a lot about testing and debugging applications. Alrighty,
so you work for Google A yeah, I've worked on the Chrome team
at Google. Excellent. Talk about getting stuff right from the horse's mouth.
Doesn't get any better than that. All right, So, as you mentioned,
we're here to talk about one of my favorite topics, which is debugging
in the Chrome dev tools for you know, for someone like me who came
up starting with PHP, where I had xd bug on the server and I
could debug the crap out of anything with my break points and profilers and stuff.
It was when I started writing first Angular JS and then view on the
front end, the dev tools and debugging became one of my better friends.
So I'm all about debugging and how to troubleshoot and debug things on the front
end. So where do you want to start, Michael, that's a good
question. So we can start a PHP because I also started a program with
peachp like you. So I'm the only one here who's never really programmed in
PHP. Oh interesting, Wow, I'm a impressed. How did you dodge
that pullet? Bullet? Great tech, super useful, I got it or
helps and oh my god, I would never ever want to use the applications
that wrote twenty years ago. And by the way, just so you know,
I think that PHP kind of got it starting in uh in a well,
it didn't get it started in Israel, but it got a significant push
in Israel. Like the one of the first versions of PHP was actually implemented
by two israelis Rasmus one of them. Or it's Zen, the guys.
They're the guys that created zend technologies. All right, okay, yeah,
that's still you see that as an option in like phb storm is using the
Zen Debugger as compared to that's the other option other than xd bug. Anybody
remember real quick what PHP initially stood for Personal Home Picture. That's right.
It was just you know, it was like drupel. It was like heck
anything else. If someone started out, hey, I want to do this
for myself. Oh look this is cool, everybody else likes it. Let's
watch it go. I did manage to dodge PHP, but I didn't manage
to dodge ASP and JSB. So yeah, so you know, I didn't
dodge that bullet completely. I did want to say though, that I'm the
one who invited Michael on and really wanted to talk with him because I think
for me, first of all, for two big reasons. One is that
a lot of goodness is recently coming out of Chrome into the Chrome Debt,
out of Google, into the Chrome Deaf tools. I feel like features coming
fast and furious, and I'm really happy with all the advancements that are being
made there. But it really goes for me beyond that, because for me,
the debuggers that are built into the browser are like the big reason that
web development has been able to advance so much. Like we take these tools
for granted because they're built in because they're ubiquitous, but like, you can't
imagine how the world would have been without them, And I sort of can
because I was there at the time and debugging with alerts and stuff like that,
and you know, it's you really, I really can't imagine modern web
development without the various debuggers and development tools that are built into modern browsers.
And personally, I like using dev tools the best, So that's the one
that I mostly use when I have a choice. That's very nice of you
to say, so, Michael, Let's start with history. I guess of
the dev tools, and I know from back early two thousands, I can
remember the first thing I ever remember seeing that was like this was Firebug in
a Firefox browser, and I think that predates the Chrome dev tools. I
could be wrong, Is that correct? Yeah, that's correct, so fire
I don't know if five buck was the first. I guess Netscape and so
on also had the debugger. I can't think the Internet. I think Internet
Explorer had a debugger before Firepark. That's the first that I recall. I'm
not sure, to be honest, you know, I mean, at that
point it was a blurry line. Also, you saying wish you basic and
so on to debarking republications because he had all those nice actipix content. M
hm, so, but yeah, five buck for sure was first. And
as far as I can recall, when Chrome actually was released, there was
already deaf toos included. Okay, that sounds right. And one of the
really cool things about Chrome dep Tools that again I don't know if a lot
of our listeners realize, is that it's actually implemented in JavaScript and htmail and
other web technologies. That's correct, which is also essentially when you when people
start talking about debuggles or about Chrome Depth tools or Firebug and so on and
so on, they need to realize it's actually going to be two main components.
One of them is going to be the introspection capabilities for the runtime,
which is like exposing what's currently happening in random, so all the information the
back end essentially, But on the other side, you're also going to have
the front end because we need to surface the deformation somehow they use it give
the user a way to control breakpoints and so on, and that particular front
end, for example, in in Chrome deft tols is when Chrome in Depth
tools is written in Now this isn't typescript. I think we migrated two typescript
two years ago something like that for three years from script to sub subscripts.
That must have been a really big rewrite. Yes it was. I mean
it changed a lot of a lot of files and a lot of lines of
codes. Of course, so we did actually tried doing it in small chunks,
but then it was like also not great. So we actually we had
hackertons where we changed bigger chunks of the quotes and so on. But yeah,
that took a lot of time. But typect is simply more more organomic
to develop a republication like that. How many people, by the way,
if you can say, work on the Chrome dev tools inside Google, let's
say it's roughly twenty ish something like that. Yeah, so including software engineers,
UX designers, uxrpeople, PMS program managers, managers and so on,
it's roughly twenty And you, like I mentioned before, you release features really
fast and furious. I mean that literally every time a new version of Chrome
comes out, which is what like every month or two every month months,
I see like you guys coming out with the video about the new features and
capabilities that you're adding into it. So how are you able to add so
much capabilities into into the dev tools as such a rapid pace? Right,
so quick shot out regarding videos, I forgot deferal people that are also working
on the team that are creating those content. And yes, I really like
the videos. They are so great. And also that's what our use actually
are also telling us, like the video is a great super use for them
to actually get to know about the features. What videos are these? Were
they? What's new in the tools? I think the cadence now is every
two mature, every two months we're releasing a new one and stuff like that.
I need to check, or maybe it's for each major version nowadays.
By the way, and the Chrome Dev Tools itself, when you open it
in the drawer, it will actually tell you what what's new and have a
link to that video so you can actually get at the video from inside the
Chrome devtos. Yeah that's great. And this also has like release no small
ass like this feature showcase it's linking too. Yeah that's probably playlist it is.
I didn't. Oh, yeah, that's really useful. Like if you
have like eight minutes ortuff like that every month and look at that you will
see all the features. How we do that, yeah, I mean it's
a constant evolution, so the debugger always needs to adapt to how the did.
The debugging target is also changing. What I'm saying is the web platform
constantly changes, in particular Chrome constantly changes, so exposing new APIs or APIs
are going to be changed and so on. That requires a certain amount of
maintenance in our ends to also make sure that we're not breaking, which is
taking up quite a lot of capacity honestly, because there's a lot of a
lot of churn and we need to keep keep keep having holds on those issues.
And how we select that we what we're going to work on next.
That depends heavily on feedback we get from developers, but also initiatives that we
know that they're important to us, like for example, co work, vitals
and performance debugging. We know we have the case studies that this is important,
that this is really going to change the conversion rate, so we are
investing a lot in performance debugging to make that more that's called it more efficient,
so essentially that you're that you get more bang for the bug out of
your time invested as a developer or similarly network debugging, which this year we
want to take a deeper look into a network debugging network panel for example.
That because nearly every Depth tools user out there is using network panel one sort
or another for performance debugging or for network debugging by something that doesn't show up,
and so on and so one. The network panel is used quite often.
And for this year we actually said, okay, we are going to
take a deep a book and what we can improve there to there, which
is not easy because if you ask two people which of the changes is more
is better, you get two answers. So very often it's finding a good
middle ground or opening up don't find the middle ground, and providing capabilities to
make it configurable what is best for you. Although there's this maxim that I've
heard like a while back which says that every checkbox you've seen in an options
dialogue is two product managers fighting and couldn't decide who's who's the right who's got
the right opinion, So they said, let's just make it an option,
and then of course you start fighting over what should be the default. But
that said, you know, so you said that you get a lot a
lot of the decisions are actually driven by community feedback. How do you actually
get that feedback? If I have certain ideas for things that I would like
to see in Chrome def tools and say, hey, I think they can
make the network app so much better if they do X, Like, how
do I send this feedback over to you or suggestions or whatever? Okay,
so the most fait forward thing is open Chrome deft tools and there's this Hamburger
menu. The three Dogs menu does help on this report the Depts issue that
is going to open our issue track cand there you can submit the bug or
feature requests and that is regularly we have SLOs to actually go over this list
and actually trias. So it's not just issues, it's also suggestions and requests
and stuff like that. Yes, an issue is like either feature requests or
a buck trish process should hopefully categorize them correctly because it also depends. For
some users, feature request is actually the perceives of the buck, which is
fine. Yeah, it takes some conversations. And when are you going to
integrate AI? That's a good question. How would you see the debt tools
integrating a ideas? I was just joking, I mean everywhere, I'm just
I know I'm just trying to think that how would you use I guess I
could see some applications. I'm not sure. I mean, we obviously are
talking with weblovers about how you're using EI like JGPT or Gemini and so on
and so on for web development tasks, which is super interesting and it's but
it's very new. Their results are very nuanced, and uh, I need
a lot of understanding when the interpret the results. So what I'm saying with
that is it's not a magical silver bullet. And for example, you get
a result back from your random EI assistant and it still need to be able
to interpret what is coming back if this is actually correct or not, because
if you can't do that, you're going to be you could be in a
very bad spot. So the quality of responses is very it's actually very important.
Having said that, with all those new model updates that are coming in
the Germany Gemini Ultra or be it open GPT with Russiah four, all of
them are getting more powerful, of course because you can also proply more information
to it and so on. But yeah, I understand judging the quality of
the response is super important. That actually requires a certain level of experience from
the user to judge that. So, yeah, there's potential, but it's
it's nuanced. Yeah. So on a most serious note though, you know,
so, as I said, a lot of new features and capabilities being
headed in, can you like give us an quick overview of let's say,
like a couple of your recent favorite features that made it in that you're really
happy that made it into the product. Okay, so that's going yeah,
I know. Continue, No no, no, no, no, I'm
just thinking how to start explain that. I think a year ago or something
like that, it might be longer. We started tracking down bugs in our
how how we are treating breakpoints and if we are hitting breakpoints by debugging,
which means sometimes brak points were not hit, and sometimes they were hit and
then he reloaded, and then they were hit, but then you didn't reload
and it weren't it and sometimes new brakepoints appeared and stuff like that. Yeah,
I'm guessing basic Usually issues come up with like virtual like code, right
mhm. Yes, that's so we did go down that rabbit hole what's actually
happening there? And it turned off? Of course, it was a number
of issues, which is for example, a web applications might look the same
when you reload, but you might not actually be the same under the hoods
because code gets in check that or you might be running in a B test,
and so on and so on and so on. So if you set
breakpoints in version A of the application, and now that breakpoint should move to
somewhere else because the code when after reload this version B, and it's actually
a little bit of different codes, the debugging back end actually needs to migrate
that breakpoint. And that's that's not super straightforward. So basically you're saying that
in an ideal world, you'll be able to somehow magically identify that a particular
piece of code has moved down a few lines or moved up a few lines
and then moved the breakpoint along with it, instead of just hard coding into
a particular line number in a in A in a file. Right, And
there are herristics that help you there, of course, built into deft tools
and other debuggers. There's also technology like source maps that also again help you
doing that. Yes, and you're saying who source maps, And I'm saying,
yes, who maps. But it's the technology that we have, and
there is actually no standard for that yet, which is going to change hopefully,
which hopefully is going to then result in the more reliable usage of source
maps. M right where was I? Yes, source maps whatever? I
know? Going back to breakpoints and how they so migration of breakpoints when you
reload for example. Uh, then we found out, oh yeah, there
are a few issues in there, so we fixed those, and then we
found new issues, and then we started digging into well, what if you
set a breakpoint but that breakpoint is an ignored code section, so we actually
don't want to see that. Should it trigger? Should it not trigger?
We had I think two camps of what in the team like, no,
we should be doing that, No, we should be doing that? Okay,
can we answered that somehow with with a few wigs are like, oh
yeah, yeah, let's do that. So we have in from deftors.
We have a process called RBC Request for Commands, but we have a kid
top repository and we are asking that community essentially, hey, we have this
hard problem to solve. We know there's different solutions, please help us identify
what they actually prefer in such cases. So we did that. Yeah,
A long story short of that. That is a perfect example of like Wow,
the results were a little were split a little bit from preferences. So
okay, what this means essentially is we need to make it configurable because there's
no winner, right. So I found that particular endeavor quite interesting because like
very technical, and it was like, oh my god, it's so complicated
to think through all of that. But honestly, that's not something that a
lot of fear or that's something that a lot of people might be encountering but
might be able to fix with a reload. But still under the hoods something
else is happening. So hey, there, this is Charles max Wood.
I'm excited because I wanted to let you know about this thing that I pulled
together that I had just I've been dying to have this for years and I
never felt like I could, and then I just realized that there's no reason
why I can't. So I'm putting together a book club and we're going to
read development focused books, career books, you know, technical books, whatever.
The first book that we're going to do is going to be Clean Architecture
by Uncle Bob Martin. If you're not familiar with clean Code or some of
the other stuff that Bob has done, check that out. I've also talked
to him on the Clean Coders podcast, which is on Top End Devs.
But yeah, we're going to get on. He's going to show up to
some of our meetings. And what I'm thinking is we'll probably have like five
or six people part of the conversation along with Bob and I at the same
time, and we'll just so somebody can come on, they can ask their
question, and then we'll just rotate people through, so we'll mute one person,
unmute another person when it's their turn to come on and be part of
the discussion. So we'll do that for like an hour hour and a half.
And then the other part of it that I'm putting together is just kind
of a meet and greet gather area on Gathertown, And so after the meetup
and the call, we we'll do as we'll all go over to gather Town
and you can just log in, walk up to a group and have a
conversation, and that way we can all kind of get to know each other
and make friends and get to know people across the world. One thing that
I'm finding is that, yeah, the meetups are starting to come back,
but a lot of people don't have the opportunity to go to a meetup and
I really want to meet you guys and talk to you. So we're gonna
put all that together. It'll all be part of that book club. You
can go to topendevs dot com slash book Club to be part of it,
and I'm looking forward to seeing you there. The first book club meeting will
be in December, the beginning of December. We're starting the first week of
December, and you'll also be part of the conversation about which book we do
next. I have one in mind, but I want to see where everybody's
at. So there you go. So I've been playing around and I've noticed
recently, and I don't know how recently these have been added in, but
we were talking about the YouTube channel of all the what's new in dev tools
videos and you were talking about issues, and so if you bring up the
dev tools over to the right, you'll notice, you know, if you
have any console errors, it will give you a little red X that shows
you know you've got one error a bazillion, which is my case sometimes,
and then you'll get another little icon with a triangle with an exclamation mark and
looks like a quote balloon with an exclamation mark, and if you click on
those brings up another little window, and this is really cool. One is
labeled What's New, and it has the latest video right there in the depth
tools. And this as we're recording right now, the YouTube channel shows up
through number one twenty and in the dept tools itself that has a video on
number one twenty one and it lists a whole bunch of different issues like source
map improvements, enhanced performance and so on. So right within the debt tool
itself you can see what's the latest, and then there's an issues tab and
it looks like there's what current issues right now? For instance, there's one
about a deprecated feature use reading a cookie and cross site context will be blocked
in future Chrome versions. Setting cookie and cross site content will be blocked in
future Chrome versions. So really cool way I guess to get instead of having
to go hunt around, right there in the tools, you can get to
the latest and see what ongoing issues are being addressed. Is that a fair
statement? Yes? So if you're talking about the issues pedal, then yes.
The idea the division for that one is actually to be something like launch
bed where you look at the issues pedal and then you can go through the
list and fix the issues on the page. Because so that was introduced like
a few years back, because we've seen a lot of cons hold spam.
Everybody was spamming the warnings and errors to the console. So that's the rep
interface that you have in that the heaving theft tools also everybody's using and it
was simply spam with a lot of warnings and rows. So we moved certain
a certain amount of those eras into something called an issue panel where you actually
can instead of throwing errors, you can put spector information in there, as
with the information Okay, you're facing this issue, that's what they should be
doing, like also with the suggestion or a link to a web the depth
articles on. I really like this approach of trying to clean up like the
like you said, it's kind of the console had to a certain extent,
has become this kind of a grab bag of like everything, and a lot
of organizations basically even started kind of ignoring it because there was just so much
stuff there. By the way, I'm old enough to remember that is when
companies would actually like post jobs in there, so you would like going to
a website, open the deaf tools and says if you can read that,
then we would like for you to apply for a job at our company.
I think that's kind of I don't see that happening very much anymore, but
that was an interesting time. I sometimes see still see that. What I
see more often is messages to end users, not developers, with the content
of you shouldn't be here if anybody told you to open up tools. You're
looking at this thing closely right now. Yeah, I'm guessing yeah, for
security reasons. They're worried about the phishing attacks or stuff like that. Yeah.
Correct, that's why we also half a year ago off like that,
we had a little bit of a of a ball or speed bump there were
with you are pasting in some code into the console. The first time,
it's going to reply to you, Hey, you're not allowed to do that
because for security reasons, essentially please type in I need to check I'm a
developer of stuff like that, and then actually that feature wasn't able that you
can paste code into the console. Interesting, you mentioned the war. You
mentioned source maps before, and indeed one of my biggest gripes like forever with
effectively like every dev tools ever that I've ever used is how kind of problematic
or how limited source maps are. Like they're better than nothing, for sure,
but then not always by much. So you know, the lines never
actually match up exactly, and when you're in the console, the names of
the variables don't match and and stuff like that. So it's it's a real
pain sometimes to debugg code when when it's like you know, minified and whatnot,
and even if you ship the source maps for it. And the reality
is that I often do debug in production. So is there anything you can
say about that? Uh, yes, I can say a lot about that.
Let me structural ef thoughts a little bit about that summarizing. Yeah,
that's what we also see, like when you're debugging something, either you're going
to have sorce maps, you're not going to have source maps. And let's
go down with the route of you don't have source maps, the features like
pretty print or local over rides are going to be very very useful for you,
and it would be really useful to actually somehow and you can also attach
them source maps afterwards to it and so on. But if you're using source
maps, you actually have them available. Getting that working correctly is really hard,
and it really depends if your technology is deck can set it up correctly
as default. It turns out that creating good source maps actually takes a lot
of time when you're building. So that's why sometimes there are options like speedy
or of creating fast creating source maps that are not one hundred percent correct.
And that's also again I talked about interesting breakpoint bucks that then result in very
interesting breakpoints or debugging bucks when you're when you're resolving a variable for example,
we also re encounter when we do using views we called a lot of uses.
Uh, also running into those problems. Uh okay, but what what
are we actually doing in order to improve the situation. One hand, we
are working with TC for nine to stanardize source maps because you're not standardized.
Yeah, that's one of the That's one of the things that I kind of
wanted to mention is that people don't realize that it's source maps are something that
kind of like kind of like happened rather than being properly designed in you know,
with like this really nice process and as I recalled, some guy just
created them and we're more or less stuck with whatever he created, or something
like that let's it's the story is probably a little bit more complicated than that,
but yeah, it's not standardized, and that's a problem of course.
So standardization should, hopefully when it's actually stanardized, result in a more reliable
usage of of source maps, and also for stakeholders, enable them to actually
change the standard and add new features to it, because right now it's super
hard for an entity, that for any entity to actually make changes to our
additions to the source maps back except with the ex Google extensions and stuff like
that. You have a standard, there's actually a way to do that and
orchestrated absolute So the bottom line, is there going to be like a solution
for let's say using proper the correct variable names or the original variable names in
the console for example. Yes, there could be a solution, and I
think I need to check. So you're going to tell me that the solution
is already there. So I'm eighty percent I think we did something into that
direction, or I know we did something in the re direction. I don't
know how much of that already has shipped. Mm hmm. Yeah, we'll
need to check. But yeah, also because again I think you also did
some usage testing, was like oh, but I wouldn't would expect the opposite
as it works. The problem then is that it's really difficult to if you're
working with the source maps, then you see the original code, but the
variable in the console is the like minified variable. It's actually really difficult to
find out what the benified variable name that matches what you see in the code
is. So you're kind of like screwed both ways. It would have been
easier to see the original code or because then at least you would have seen
the correct variable names as it were, but you're like kind of stuck in
the middle. Right. It's a good segue into something we shipped last year,
oh yeah, or one and a half years ago, which is called
the offered and deployed mode. So in the source panel, if you can
actually switch between the offered code, which is which is all with the source
map code, and the deployed code, which is not which is completely ignoring
source maps at all, it's showing you the thing that how it's actually importanless
How do you do that? There should be a button up there. If
there's no button, then you need to enable it in the preferences under experiments
exactly. Oh yeah, unther experiments in the settings group sources into offered and
deployed trees, and with that you can actually switch between the two of them.
Four exactly the reason you just out outlined, like, hey, actually
you're debugging two worlds and you would want to switch, and that's a concept
we in the future. Sometimes in the future you want to explore a little
bit more like can you switch between those store modes and what are the implications
like variable resolution? Alternatively, maybe show a tool tip like if you're hovering
on top of the of the variable in the minute, like you know in
the source map, at least show the name of the minified variable or something
like that. That might be useful as well. Okay, along the lines
of practicality, I'm all about practicality. What I'd like to do is,
you know, there's I'm counting what eight or nine different tabs. The first
four are probably speaking for me. The first four are the ones that I
use the most, the elements, the console, the sources, and the
network tabs. So what I'd like to do is sort of walk through those
different tabs, different pages within the DEAV tools and just sort of go over
what how you normally use them, and maybe if you can think of any
lesser known feature that you could think would be really useful. So, for
instance, if we start with the elements, yeah right, the element elements
basically shows your HTML markup and then if you click on for instance, if
you click on an element over on the side, you can see the CSS
that's applied and the layout have what are the computed styles? You know,
how things are put together and so on. Okay, so let me also
go with a with a bonus finger to what I'm quite quite often using is
our command so which means what they have to do code. For example,
if you do shift, I think it's the option key on on on Mac
and P you can actually shift command okay, fift command. Yeah, sorry,
I have a combined keyboard. Here's a little it's hard to identify which
of those machis it is, and that actually enables you to to run all
the commands and death tools. That's what I'm using quite often if I want
to look for something. Uh, And that is the segue into when I'm
talking about elements. What one feature that I find very useful and is emulate
focus page. So essentially, if you are using deft tools, the page
is actually losing the focus because they have to set the focus. But with
that thing, you can and cannot let the page lose the focus, which
is relevant for example, if you're debugging subsiding problems with over menus or something
like that, it will disappear when the focus posy like drop down menus or
something like that. Yeah, right, but I think that one is actually
in the rendering draw or not like that, whatever, But I find it
very useful. And the other one in elements, that iyem wall is used
regularly and then don't keep back very often in elements, I'm not that much
into stidin is break on making drawn break points. For example, if I
want to know, oh, I wonder when that particular element is going to
change, it's going to be created, I can set a breakpoint there,
and then if a new are a sub item for example, is going to
be added and filled into that particular element, the execution brakes and I know
exactly what's happening there. Then Yeah. Unfortunately, that's a lot less useful
than it used to be with modern frameworks. I mean, you know,
so it breaks in the middle of the React code somewhere, you know,
what do you do now, but it was much more useful in the jae
Query days. Let's put it this way, right, which is also a
nice segu with another topic. So previously mentioned a little bit about ignoaledsts and
stuff. So ignore you can use icknowledged to ignore files and stacks in your
stack trace. What this means, for example, typically the inner workings of
the React frameworking. Typically you're not going to be interested in that. You're
probably going to be more interested in the code that they actually wrote that they
actually have influence and control of. So with ignowledged, you can let those
things be ignored in stack traces and then everything else. So that's super useful.
And now where did you how do you say that? Uh? That's
also in the settings. Yeah, I think in the So I think that
in the sources channel when you see a stack you can actually right click,
I think on an end in the second say I can ignore this. You
can also do that, And they can also add foldos and files or use
the settings dialogue in the DEFTO settings, or a framework might already pre populating
the list because that lists, I think we addit this experimental source maps extension
or something like that. I need to check how it's actually implemented. And
if the framework, like for example, Anglo is already supporting that, then
you actually don't need to do anything. Then the wol frameworkord is not going
to show up at all. Yeah. I just here's what I found.
If you do the COMMANDSFP, you get quite an extensive list of different things
that you can do. There's one that should shows CSS overview. Oh yeah,
that's a great panel, and you can see memory and shows all your
background colors being used, text colors, contrasts, you can see in all
their codes and what they look like, font info, media queries. Oh
my gosh, just the colors and the overview summaries. I can think of
many times I've been looking for like browser extensions to find this stuff, and
it's already there. Okay, so let's move on to the console. So
probably you know Dan mentioned debugging by alerts. I think you know everybody knows
how to do like alert something. You know, Oh, I hit my
code here. Great, that tells me. I know there's a heck of
a lot more you can do with the console. And I have an article
bookmark somewhere about all these different things you can do with the Console like Console
error and Console I think you can do stack traces and there's just all kinds
of crazy stuff that you can put out in the console that even you know,
breakpoints are awesome, but they don't do everything until the console really helps
shit see some stuff there. Anything else what can you think about the console?
Maybe some hidden gems in there. So what I find well in the
console is using snippets okay essentially that it can run code that you have prepared
for some tasks in there. What I really find find useful in console is
the dollar sign zero two I think four, stuff like that which give you
automatic access to the late the last select at HTML element. Yeah zero,
you get access to the last select that element. That's very useful w if
you want to try on something. The one thing that I really love about
the Console in their tools is that when you log out elements it behaves is
if you copied something out of the element's view that you can actually like expand
them and you can obviously you can right click on them and go to the
elements itself, but you can also do a lot of stuff even like in
the Console with elements is if you're in the elements panel which is which is
really which is really nice. And I also like the various dollar shortcuts.
They're they're useful. And the one thing that I haven't found very useful maybe
I'm just not using it right is the uh, the ability to watch expressions.
I don't know, I've yet to find a really useful use case for
that. One thing to watch out for the with the console is if you
change if you put in a filter, or if you change the default levels,
or if you go into an eye frame, then you might suddenly be
surprised why you're not seeing things that you expect to see. So so always
be careful about what you put in the filter and remember to to take into
account that you're filtered, potentially filtering out stuff that you may want to see.
Yeah, that's true, Thank you for saying that. Yeah, the
console is actually super powerful. Yeah. Life expressions. I find them useful
when I want to have a life eberlation and life update when something happens on
a page. So if I'm running the console, for example, next to
the page, and I lose some interactions on a page, then a live
expression is going to change depending what the life expression is for example. But
I don't need to go back to the console all the time to issue new
command, but it seemed automatically updates. I do put watches like in the
source panel, which kind of do similar things. I've yet to really find
the need for live expressions in the console. But like I said, you
know, maybe it's it's not every user is going to use all the features.
It's often mixed. The watch expressions are going a great same with breakpoints.
Sometimes you will not be able to use them properly and pretty active bugging.
It's gonna be more useful. Uh yeah. So live expression is that
where a value changes as as the code is running, it changes right there
on the console for you or yeah, you see, Steve. If you
go to the console tab, you will see the eye icon. Oh right,
huh And if you click that, it opens up this new line where
you can write in an expression. Oh okay, and that expression will update
automatically as things change. Oh okay, So like a value of a variable
maybe or yeah, for example anything. Really it's like a watch okay,
yeah, the PHP de tools as in my ideas a watch KP thing.
Yeah. So it's like I said, like I said, you have in
the sources panel you have something called watch which effectively does exactly the same thing.
It's just okay, this is doing it in the console. Okay,
yeah, console log, there's console errors. There's all kinds of stuff you
can I like console table, which a lot of people are not familiar with.
Right does it prints out everything in a nice little neat table in internet
if if, if your data is proper is appropriately like organized or configured,
if it's effectively tabular data, then then the table that can be really useful.
I also like using the some of the web performance APIs directly from the
console, So things like performance get entries or get entries by by name or
get entries by type are really powerful things to be able to do directly from
the console. Yeah. Yeah, I remember one time, Dan, you
and I were talking about promises and going from the promises and stuff. You
just sit there and worked in the console the entire time. You know,
right, code said a variable, run this, run that, and everything
was just right in the console. Yeah. I know that a lot of
people like launch node in in in the terminal. I'm just I just opened
theF tools and go to the console. I'm that's I feel right it home
there for a lot of these sorts of things, so a lot when I
when I need one to play with code and like get immediate feedback, the
console is often where I like to do it. But for example, one
of the things is when. So for example, let's say we mentioned that
one of the other tabs that, like Steve, that you said that you
talked about as being a really commonly used tab is the network tab. But
the problem with the network tab is let's say I opened the page after the
pages already loaded, so I kind of missed stuff. But I can use
the the performance get entries or get entries by type to see network information about
things that already happened even while even if the deaf tools was closed. So
that's really useful. So you're just going to the console, opening your line
and type that in and it shows you Yeah, I do like, yeah,
get entries by type resource and I can see the various resources that down
downloaded. Now it's not as like visually pleasing to see as the as the
network tab, but it's better than nothing. Sure, Yeah, I will
try to find the article I used to have bookmarked or have bookmark somewhere that
shows all the different things you can do in the console. It's it's really
amazing. You know, there's more than let's just say, there's a lot
more than console lot. The one of the funny changes that you recent that
was, well it's not recent anymore, but it was like this small thing
and it was really helpful is that isn't really const the in the console anymore
that you can redefine const. Yeah, I can recall that. It was
such a great thing. It was such a useful thing. It was so
small. Ye, it's so useful because you would accidentally type cons something because
you copied some line of code somewhere, and then you were kind of screwed
because you couldn't change it anymore until you like reloaded the tab or something like
that. And now you can effectively just redefine the const So that's really nice.
All right, So let's move over to the sources tab. That's one
of my one of my favorites that I use quite a bit. Now.
I do have one question Michael before we get started. And I don't know
if if this is a bug or way things have changed, and maybe it
has to do with the source maps discussion that you were talking about. I
work mostly in view when it comes to the JavaScript on the front end.
And it used to be pretty easy to be able to go to my documentary
over on the left and find a file and open it, and that was
it. Now I have to use like a debugger line to find it right
open the file because webpack has created so many different variations, you know,
of a particular file, and it's not so easy just to you know,
command P type my file name and open it. Is that something that's changes
have to do with source maps? What? What do you know? What
you understand what I'm talking about? Are you talking about files at the ending
with a hash? Yes? Well, yeah, that's what I see is
when I go to open them and I can't find the one that actually is
running my you know that has my code. So if I put a debugger
line in there and run and then I'll hit that, Okay, that's the
one that I want to put my brake points in and in or It's just
it didn't used to be so difficult. So I'm not sure what's changed,
if it's a combination of the view code, or if it's the deb tools
or or something. So it's so we I think we use ago when we
started that we actually did have a look at the default experience from different from
a different popular frameworks and how the debugging experience is out out of the box.
Essentially. That was enlightening and very interesting, and we found bugs in
Chrome deftols that we addressed, but we also found enhancements that frameworks can be
doing in order to provide essentially better information or stuffing like that, so they
fault debugging experience is better. I think we also so I can recall that
particulation, for example with the hashers because again same thing. Hey, now
I hot monel load and kicked in, and now I have five files with
the same name but different touches. Which one is the last one? I
don't care about anything else anyway, and some fixes have been made. I
would need to check if if that effected View. I think it has,
because then it also depends what we're about, version of you you're actually running,
and so on. So a question about that, do you actually work
with the framework makers directly, Like if let's say you say, hey,
we think that the view could be doing something a bit differently in that that
would really improve the integration, do you actually reach out to the view contributors
and you know, suggests a change to them. How does it work?
Shortly answers that question, Yes, that's what we're doing. So we we
obviously can't fix everything ourselves, be it because we don't have to know how,
or we don't have the capacity, or we don't have control over the
source code. So we need to work with partners like you, like React,
like Angola and so on to get a better experience to our users.
So yes, we're reaching out to them and ask them, hey, we
have seen that, can you at that? Or hey, we are really
interested in making the experience for reacting this better. What are the topic issues
did to see when they're debugging and how can we help there? And so
on. Now, one of my favorite features in Chrome dev tools, and
it's part of the Sources panel, is the override aspect. For those of
you don't know, overrides mean that you can effectively like edit the file and
save a local copy of the edited file, so that then if you even
if you reload the page, it will really it will use your your edited
changes. And it's a really cool way of trying out a fix without having
to redeploy a new version. Of course, there are problems with it.
I mean, butlers get in the way. If your code is bundled,
then then then editing it can be you know, editing let's say, editing
the minified bundle code is a lot less fun. It's it's it's doable,
and I've done it, but but it's a lot less fun. And so
so that's one option. I've even done like crazy things like uh, copy
the non minified version and paste it over the entire file and then edit that
and save it into the overrides. But but when you can get them to
work, overrides are immensely powerful feature. One thing that I would have liked,
which is kind of similar to overrides, would have been the ability to
redirect, say, like you know, instead of download the file from this
r L, like like behaviors if you're downloading the file from this RL,
but actually download it from a different URL, like what you might get with
with certain local proxies. Right, Okay, so yes, all right is
a great feature. Network over rights and local over rights. And we also
did actually spend a few cycles to improve it, and of last year,
I think, oh yeah, the timing, the load timing, I think
you improved that. It that it behaves as if it's not local but downloads
over the net from the network. Yeah, and also we also did some
UI changes with local overrights. I think because it was hard. It's a
super useful feature, super hard, super hard to find if you don't know
where we're looking or if or you might find if if somebody else that's already
known about it is going to tell you about that, which is are you
Are you familiar with it? By the way, Steve with the overrides feature,
No, I haven't used it before. I've seen something similar. I
remember Chris Koyer a few years ago from CSS Tricks and codepen and shop Talk
show did a video about, uh, making your CSS local so you can
change it and tweak it, you know, if you're working like a remote
site and you can tweak it actually locally, which is I thought was awesome.
This sounds familiar. Although the question I have for you, Dan is
how is using the overrides panel within the dev tools different? Say, if
I'm working locally right and I'm editing code and my ID and I changed that
and you know how it happens, what's the difference. Obviously if you can
if you have hot reload with actual debugging, local debugging, that's the better
option. Okay, let's say you've got it already shipped in production. Let's
say and you're thinking, hey, you know, yeah, I think we
could do X better if we do this instead of that. But you know,
you you don't want to be instead of you know, firing up the
development environment and starting and doing like that. Way, you just opened open
it up to the override. I didn't test and effectively test your change in
production. Oh yeah, oh that's nice. And for example, I did
a workshop like once I remember, and instead of having people like install a
whole development environment, I created the website with would like themo code and and
we basically work together by overriding it with more and more sophisticated versions. So
they actually used Chrome dev tools as their development environment creating overrides. And the
the sibling of all right is the workspace feature. So if you actually have
access to the source code and you want to keep on hacking in the tools
because you want to make small changes and stuff like that, you can use
workspace to actually hook up to to a file system and make a link to
your actual source code. That's really so that's really about using the depv tools
effectively as your development environment effectively. So what is it doing is creating a
local copy within the browser there and then your tweaking. No, No,
it's really mapping to your actual code. Think about instead of using vis code
for your coding, using Chrome dev tools for your coding. Yeah, okay,
so if I if I add a folder, I'm adding it so I
can do that on my prod site, you know, my whatever dot com.
And it's actually connecting with that code that's bundled code that's running on my
server. Well, that's if your server is local or or or accessible as
via the file system. Okay, so then, but you were talking about
running using the Chrome dev tools like as your workspace against check against pride.
How does how does that work? I guess that's what I'm trying. Is
that what you're talking about? You know? So we're saying that there are
two different features which are related. One is a feature called overrides, and
the other, the feature called workspace. Workspace is about mapping your actual development
workspace into dev tools so that when you make changes, you're actually making changes
in your original code files. Override is a feature that lets you override the
file if the original the file coming from the server remains the same, but
you're creating like a local copy that the browser uses instead. Gotch nice,
Yes, okay, that makes that makes a lot of sense. I mean
I can. The classic case that comes to mind is, hey, it
works on local but why is it not working on products? You know,
like if you, for example, a debugging if you are offering library for
example, and the buck whits not working on a client site, you will
not have access to the client's most code, but you still need to debuggets
so it all writes. You can actually try it fixes stuff like that.
In the production environment, it's very useful. Protect that's cool, Okay,
learn something new every day, all right. Now. The other thing that
I want to talk about in this dev tools environment we're on running out of
time here is breakpoints, just because they are so incredibly useful the ways I
use them, and I am sure I don't come close to maximum out is
the way they could be in it, and they work pretty much the same
as they do in my PHP. Ide is one, you know, obviously,
just to stop code and see what's the value of certain variables at a
certain point. You know, if you're in a loop, you're in a
function whatever. That's probably the most useful thing sometimes, but I know there's
other things where you can edit the break points and set conditions. You know,
whether it's okay, only hit this breakpoint, if this variable has a
specific value because you're inside of a monster loop and you don't want to stop
every single time, or you can and you know it's temporary, disable it
instead of removing it. You know, there's all kinds of conditions. If
you write click on a breakpoint, edit it. You can see all the
different options. But it's a lot more useful than just click it. Okay,
it's going to stop every time it runs here A yeah, Conditional breakpoints
are very useful. There's also the option of log points, which is it's
also it's instead of breaking it, just logs something to the console. You
could do it in the old days by just creating a condition with a console
log in it. But I guess that a lot of people just didn't think
about that trick. So so yeah, but so, but it's useful because
something you just want to, like, you thinking, it would have been
really useful if I had this log statement, but I don't have it in
the code. So I'll just add it as as as a log option or
if you're doing product bugging again where it can't change the source code except if
you're all writing. But that doesn't might not some reason not working. So
you can do a lock point and it's like a printer. Or you can
actually can you actually even change local variables in in kind of like this slog
point, like effectively add some logic in a log point. Yeah, you
can add an expression in there. I think it needs to be a side
effect free or something like that, or I might be mixing it up,
but you can add an expression. Hm hmm. That's interesting. One more
thing that it's worth while mentioning about breakpoints is that sometimes you have like a
complex line with multiple instructions on it. If you put a brake point,
you will actually see that there are small arrows inside the line itself and you
can actually turn on and off breakpoints in side the line. Yep, welcome
to Challas, crist Well, that's that's that was that's true even from the
sea days. You know, I know, I know, But why is
it super It gets super interesting is when you have minimizers at work in bundlers,
everything gets cramped together into one line to squeeze out as many bites as
possible. Yeah, that's that's kind of why I think the AGG is now
trying to get us all to just uh work in the original source code without
minifiers and and basically rely on on the compression and and not on the manification
uh for to to you know, and and there's a lot of truth in
that in a lot of ways, but you know, he he's trying to
take it even a step further and trying to convince us not to use bundlers.
And we're not We're not there yet. I all right, So finally
we want to go to the talk about the network tab. And there's a
lot you can see on your network tab in terms of basically all the community,
all the files that are being downloaded as a XHR requests that are being
made. Uh, there's all kinds of information. My primary use of them,
where I'm dealing with a you know, a front end framework that's communicating
over APIs to a back end, is to see, Okay, what calls
were made, what was the payload, what was the response? Was it
an error code? Was it you know, era within the return JSON or
the return you know whatever the response is, et cetera. So that's my
primary use I usually have. For instance, you can filter all the different
items that are written to the to the console log log I usually have my
betch slacks slash x hr button enabled to so I can just see the traffic
going back and forth. But you can see CSS files that are downloaded,
JS files, font images, et cetera. You know sizes, how long
they took and so on. So that's and then you even have filter capabilities,
so if you have a huge console, you can just type in and
filter and you know, pretty standard stuff. What other stuff is can you
do in the network tab that I haven't touched on? So? What I
see that severally utilized and also controversial if most people are setting it all off,
is disabled cash for example, Yes, so you see people running quite
often either having it enabled, so cash is obviously disabled or disabled. And
yeah, why is this useful? That's useful if you want to debug and
code load of a website for example, oil, if you're interested in performance
debugging where you want to replicate similar citation and so on. In particular performance
cases, disabled cash is quite quite often heavily used. Just a comment on
that as somebody who's really into performance, it's important to understand that while disabling
cash is the easiest way to simulate the first load, it's not really the
same because in the first load you're starting with an empty cash. That's true,
but cash is not disabled. So if you have things like prefetches and
preloads, disabled cash kind of kills them, whereas in the normal flow of
things they do work. So disabled cash, like I said, is nice,
is the easiest way to simulate the first load, but it's not the
same as the first load. If you want to do that, you probably
want to do like open your like create a special profile, or even use
the incognito or whatever that would be potentially better simulation. Yes, that's true.
It's for use is often about economics because like we're when to get DP
two percent there find enough. Similarly, also going into with the with demolation
of the different network conditions, that's also very often being used, like the
throttling feature for example, if you see the throttling feature, yeah, okay,
right, So in other words, as I understand it, that's you
know, if you're working on a you know, a hundred gig BET connection
on a very fast computer. You're gonna think, hey, everything is great.
But then if someone gets out there, you know, in a remote
location where they have three G or you know, something really slow, you're
not going to be able to see what those effects are. And so what
this allows you to do is stallow down your connection so that you can emulate
as best possible a much slower connection to see how your code loads and performs.
Right, but keep in mind that's only emulation, and as then already
said, it's the same we disabled cash. That's only emulating. It's not
one of percent how it actually would be. But it's close enough for at
least to debut such cases and to understand what's actually happening and how see how
slow your webpage, for example, woodload on a free cheat connection. All
right, it's the best. Well, any emulation is never going to be
perfect, so I think that goes without saying, but it can certainly get
you a lot closer. One configuration that I often like to change when I'm
using the network tab is I actually prefer color coded resources. So the bars
in the in the waterfall part of the network actually, like you know,
they show you they're like the green for the time to first BITE and then
the blue for the actual BITE downloads. But instead you can go to the
general settings and in the network section you can change to color coded UH,
to color code the resources UH. And if you do that, then instead
of all the resources being shown in in like you know, green and blue,
you'll actually see the JavaScript in yellow, and the fonts in red,
and CSS in purple, and HGML in in like blue. And it's much
easier to identify various different resources this way. So that's sort of the only
downside of that. And and I've complete I've complained to you guys Michael about
it, is that when you do that, you don't actually see the DNS
times and the and the DCP handshake times, so you kind of either you
either see this or you see that you can't see them together, which is
kind of unfortunate. In an ideal world, I would like to you have
it color coded and still be able to see the DCP time in the DNS
time. Right. Have you created an issue for that? I think I
did, Okay, like a long time ago. Okay, I need to
check. That's interesting. One another thing that might also be useful, in
particular for Foma's debugging is also if you capture screenshots. Similar to the performance
the performance panel typically works with it's capturing screenshots and show you how the page
actually looks at a certain certain point in time. You can also do the
same thing for the network on a network count that it capture speen shots,
which helps if you want to understand holiday pitches actually be surely looting. So
if I go to the performance tab, I see the screenshots checkbox. You
said it's on the network tab as well. Yeah, it's back on the
top right has the ski I can You can click on that and then you
will get some additional settings. Okay, more tools? Oh yes, recorder
rendering. Okay, yes, I see those three little dots there, and
there are more tools. It's quite a long list of more tools. We
could probably spend a few hours going over all these tools, that's for sure,
but we don't have a few hours, so we're going to wrap it
up for here and move on to picks. Thank you forcoming. This is
one of my favorite topics to discuss, and the more you understand the debugging
tools you have, the better you can do it writ in your code or
in Dan's favorite subject, you can make it more performant. We didn't even
get to the various performance tabs, like there are like three or four different
types just for performance. We didn't even talk about them. Right, we
might have have to have Michael back to cover more of this stuff, for
sure, we do have. We'll put this in the show notes. The
link to the list of YouTube videos on what's new and dev tools. I
have found something to take up a large part of my afternoon for a while
to catch up on these videos. For sure? Who is that that's doing
it? Looks like the same person, yes, Essa, a DEFL person
that's mainly doing them. I think you're seaming up then with Cliza for but
it's mainly chessling. Okay. Have you ever wished that you had a group
of people that were just as passionate about writing code as you are? I
know I did. I did that for most of my career. I'd go
to the meetups, I try and create other opportunities, and it was just
really hard. Right the meetups. I got some of that, but they
were only like once or twice a month, and it was just really hard
to find that group of people that I connected with and really wanted to talk
about code a lot, right, I mean, I love writing code.
I think it's the best. And so I've decided to create this community and
create a worldwide community that we can all jump in and do it. So
we're going to have two workshops every week. One of those or two of
those every month, are going to be Q and A calls right where you
can get on you can ask me or me and another expert questions. The
rest of them are going to be focused on different aspects of career or programming
or things like that. Right, So it'll go anywhere from like deployments and
containers all the way up to managing your four oh one K and negotiating your
benefits package. Well, we'll cover all of it, okay. And then
we're also going to have meetups every month for your particular technology area. So
we have shows about JavaScript, react, angular view and so on. We're
going to have meetups for all of those things. I'm going to revive the
freelancer show. We'll have one about that, right, so you can get
started freelancing or continue freelancing if that's where you're at. And I'm working on
finding authors who can actually do weekly video tutorials on some thing for ten minutes.
That's related again to those technology areas so that you can stay current,
keep growing. So if you're interested, go to topendevs dot com slash sign
up and you can get in right now for thirty nine dollars. When we're
done, that price is going to go up to seventy five dollars, and
the thirty nine dollars price gets you access to two calls per week. The
full price at one hundred and fifty dollars, which is going to be seventy
five dollars over the next few weeks. That price is going to get you
access to all of the calls and all of the tutorials and everything else that
we put out from top endevs, along with member pricing for our remote conferences
that are coming up next year. So go check it out topendevs dot com
slash sign up. All righty, So that we'll move on to Picks,
the part of the show where we get to talk about something other than code,
or we can talk about code if we want. All depends Dan,
What do you got for us? Well, not not a lot this time,
so I'll refrain from talking about the various wars that are going on in
Ukraine and Israel, because it's just too unfortunate and sad and I don't feel
like it. So instead I'll mention a nice TV show that I'm kind of
enjoying, which is called Killing Eve. It's on Netflix. Sounds very fuzzy.
Yeah, it's about this. It's like a woman led TV show.
So the two, like I would, the main figures there. One is
this kind of wackle hit person for some clandestine organization it's unclear for whom,
and she's like she's basically a psychopath, but they're taking advantage of that and
using her as a as a hit person. And then there's them I six
agent who's trying to hunt her, which is the other lead figure, female
figure in the show. Uh and uh, it's it's really interesting and I'm
and I'm you know, it's not an amazing TV show, but it's a
really enjoyable one and I'm liking it awesome. So those would be my pick
for today, and unfortunately I actually have to drop off. So Michael,
I really enjoyed our conversation today and and hopefully we can have you on the
show again to talk about more Chrome Deftools features, because I think we talked
about less than half the panels, so there are I think it was.
Yeah, we didn't even again and we didn't even get to the drawer at
the bottom and all the options that are there. So you know, there's
a lot more to talk about. So guys, thank you for having me
and Michael, thank you for coming on, and I'll see you next time.
Thank you. All right, So my turn before I get to the
high point of every episode, which are the dad jokes, I do have
one pick one of the ways I do my working out exercises with CrossFit,
And no, I'm not one of those CrossFit people that always has to blob
about me doing CrossFit, but uh, there's just one piece of equipment that
I have started using recently that has been a lifesaver rather handsaver. So part
of CrossFit is doing a lot on a bar. So there's like pull ups,
bar muscle ups, toes to bar, that kind of stuff. It
can bars can really, really, really really tear up your hands. I've
had that happen a few times. And so there's a company called Victory Grips.
They make these grips that are various kinds. The ones I use are
these leather ones, and what they do is they strap around your wrist and
then it only has material right there in the palm of your hand. It's
not like a glove or something that goes over your hand. And so then
what you can do is you can just use them while you're holding onto the
bar and doing whatever you're doing, and then you can spin them around so
they get out of the way for you know, whatever else you're doing that
you don't want them in the way, and you put them back in place.
But they give you a really good grip. A lot of bars tend
to be really slick, and it's really hard to do those kinds of workouts
when you're trying to do a pull up by your hands slipping, so you're
trying to get a grip half the time and wasting half your energy. So
but they're at Victory grips dot com and they got some really great things.
Even with them on, I've sort of torn up my hands a little time,
but far less than if I didn't use the grips at all. And
then finally the dad jokes of the week. So I went out to dinner
recently and the server said to me, you know, there was refill your
glass with water, and they said, I see your glasses empty, store,
would you like another one? And I said, why would I want
to empty glasses? Right as compared to a full one question? So why
did the vulture get kicked off of the airplane? People kept complaining about his
carry on luggage c ar r io n for those who don't get it.
And then finally this one. I saw this. As soon as I saw
this topic, I got this one is just perfect. So I went to
my boss and I said, what web browser do you use? He said,
I use Chrome. I said, why does everybody on the team say
you're always on edge? Oh my god, very good, Very good.
I figured that was appropriate for today. All right, So that's all I
have, Michael, do you have any picks for us? Okay? So
I like playing board games and I think I have one favorite game, which
is called Spirit Island. So imagine, instead of you colonizing an island and
then building a nice city there, imagine you are actually playing the island and
you are not very eager of being colonized, So you're playing spirits on that
island that tries to defy the invaders, which is a great cooperative super complex
bod King. Uh, my wife and I really enjoy playing together. So
you're playing so the other players, you're playing as a team as compared to
playing against yourself against each other. Correct, right, So you try to
define invaders and they're all us so and they have different spirits with different powers
and so on, with different complexity. And it almost wanted to like it
would be cool if you would play something like Gozillo or something like that,
like wandering over the over the island and then simply trembling everything. And like
a few months ago, actually you released an expansion and yeah, essentially Gozilla
and yeah it is a turtle, but it's like Cosilla. It really feels
that way, like you are trembling over religious and destroy them because that's what
Goodsay is doing. Yeah, I was like, you really really liked that
Spirit Island. That's something. Yeah, I've seen some other games. There's
another game I played and I forget what it's called, where it's like the
island is sinking and you're trying to get off of it. It's another team
game. I have a neighbor who plays a lot of these types of games,
so I have to ask them about this one. But yeah, Board
Game Week. I'm not sure what the rating is, but there's a page
there for sure. Excellent. All right, Michael, Well, thank you
for coming on. It sounds like we do need to have you back to
talk about more of the dev tools, considering, at least for myself,
they're sort of an integral part of web development, I think, so love
to all right, thank you, and we will talk to everybody next time
on JavaScript Jabber Audios.