6 ms·

Chrome Devtools Tips and Tricks

293 points by molsson 11y ago

mattwad 11y ago
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.
- curveship 11y ago
  Also, if you're paused at a wait point, the console has access to local scope, so you often don't even need to create a global variable, just start using the local ones directly.
- glitchdout 11y ago
  Yup. You can then use the copy command on that variable so you can paste and view the large array or json in your text editor of choice. `copy(temp1)`
afarrell 11y ago
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/ https://www.jetbrains.com/webstorm/ [2] https://github.com/nodejs/node/commit/14174a95a597cac7b848fe4b3e439814390d6ec6#diff-38574c080d4e2eb38c49b86e6588ad98R64 https://github.com/nodejs/node/commit/14174a95a597cac7b848fe...
- jxm262 11y ago
  > node.js requires that you use the browser for debugging wat? :/ Node.js does not require you to use the browser for debugging. But you're probably referring to node-inspector, which uses Chrome or Opera. I personally find webstorm to be wayyy easier debugging node unit tests specifically.
  - afarrell 11y ago
    ~~Is webstorm usable outside a jetbrains product? In particular, on a headless server?~~ EDIT: That was a dumb question. This IDE looks pretty cool. I'll check it out. But I still want something that I can run headless.
    - luv2code 11y ago
      Since debugging is over a TCP connection, you only have to start the nodejs process with the debug flag, and then plug the address and port into whatever debugger you're trying to use.
    - timrichard 11y ago
      In addition to the standard debugger, WebStorm also give you SpyJS for Node[1], which is a Tracer/Reverse debugger. [1] http://blog.jetbrains.com/webstorm/2014/08/tracing-debugging-and-profiling-node-js-with-spy-js/ http://blog.jetbrains.com/webstorm/2014/08/tracing-debugging...
- luv2code 11y ago
  Also, visual studio community edition is free[1] can debug nodejs with an extension[2]. And the capability is integrated into VS Code[3] which works cross-platform. Those and webstorm/intellij are the ones I have experience with. But most of the time, I just use the CLI debugger -- it's not hard. [1] https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx https://www.visualstudio.com/en-us/products/visual-studio-co... [2] https://github.com/Microsoft/nodejstools https://github.com/Microsoft/nodejstools [3] https://code.visualstudio.com/ https://code.visualstudio.com/
bsimpson 11y ago
Nice list of new niceties in Dev Tools. Thanks for sharing!
lewisl9029 11y ago
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.
jxm262 11y ago
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 https://github.com/jxm262/consoletap
- tommyd 11y ago
  This is a great tip, thanks! Using it to store this snippet which invokes the debugger when something tries to redirect you from the page, allowing you to inspect the state and any network requests (last time I checked, "preserve log on navigation" was buggy and didn't preserve all details of the request from a previous page): window.addEventListener("beforeunload", function() { debugger; }, false)
hammerha 11y ago
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/pbmmieigblcbldgdokdjpioljjninaim https://chrome.google.com/webstore/detail/visual-event/pbmmi...
est 11y ago
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)
- avel 11y ago
  It has been fixed in unstable / canary. The selection is now inside an overflow menu. Which brings me to another tip: in a multi-head setup, having devtools in an undocked window in a separate screen is very nice.
mattchamb 11y ago
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.
simula67 11y ago
>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.
- mandeepj 11y ago
  You can also use brackets editor to see the source of css styles for a particular element
- bzbarsky 11y ago
  If you happen to have a link to a page where the Firefox devtools are not doing what they should, and happen to remember which version of Firefox you were running at the time, I would very much appreciate that!
  - simula67 11y ago
    It is already present in Mozilla bugzilla : https://bugzilla.mozilla.org/show_bug.cgi?id=1044522 https://bugzilla.mozilla.org/show_bug.cgi?id=1044522
    - bzbarsky 11y ago
      That bug is marked as a duplicate of a bug that's been fixed for close to a year now. So either you're seeing a different issue, or your recent experience wasn't all that recent. If it's the former, I really would appreciate more details so we can fix it; if it's the latter, give it another shot. ;)
      - 11y ago
lostPixels 11y ago
> "Just like atom" No, just like Sublime Text. Atom copied these features and shortcuts from ST.
- ViViDboarder 11y ago
  Or like TextMate? Not sure which came first now.
- scott_karana 11y ago
  It's "like" both editors. He's not attributing its origin, just comparing the feature.
umaar 11y ago
Some more tips on Chrome DevTools here: https://umaar.com/dev-tips/ https://umaar.com/dev-tips/
- timrichard 11y ago
  Hi Umar, I subscribed a little while ago after discovering some of your tips on Twitter. They've been really useful, especially with the animated GIFs... thanks very much for making them.
  - umaar 11y ago
    Appreciated, glad you enjoy them.
