
Show HN: A curated list of Chrome DevTools tips and tricks - jefkoslowski
http://devtoolstips.com/
======
gibbitz
Some nice tips in here. I had no idea multiple cursors were supported. I now
live in the future!

Would be good to know the cross-platform support for these features without
testing them though. No "cmd" key in Linux :( (though, the ctrl key works as
expected)

~~~
jefkoslowski
Thanks for your feedback, I will do that.

------
vlunkr
[http://www.briangrinstead.com/blog/chrome-developer-tools-
mo...](http://www.briangrinstead.com/blog/chrome-developer-tools-
monitorevents)

I didn't know about monitorEvents, it's really nice! This link has more
details about what events you can monitor.

------
michaelmcmillan
Chrome Devtools has basically become my main tool when I do web development. I
honestly can't imagine what I did before Chrome was around.

~~~
billyhoffman
You probably used Firefox + Firebug and couldn't believe you used to do
development without them.

Before Firefox + Firebug though? Well, you probably have suppressed the
memories about using alert() calls for debugging through your tears. :-)

~~~
JeremyMorgan
You nailed it.

alert("1"); alert("2"); alert("we got here");

Ah, I don't have fond memories of those days.

------
umaar
Nice.

FYI: I infrequently post some of these tips to Google+:
[https://plus.google.com/+UmarHansa](https://plus.google.com/+UmarHansa) with
detailed descriptions. Also on Twitter:
[https://twitter.com/umaar](https://twitter.com/umaar) with less description.

------
exhilaration
The second item, Command + Click on CSS, isn't showing your example image:
[http://devtoolstips.com/image/99439992616](http://devtoolstips.com/image/99439992616)

This is on both Safari and Chrome on OS X.

~~~
jefkoslowski
Thats odd. Removed for now, I will create a smaller gif or video. Thanks.

~~~
jefkoslowski
Just uploaded a new smaller gif, it's working now.

------
Igglyboo
monitorEvents is really awesome.

Would really like a little writeup on each of these to accompany the gif,
couldn't quite figure out the "copy an object to the clipboard" one.

~~~
jefkoslowski
Thanks, I will work on it.

~~~
hamburglar
In general, some very brief text describing things beyond just an animated GIF
would be really helpful. I spent a long time watching the eyedropper one over
and over, trying to figure out what exactly you did to get the eyedropper to
show up. It doesn't help that this is apparently a feature that's only in
canary for now (I'd avoid that, or at least call it out explicitly), but even
ignoring that, trying to get instruction by watching a dot flick around
unpredictably in a screenshot is difficult/inefficient.

edit: great idea for a site, though. I've subscribed to your RSS.

------
lobster_johnson
Anyone know of a better way to get proper JSON out of something emitted to the
console? The "store as global variable" \+ copy($_) is ridiculous.

------
tobeportable
I don't see a way to suggest a tip or trick.

My ah ha moment was when i discovered the usage of :' debugger; ' in a.js with
inspector open

~~~
jefkoslowski
Added to my todo list, thanks.

------
dccoolgai
My personal favorite is debug(function_name). Creates a breakpoint at the
beginning of the function. I use it almost daily.

------
ufmace
That one where you click on the curly braces to auto-de-minify is awesome!

------
Cthulhu_
Why does this page use .gifs instead of HTML video? :'(

~~~
jefkoslowski
Sorry about that. I will try to convert everything to video on the next week.

~~~
superasn
You can also try using gfycat.com to do this automatically.

~~~
jefkoslowski
Amazing, great tip! Thanks.

