
Chrome developer tools to master - rohithasrk
https://apsdehal.in/blog/chrome-developer-tools-to-master
======
0xfeba
I implemented two simple interview tests in order to weed out people who can't
do simple debugging.

In one, I hand them my laptop and give them a basic create-react-app sample
that uses fetch on a remote URL, but there's a typo in the URL. I tell them
it's supposed to fetch a remote REST API and parse the JSON but it doesn't
work--how would you fix it?

So far, two ways to pass: Just look at the source code, or use the network
debugging tools to find the error.

Spraying console.log statements everywhere is a red flag to me. So far, the
test seems to work well.

~~~
judofyr
Can’t you just ask them if they have experience with the Chrome debugger? And
if that’s such a deal breaker for you, you can teach them in the first week? I
mean, it’s not like the Chrome debugger is such a complicated beast. Even if
you have no experience with it, you can probably learn 90% of the useful
tricks in a few hours.

~~~
0xfeba
I do. I just verify. They can also use Firefox or any other browser's tools if
they are more comfortable.

We are not hiring junior devs, and even if so I would still probably ask. But
experienced front end devs should know how to use a browser's debugger.

Like others said, it's a flag that they potentially don't have problem solving
skills. I mean, if they put a single console.log near what they think is going
wrong and find the issue, I wouldn't dismiss them so easily.

It's just that so far if they resort to console.logs, they are just randomly
trying things.

~~~
sehugg
I've written debuggers, and I still use console.log quite often. I would be
pretty annoyed if I were silently judged on my choice of debugging tool.

~~~
giancarlostoro
This right here, I use both. Sometimes I like to just "debug by writing code
to get more information"

------
kaycebasques
Here are some of the latest tutorials from the official DevTools docs, if
you're looking to learn new workflows:

