Chrome Devtools Tips and Tricks (opens in new tab)

The author's frustration with the lack of customizable shortcuts is my biggest issue with chrome devtools as well. This is especially frustrating when I just want to pop a debugger statement in the middle of a node.js unit test so I can step through things, but node.js requires that you use the browser for debugging. (EDIT: apparently there is an IDE from jetbrains[1] that lets you do this too) This past Friday I started poking around to see what it would take to write a terminal-based browser in the style of the python debugger and found that the v8 team at Google has been working making the debugger separable from the browser since at least February of this year[2].

[1] https://www.jetbrains.com/webstorm/

[2] https://github.com/nodejs/node/commit/14174a95a597cac7b848fe...

>The little magnifier glass icon that shows you which CSS class/selector in what CSS file that ultimately decides the styling for a specific element and CSS property.

FML. I hope this is a recent feature, I have wasted so much time missing something like this while trying to reskin a fairly large web app.

I suspect that Chrome devtools is so good because Google has access to a large number of web developers within the company to directly talk to. Chrome seems to have a solution for all the problems that developers face. My recent experiences with Firefox devtools has been bad. Specifically Firefox was not displaying js files loaded dynamically ( through require() ) in the debugger even though they were present in the page inspector.

My latest find: if you right-click a variable that was output in the developer console, you can choose "Create Global Variable" to access it. It's super-useful combined with lodash to inspect large arrays of elements, for example.

Some more tips on Chrome DevTools here: https://umaar.com/dev-tips/

> "Just like atom"

No, just like Sublime Text. Atom copied these features and shortcuts from ST.

I've been using chrome since it's beginning but just recently really digging into it. There's a ton of cool stuff in it. Just recently discovered the "snippets" section which lets you save a piece of js code and rerun it whenever you want (under Sources -> Snippets -> rightClick - add).

I'm also working on my first chrome extension if anyone's interested in helping or could give some feature requests/advice. https://github.com/jxm262/consoletap

Paul Irish (https://news.ycombinator.com/user?id=paulirish) should write a book about this topic.

Another tip: you can click and hold the "dock" icon in the upper right corner. You can't right-click it.

(I never understand the UI design paradigm here)

Something that saved me a lot of time recently is that from the network request list, you can right click the request and "Copy as cURL" to get a full cURL equivalent command of the request.

You can format minified js code by clicking the pair of curly braces in the bottom left corner of the source window. This has saved me a lot of headaches.

In terms of finding code that runs when clicking something, there's a extension Visual Event which works really well. https://chrome.google.com/webstore/detail/visual-event/pbmmi...

I just recently found out about Chrome Devtools' multiple cursor support by accident, and didn't know about the navigation shortcuts at all until now.

Once it gets shortcuts customization support, I think I might try to use it as my main editor for a while and see how that works out. I have it open almost constantly during development anyways, so using it as an editor would get rid of that redundant dedicated editor window and streamline my workflow by quite a bit.

Nice list of new niceties in Dev Tools. Thanks for sharing!