A List of Chrome DevTools Tips and Tricks | Hacker News Reader

A List of Chrome DevTools Tips and Tricks

flaviocopes.com

188 pointsfagnerbrack28 comments

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.

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';}}})();

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

if I'm imagining the right thing (never used the Firefox tool) chrome does have this. it's in renderer layers or something like that (not at my computer). it pegs my i7 every time I try to use it so I don't use it much.

When I started learning iOS development, I was always surprised at how often I ended up leaning on Xcode's version of this tool. It's surprisingly useful for debugging hierarchies, but that may be something more specific to iOS development than for web development.

My favorite tip:

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

Da-umn!

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.

Here you have +100 more: https://umaar.com/dev-tips/

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.

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

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

> 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.

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).

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...

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

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.

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.

That happens to be how common browsers have implemented it but the spec does not guarantee it:

> Let handle be a user-agent-defined integer that is greater than zero that will identify the timeout to be set by this call in the list of active timers.

https://dev.w3.org/html5/spec-preview/timers.html

Edit: Just noticed your edit.

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]

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

> Freezing of all DOM events after X seconds

Using the debugger for this has been helpful for me in some cases: Hit F8 (pause JS execution) when you want to freeze the state, and some browsers stop any kind of operation, inluding CSS hover states and so on.

I'm usually working in either Firefox or Chrome, so one of them should work that way (not sure which). You should just make sure dev tools are open, and maybe be on the debugger tab.

Thanks for the tip!

F8 doesn't seem to work on my Firefox, but I found the "Pause" feature on the Debugger tab.

IMO this should be a top-level user feature. Almost every day I have situations in which wish I'd be able to quickly pause JS execution on a website.

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 ;-)

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

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.

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

Great stuff !

Reply on news.ycombinator.com