CSS basics: [https://developers.google.com/web/tools/chrome-
devtools/css/](https://developers.google.com/web/tools/chrome-devtools/css/)

JS debugging basics: [https://developers.google.com/web/tools/chrome-
devtools/java...](https://developers.google.com/web/tools/chrome-
devtools/javascript/)

Console basics: [https://developers.google.com/web/tools/chrome-
devtools/cons...](https://developers.google.com/web/tools/chrome-
devtools/console/get-started)

Finding ways to improve site speed:
[https://developers.google.com/web/tools/chrome-
devtools/spee...](https://developers.google.com/web/tools/chrome-
devtools/speed/get-started)

------
kornish
One thing I didn't see in the article:

As well as setting breakpoints, one can trigger the debugger by including the
statement

    
    
        debugger;
    

in a script. Then, having the Dev Tools console open when that statement
executes will automatically hop you into the debugger with access to variables
in scope, etc. Easier IMO than manually setting breakpoints, especially when
working with some transpiled languages.

~~~
fermuch
For transpiled languages: if you set up source maps correctly, you can access
the non-transpiled language and the devtools will set up rules on the correct
places (in this case, breakpoints, which also jump automatically to the
original source instead of the transpiled version)

~~~
52-6F-62
This works great with TypeScript

------
Kagerjay
Chrome developer tools is just a godsend. Its so much better than any other
debugger I've worked with, and miles better than firefox debugging tool

I personally use a chromium based browser called slimjet to do all of my
development. It runs off v55 I think which is like 5 versions behind chrome.
But its nice to have a dedicated app for debugging.

One tool that I find I use everyday is this:
[http://lab.maltewassermann.com/viewport-
resizer/](http://lab.maltewassermann.com/viewport-resizer/). It is WAY better
than chromes native responsive webdesign tool.

When I first started developing I would always just go on stackoverflow and
ask a dumb question. Now I consult my debugger and it answers everything I
ever wanted to know.

Knowing how to use a debugger means I can reverse engineer html/css on any
site too, so thats a big bonus.

~~~
subsection1h
How is Chrome DevTools "miles better" than Firefox Developer Tools included
with Firefox Developer Edition?

I checked your blog to see if you've written a detailed comparison. I saw that
your latest blog post is about writing your first user script in 2018, and you
didn't use the term "user script"[1][2]; instead, you used the term
"Tampermonkey Scripting" as if Tampermonkey originated user scripts. Do you
have enough experience with web development to adequately compare Chrome
DevTools and Firefox Developer Tools?

[1]
[https://wiki.greasespot.net/User_script](https://wiki.greasespot.net/User_script)

[2]
[https://en.wikipedia.org/wiki/Userscript](https://en.wikipedia.org/wiki/Userscript)

~~~
Kagerjay
This might just be from my own limited experience, but firefox developer tools
provides way too much information when inspecting elements on a page. It gets
to the point that its distracting. I don't need to know where an element is
positioned on the page, I can see it on the page itself. There might be
perhaps settings to change this, but the native settings are not to my liking.
I also have noticed on the on/off many occassions I have used it in the last 2
years, there is sometimes noticable lag delays when inspecting items. I find
the interface much less intuitive as well.

I will argue that firefox does have significantly better support for CSS grid
layouts (as it came out with support first), but I don't use that often, and
recently chrome unleased these tools in the last year to my knowledge.

I use chrome inspection tools tab for the following purposes now mostly:
elements, console, sources, and network. I don't use any of the other tools
very often, partially because I don't need too. This is what I mostly compared
firefox developer edition tools too.

I've found when I wrote my first stylish extension and just debugging in
javascript chrome is just a much more pleasant experience. I have never really
run into any problems asides some issues regarding its native RWD tools for
handling body margins. Firefox did not have this issue, but this is why I use
the linked tool in the above comment

I was aware when I wrote that post that its not called tampermonkey scripting
and it was called something else but I didn't remember at the time. Now I know
its userscripts :)

------
dmitriid
There's no end to amazement at how great Chrome tools are. When you think
"they can't get anything more into them", they throw in additional things.
Anything from full-page screen captures to animation profilers. I've yet to
scratch the surface of what they have to offer.

And they add new stuff continuously. Once every few months you open DevTools
to be greeted with a new What's new in DevTools".

And then there's Safari (I'm on a Mac). I still prefer Safari to Chrome and
Firefox. But their DevTools... &-10 years ago their DevTools where best-in-
class, putting even Chrome's DevTools to shame. And then they not only
stagnated, they _regressed_. Good luck using any part of whatever the Safari
DevTools are anymore.

~~~
degenerate
I didn't know about the screenshot! Found this article showing where it is:
[https://www.utilitylog.com/full-page-screenshot-
chrome/](https://www.utilitylog.com/full-page-screenshot-chrome/)

~~~
kaycebasques
Also supports screenshots of arbitrary sections of the viewport:
[https://developers.google.com/web/updates/2017/08/devtools-r...](https://developers.google.com/web/updates/2017/08/devtools-
release-notes#screenshot-areas)

And specific HTML nodes:
[https://developers.google.com/web/updates/2017/08/devtools-r...](https://developers.google.com/web/updates/2017/08/devtools-
release-notes#node-screenshots)

------
SurrealSoul
One thing that wasn't touched here is that you can actually map the developer
tools to your local files. My old co-worker used Dev tools as his text editor.
Pretty nifty!

~~~
kaycebasques
Tutorial on this workflow here:
[https://developers.google.com/web/tools/chrome-
devtools/work...](https://developers.google.com/web/tools/chrome-
devtools/workspaces/)

------
michael_michael
As the author notes, most of these tips can be applied to Firefox (or Edge) as
well.

------
codezero
This is great, besides the Sources tab, I use DOM and Event breakpoints a ton
to debug a lot of problems.

Something, I'm not sure if most people know, if you break somewhere (whether
event or DOM), you can access the currently in scope variables directly in the
console. It's extremely useful for finding out what's going on with something
in the middle of hairy code at a specific point in time.

~~~
slig
It's also possible to change the value of these variables and test different
code paths.

~~~
codezero
You're right! I was going to say that, but I didn't remember off the top of my
head if that was true :)

------
kclay
Can someone explain why the chrome browser simulator is so bad. I recently had
to do some web work, normally don't deal with HTML . Anyways I tried to use
the emulate view to test against iOS devices. Had QA test on a real device and
it was all wrong. Ended up just getting a virtualbox of osx up to run the
stimulator.

Normally it isn't a problem using it but trying to line up slanted designs
with pixel perfect placement wasnt working out at all.

~~~
carelesswhisper
Ran into this recently, there’s a meta tag you have to set for it to properly
target mobile and not just scale it down
[https://developers.google.com/web/tools/lighthouse/audits/ha...](https://developers.google.com/web/tools/lighthouse/audits/has-
viewport-meta-tag)

------
adrianhel
Give the developer a simple task that is work relevant and 24h.

If the person does it in 5m using some fancy trick, then you know they're a
problem solver of high calibre. 1h-5h: They are probably adequate. 24h: junior
or bad.

Ask them about the trad offs they made. The 24h guy may not have made any, and
may be the perfect maintainer. The 5m guy must have made some. Ask for their
reasoning.

It may be the reason to hire them. It may be the reason not to.

Feel free to pay people for being tested.

~~~
paulie_a
How do you know how long it took? Even with the fancy coding screen sharing
software? I could have had an important phone call and walked away from the
laptop.

------
adrianhel
If Edge had shadow DOM anad as nice dev tools, there would be nothing keeping
me to chrome. (We have polyfills for everything else.)

------
homero
You can open it much quicker by just pushing F12

------
tchaffee
I am getting an "NET::ERR_CERT_AUTHORITY_INVALID" error when trying to view
the article.

~~~
allannienhuis
I got a bunch of those errors in chrome a year or so ago - turned out I was on
a really old version of Chrome (I didn't realise auto-update wasn't working on
their Beta stream at the time), and some ssl cert chain configs became stale
(or something like that). Updating my browser fixed it.

~~~
tchaffee
I'll check it out, but I get frequent updates for Chromium and Chrome. I'm
usually on the latest stable release. Thanks for the suggestion.

