
Chrome Devtools Tips and Tricks - molsson
http://mo.github.io/2015/10/19/chrome-devtools.html
======
afarrell
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/14174a95a597cac7b848fe...](https://github.com/nodejs/node/commit/14174a95a597cac7b848fe4b3e439814390d6ec6#diff-38574c080d4e2eb38c49b86e6588ad98R64)

~~~
luv2code
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-
co...](https://www.visualstudio.com/en-us/products/visual-studio-community-
vs.aspx)

[2]
[https://github.com/Microsoft/nodejstools](https://github.com/Microsoft/nodejstools)

[3] [https://code.visualstudio.com/](https://code.visualstudio.com/)

~~~
afarrell
Which CLI debugger are you talking about? I thought one didn't exist

~~~
drifkin
It has a built-in debugger that you start using `node debug /path/to/script`.
See more here:
[https://nodejs.org/api/debugger.html](https://nodejs.org/api/debugger.html)

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

~~~
bzbarsky
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
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
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. ;)

~~~
simula67
Maybe I should go more into detail. The problem we had was that some charts
and graphs in our application was not showing up only on Firefox ESR 38.3.
Examination of the problem revealed that rickshaw was not loaded. The console
had thrown an error from rickshaw.js saying that d3 was not loaded. But
rickshaw.js was not available in debugger console !

The reason I did not raise a bugzilla was because the issue was intermittent (
! ) and also I cannot share the whole application user interface with
outsiders yet. Anyway, my working conjuncture is that these files are loaded
from callbacks of AJAX requests and the problem happens when the callback for
loading rickshaw fires before the callback for loading d3 has had a chance to
fire. We ended up loading d3 manually as a workaround. But it is important to
show rickshaw.js in the debugger since it enables us to set breakpoints there.

~~~
bzbarsky
Hmm. The bug you link to was fixed in 36, so in 38.3 you're seeing a different
problem.

I understand the difficulty in filing bug reports on pages that you can't show
people yet. If you get to a point where you _can_ show it to people (even just
a limited set, not the whole world), and you're still running into the
problem, the bug report would be very much appreciated.

~~~
simula67
OK. Thanks for your response regarding this.

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

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

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

------
umaar
Some more tips on Chrome DevTools here: [https://umaar.com/dev-
tips/](https://umaar.com/dev-tips/)

~~~
timrichard
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
Appreciated, glad you enjoy them.

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

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

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

~~~
ingenieros
Addy Osmani is a great resource as well:
[https://plus.google.com/+AddyOsmani/posts](https://plus.google.com/+AddyOsmani/posts)

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

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

------
lostPixels
> "Just like atom"

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

~~~
scott_karana
It's "like" both editors. He's not attributing its origin, just comparing the
feature.

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