jsvaughan 11y ago
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.
otar 11y ago
Paul Irish (https://news.ycombinator.com/user?id=paulirish https://news.ycombinator.com/user?id=paulirish) should write a book about this topic.
- ingenieros 11y ago
  Addy Osmani is a great resource as well: https://plus.google.com/+AddyOsmani/posts https://plus.google.com/+AddyOsmani/posts

293 points by molsson 11y ago

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.

curveship 11y ago
Also, if you're paused at a wait point, the console has access to local scope, so you often don't even need to create a global variable, just start using the local ones directly.
glitchdout 11y ago
Yup. You can then use the copy command on that variable so you can paste and view the large array or json in your text editor of choice. `copy(temp1)`

afarrell 11y ago

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/ https://www.jetbrains.com/webstorm/ [2] https://github.com/nodejs/node/commit/14174a95a597cac7b848fe4b3e439814390d6ec6#diff-38574c080d4e2eb38c49b86e6588ad98R64 https://github.com/nodejs/node/commit/14174a95a597cac7b848fe...

jxm262 11y ago
> node.js requires that you use the browser for debugging wat? :/ Node.js does not require you to use the browser for debugging. But you're probably referring to node-inspector, which uses Chrome or Opera. I personally find webstorm to be wayyy easier debugging node unit tests specifically.
- afarrell 11y ago
  ~~Is webstorm usable outside a jetbrains product? In particular, on a headless server?~~ EDIT: That was a dumb question. This IDE looks pretty cool. I'll check it out. But I still want something that I can run headless.
  - luv2code 11y ago
    Since debugging is over a TCP connection, you only have to start the nodejs process with the debug flag, and then plug the address and port into whatever debugger you're trying to use.
  - timrichard 11y ago
    In addition to the standard debugger, WebStorm also give you SpyJS for Node[1], which is a Tracer/Reverse debugger. [1] http://blog.jetbrains.com/webstorm/2014/08/tracing-debugging-and-profiling-node-js-with-spy-js/ http://blog.jetbrains.com/webstorm/2014/08/tracing-debugging...
luv2code 11y ago
Also, visual studio community edition is free[1] can debug nodejs with an extension[2]. And the capability is integrated into VS Code[3] which works cross-platform. Those and webstorm/intellij are the ones I have experience with. But most of the time, I just use the CLI debugger -- it's not hard. [1] https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx https://www.visualstudio.com/en-us/products/visual-studio-co... [2] https://github.com/Microsoft/nodejstools https://github.com/Microsoft/nodejstools [3] https://code.visualstudio.com/ https://code.visualstudio.com/

bsimpson 11y ago

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

lewisl9029 11y ago

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.

jxm262 11y ago

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 https://github.com/jxm262/consoletap

tommyd 11y ago
This is a great tip, thanks! Using it to store this snippet which invokes the debugger when something tries to redirect you from the page, allowing you to inspect the state and any network requests (last time I checked, "preserve log on navigation" was buggy and didn't preserve all details of the request from a previous page): window.addEventListener("beforeunload", function() { debugger; }, false)

hammerha 11y ago

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/pbmmieigblcbldgdokdjpioljjninaim https://chrome.google.com/webstore/detail/visual-event/pbmmi...

est 11y ago

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)

avel 11y ago
It has been fixed in unstable / canary. The selection is now inside an overflow menu. Which brings me to another tip: in a multi-head setup, having devtools in an undocked window in a separate screen is very nice.

mattchamb 11y ago

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.

simula67 11y ago

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

mandeepj 11y ago
You can also use brackets editor to see the source of css styles for a particular element
bzbarsky 11y ago
If you happen to have a link to a page where the Firefox devtools are not doing what they should, and happen to remember which version of Firefox you were running at the time, I would very much appreciate that!
- simula67 11y ago
  It is already present in Mozilla bugzilla : https://bugzilla.mozilla.org/show_bug.cgi?id=1044522 https://bugzilla.mozilla.org/show_bug.cgi?id=1044522
  - bzbarsky 11y ago
    That bug is marked as a duplicate of a bug that's been fixed for close to a year now. So either you're seeing a different issue, or your recent experience wasn't all that recent. If it's the former, I really would appreciate more details so we can fix it; if it's the latter, give it another shot. ;)
    - 11y ago

lostPixels 11y ago

> "Just like atom" No, just like Sublime Text. Atom copied these features and shortcuts from ST.

ViViDboarder 11y ago
Or like TextMate? Not sure which came first now.
scott_karana 11y ago
It's "like" both editors. He's not attributing its origin, just comparing the feature.

umaar 11y ago

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

timrichard 11y ago
Hi Umar, I subscribed a little while ago after discovering some of your tips on Twitter. They've been really useful, especially with the animated GIFs... thanks very much for making them.
- umaar 11y ago
  Appreciated, glad you enjoy them.

jsvaughan 11y ago

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.

otar 11y ago

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

ingenieros 11y ago
Addy Osmani is a great resource as well: https://plus.google.com/+AddyOsmani/posts https://plus.google.com/+AddyOsmani/posts