
A List of Chrome DevTools Tips and Tricks - fagnerbrack
https://flaviocopes.com/chrome-devtools-tips/
======
Pigo
Does anyone remember the 3D 'tilt' tool in Firefox? I always thought that
there'd be a version of it for Chrome eventually, just because it was so cool.
But I guess it wasn't as useful as it was cool, which is why it didn't catch
on. I don't think Firefox supports it anymore either.

~~~
milkmiruku
Here's an 2D outline bookmarklet I picked up and modified slightly along the
way, slightly out of date though;

javascript:(function(){var
t=['div','header','nav','main','section','footer','table','th','td','tr','form','fieldset','label','img','address','blockquote','h1','h2','h3','h4','h5','h6','p','pre','dd','dl','dt','ol','ul','li'];var
c=['blue','blue','blue','blue','blue','blue','teal','teal','teal','teal','orange','orange','orange','red','red','red','red','red','red','red','red','red','red','green','green','green','green','green','green','yellow'];for
(var i in t){var l=document.getElementsByTagName(t[i]);var
j=0,e;while(e=l.item(j++)){e.style.outline='solid '+c[i]+' 1px';}}})();

~~~
anitil
Nice! It hadn't occurred to me how helpful something like this could be!

------
dmihal
My favorite tip:

Add console.log statements anywhere in your code by adding "conditional
breakpoints" and writing a console.log in the breakpoint expression.

~~~
ivankolev
I've used that lots of times, and I wish Chrome treats them breakpoints less
ephemerally :). Nowadays I debug simultaneously on Intellij and Chrome
DevTools, thanks to the new standardized debug protocol. It's very neat to be
able to save sets of breakpoints that just do logging, and you sorta can do
that manually because intellij saves them in the project's config xml.

------
pit2
Here you have +100 more: [https://umaar.com/dev-tips/](https://umaar.com/dev-
tips/)

------
ThomasRooney
Another neat trick that I rarely see referenced is the use of Alt-R to reload
the dev tools, which also reloads sourcemaps.

Very useful if you’ve a hot reloading pipeline.

------
sorenn111
I love opening up a console in chrome as a insta-Javascript IDE when I need to
do some quick sanity checks

~~~
reificator
When I'm working on a windows machine I'll often use dev tools to do one-off
text-processing or templating.

------
Someone1234
> The second one lets you trigger a state for the selected element, so you can
> see the styles applied when it’s active, hovered, on focus.

If only that worked. Sure, it sets the state from a CSS perspective, so you
can test things like styles. But many popular JavaScript libraries simply
ignore it (looking at you JQuery UI) because of how they hook those events.

For example I've seen many that set several attributes when you mouse over
(e.g. data-x, additional class, etc), so if you want to test it the only way
right now is to mouse over for real and then do this keyboard voodoo to cut
the hovered element into the clipboard, and then after you move your mouse
away paste it back onto the page.

You might say "Just call .trigger() from the console!" but the reality is
there are several different ways to hook (particularly when a library supports
both touch and mouse). Plus some intermingle the CSS hover selector AND
Javascript events.

------
jvatic
FYI with the exception of XHR and DOM breakpoints, there's nothing in here you
can't do in Firefox dev tools (just different keyboard shortcuts).

------
_ZeD_
First of the list: "Drag and Drop in the Elements panel" AARGH is there a way
to disable it? I always drag by error an element and make a mess...

~~~
sefrost
The regular "undo" keyboard shortcut at least undoes this mistake :)

------
amelius
I'm still missing:

\- Freezing of all DOM events after X seconds.

\- Stopping all timers.

\- Showing all DOM/timer events in the console.

\- Recording a DOM tree, and diffing it with a later recording.

~~~
Jakob
Re stopping timers: The timer id is afaik just a steadily increasing number
starting at 1 which is returned by setTimeout() so you can iterate through
them, e.g. to stop all:

    
    
      for (let i=1; i++; i<=setTimeout('')) {
        clearTimeout(i);
      }
    

Though that’s an implementation detail which could change in the future since
the spec seems to not enforce it.

~~~
dspillett
It might be safer to loop in reverse:

    
    
        for (let i=setTimeout(''); i--; i>=0) {
            clearTimeout(i);
        }
    

That way if the optimiser decides not to optimise such that the termination
condition doesn't call setTimeout() every iteration, you don't end up with an
infinite loop because the result of setTimeout('') ends up incrementing in-
step with the value of i.

That advantage of browser support, assuming it was internal support and not
tacked on in the dev-tools, would be that they could implement a toggle so the
timers can be reactivated after you've finished checking what they were
getting in the way of.

[note: interval timers may need to be considered as well as timeout timers,
unless they use the same ID counter with not type checking so either can be
turned off by either clearTimeout() or clearInterval() - again that may be an
implementation detail that varies between browsers]

~~~
Jakob
Good catch on the reverse loop, you’re right.

------
JepZ
Not bad, but as I recently switched to FF as my primary browser, such posts
would be more useful to me if they were written for the Firefox DevTools ;-)

~~~
vijaybritto
FF is my primary browser for actual browsing. Love the new one. But for
development its Chrome always. Nothing else comes close IMO.

~~~
JepZ
I still like the Chrome DevTools a bit better, but always switching the
browsers sucks too, so I try to learn using the FF tools.

And for example the CSS grid tools are something I haven't seen in chrome yet
and they work very well in FF. On the other hand, the Serviceworker tool set
is much better in chrome than in FF.

~~~
vijaybritto
Css grid?? That's too advanced for my work or side projects now. I'm still
learning flexbox :D I need chrome for js debugging and profiling

------
agnivade
Great stuff !

