
Chrome DevTools could do that? - lysol
http://www.igvita.com/slides/2012/devtools-tips-and-tricks/
======
skeletonjelly
Going to make a top level comment about the slide tools.

I just used the Chrome Web Inspector (!) to look at the JS libraries, search
for the credited authors of the obviously named file and found this:

[https://plus.google.com/118075919496626375791/posts/LG93tTdJ...](https://plus.google.com/118075919496626375791/posts/LG93tTdJYLy)

Which leads to this:

<http://code.google.com/p/io-2012-slides/>

Which has this code: <http://code.google.com/p/io-2012-slides/source/browse/>

And this dog food demo:
<http://io-2012-slides.googlecode.com/git/template.html>

Looks great for doing a talk about code. Has a few features for highlighting
code, handling links etc

~~~
naavinm
Sweet, thanks.

------
kevingadd
WARNING: This presentation seems to crash Firefox for me. Had to view it in
Chrome. Anyway...

"Disable cache to (re)gain some sanity" because Chrome continues to cache
things it shouldn't, including _the contents of file:// URLs_ and in some
cases, even content with headers that specify it shouldn't be cached.

mumble grumble

Cool to see some of these features finally documented, though. I had no idea
you could drag-drop elements to reorder them.

For those looking to try out the (useful!) Heap Snapshot tool, please be aware
that it has a bad habit of crashing tabs. It tends to happen the most when a
tab is already using a lot of memory, but sometimes it just happens. So don't
do it on a tab that contains any state you might want to hang onto.

One cool feature they don't mention: You can edit code in the script debugger
and then hit ctrl+s to update it live in the running page. It's pretty useful
for experimenting or for adding tracing points to existing code.

~~~
mnemonik
What release channel of Firefox are you running? I had no problems in Aurora.

~~~
kevingadd
Aurora 17.0a2 (2012-10-02). I assume it's probably GPU acceleration related.

~~~
jey
Running _Aurora_ and warning that it crashes "Firefox" is a bit alarmist.

Worked fine for me with whatever the latest Firefox Beta is (from
ppa:mozillateam/firefox-next).

------
zaroth
This just goes to show how far we've come, and oh how far we still have to go.
For the hackers who live and breathe by these tools, I salute you.

Some products absolutely depend on pushing the envelope of 'what is possible
in the browser'. These trailblazers ultimately spend incredible amounts of
effort achieving their desired effect, which a year later will be nicely
packaged in an MIT-licensed, open source JS lib you can call with a single
line of code.

But one look at my feature roadmap tells me exactly when I'll have the time to
analyze HAR files, tweak how often I flush packets, stare at paint rectangles,
or write some Chrome devtool plugins -- that would be... NEVER.

~~~
igrigorik
And that may be just fine for your product. Having said that, I'm a big
proponent of treading speed as a feature - evaluate it, quantify it, and
prioritize it as such. Then, you may have the time to use these tools :-)

------
ludwigvan
Here's something that I believe, should be included in dev tools: Click on a
node, and see all event handlers that are attached to that node (and those
attached using jQuery).

Does anyone know if this is possible using Dev Tools? There is a bookmarklet
Visual Event2 (<http://www.sprymedia.co.uk/article/Visual+Event+2>) that does
this, sort of; but it is still lacking.

~~~
xxbondsxx
It's possible, but not trivial. Especially when the developer is using 100%
event delegation, you have to run that node against all the potential
selectors of parent elements...

~~~
AlexMcP
This is the main issue with trying to catalogue event handlers. Backbone.js,
and savvy jQuery developers won't use bind for any sort of dynamic pages,
because it's too hard to track handlers and make sure they're rebound properly
as the DOM updates. The best solution is to use .on, which generally (argument
specific) will set up a listener on a PARENT element of the selector you've
put in.

.live() .delegate() and (usually) .on() will leave the handler on a parent
node, making sniffing out all active handlers an expensive DOM-walking task.

~~~
hoppipolla
Yes, but there is still a node that has an event listener on, and it is quite
possible to display that in developer tools. Opera Dragonfly already does
this, for example. What's not possible is for the browser to know that the
event handler on element A only has any effect if the event occurs on
descendant elements B and C, for example.

Given this limitation, the only problem with displaying event handlers is that
developers who don't understand the underlying event model of the platform
might not grasp the correspondence between the high-level abstractions in
their library-using code and the low level DOM behaviour. Clearly any such
developers will become more effective once they know a little more about the
platform they are working on.

------
wmf
If you're confused by the _total lack of UI_ , try the arrow keys (facepalm?).

~~~
fletchowns
Spacebar and arrow keys control the slides, just like in every spreadsheet
application, ever.

~~~
michaelkscott
I think you meant presentation (as in powerpoint) not spreadsheet (as in
excel).

~~~
fletchowns
Yep, whoops :)

------
statictype
Crap, there's a lot of useful stuff in there.

The paint rectangles thing is amazing. I didn't know browsers even expose this
data.

The Audit API looks really useful too. I'm now thinking of standardizing on
Chrome as the development browser for our team (most devs prefer it anyway) so
we can share custom development tool add-ons.

~~~
mbrubeck
Firefox also has a way to expose invalidation rectangles:

<http://www.junglecode.net/?p=110>

------
EliAndrewC
Can someone explain TCP Preconnect? My Google-fu has failed me - I understand
that DNS prefetching is when Chrome notices that there are links to other
domains so it resolves the IP addresses of those domains ahead of time so that
their pages will load slightly faster if the user clicks on them. But I'm not
clear about TCP preconnecting; are they literally downloading the contents of
those pages in advance? Or are they merely opening a connection to the server
in case you click on the link so that they'll be able to send the HTTP request
slightly faster?

Can someone explain TCP Preconnect? My Google-fu has failed me - I understand
that DNS prefetching is when Chrome notices that there are links to other
domains so it resolves the IP addresses of those domains ahead of time so that
their pages will load slightly faster if the user clicks on them. But I'm not
clear about TCP preconnecting; are they literally downloading the contents of
those pages in advance? Or are they merely opening a connection to the server
in case you click on the link so that they'll be able to send the HTTP request
slightly faster?

EDIT: I eventually found a link to
<http://code.google.com/p/chromium/issues/detail?id=42694> which indicates
that Chrome does indeed open connections to servers and doesn't immediately
send an HTTP request, leaving those connections open in case we do need to
send HTTP requests.

~~~
igrigorik
I have a writeup on some of the chrome network internals here:
[http://www.igvita.com/2012/06/04/chrome-networking-dns-
prefe...](http://www.igvita.com/2012/06/04/chrome-networking-dns-prefetch-and-
tcp-preconnect/)

As you found in the code above.. the idea is simply to complete the TCP
handshake and keep the connection idle until the request is ready to be
dispatched. Doing so allows Chrome to shave off one RTT (TCP handshake) of
latency.

------
hadem
The UI for this is terrible. The bullet points are incredibly brief to the
point I'm confused about the information it is telling me. How do it actually
see the information in the "Sources" pane? It is an overlay but there is no
description of how to see it...

Am I missing something?

~~~
k3n
Yes, I think you missed the live event where this was used as a deck to go
along with a presenter -- which, of course, is notably absent here. I'm fairly
certain that those abbreviated bullet points were extrapolated on when the
presentation was given live.

------
tech-no-logical
site doesn't work in opera (either regular or opera new).

    
    
      Uncaught exception: TypeError: Cannot convert 'document.body' to object
      Error thrown at line 38, column 375 in <anonymous function>() in http://www.igvita.com/slides/2012/devtools-tips-and-tricks/js/slide-deck.js:
        Modernizr.load({test:!!document.body.classList&&!!document.body.dataset,nope:['js/polyfills/classList.min.js','js/polyfills/dataset.min.js'],complete:function(){window.slidedeck=new SlideDeck();}});
      called from line 38, column 181 in http://www.igvita.com/slides/2012/devtools-tips-and-tricks/js/slide-deck.js:
        (function(){Modernizr.load({test:!!document.body.classList&&!!document.body.dataset,nope:['js/polyfills/classList.min.js','js/polyfills/dataset.min.js'],complete:function(){window.slidedeck=new SlideDeck();}});})()

------
bgrins
Remote debugging is so useful: [http://www.igvita.com/slides/2012/devtools-
tips-and-tricks/#...](http://www.igvita.com/slides/2012/devtools-tips-and-
tricks/#28). It is painful to try and make and test changes on mobile devices
without developer tools.

I wonder when this will be available for iOS.

~~~
felixthehat
It's pretty amazing from Safari to plugged in iPhone in iOS6 using the new
remote debugging. I have to mention coda2 & diet coda airpreview for iPad
specific live debugging too, and Adobe's new edge inspect works well too (I've
been using all three today for a responsive iOS site)

[http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-develope...](http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers)
(see last point) <http://teamsoell.com/andy/dietcoda>
<http://html.adobe.com/edge/inspect/>

------
niyazpk
For some reason even after multiple tries over the years I have never been
able to get "Break on subtree modifications" and similar to work reliably. I
think I must be doing something wrong, but I don't know what. Anybody else
have had issues with this?

------
rurounijones
While not the presentation for these exact Tips'n'tricks slides, the google
guys cover most of this in the following video:

[http://confreaks.com/videos/886-railsconf2012-let-s-make-
the...](http://confreaks.com/videos/886-railsconf2012-let-s-make-the-web-
faster-tips-from-trenches-google)

(The Chrome Dev tools stuff kicks in about 20 minute)

~~~
Torn
The Velocity 2012 videos are being added to the following page, the video to
back the talk should be up in a day or three:
[http://velocityconf.com/velocityeu2012/public/schedule/proce...](http://velocityconf.com/velocityeu2012/public/schedule/proceedings)

------
umaar
I posted a tutorial about Chrome Dev Tools recently, it's a bit long though
[http://net.tutsplus.com/tutorials/tools-and-tips/chrome-
dev-...](http://net.tutsplus.com/tutorials/tools-and-tips/chrome-dev-tools-
markup-and-style/)

~~~
cynwoody
Thanks. That's great!

------
d70
Dumb question here ... is there a visual tool to create browser-based slides
like this or people just pretty much hand code each slide? I know there are
libs out there like impress.js.

~~~
skeletonjelly
[https://plus.google.com/118075919496626375791/posts/LG93tTdJ...](https://plus.google.com/118075919496626375791/posts/LG93tTdJYLy)

------
smagch
For people who are not familiar with Devtools

"A Re-introduction to the Chrome Developer Tools" by Paul Irish

[http://paulirish.com/2011/a-re-introduction-to-the-chrome-
de...](http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-
tools/)

"7 MINUTE VIDEOS: JAVASCRIPT CONSOLE PROTIPS & NEWISH DOM APIS" by Paul Irish

[http://updates.html5rocks.com/2011/09/7-minute-videos-
Javasc...](http://updates.html5rocks.com/2011/09/7-minute-videos-Javascript-
Console-Protips-newish-DOM-APIs)

------
ljoshua
Great resource, adding on top of other hard-to-find resources that others had
pointed out before. (Nice use of a presentation in the browser too.)

------
molmalo
Can someone explain me this, please:

-Break on subtree modifications - delete me

Thanks!

~~~
molmalo
Ok, I understood this,

1- Right click on the element

2- Select "Break On..."

3- For this example, check "Node Removal"

4- Click 'delete me' :)

5- Use the call stack to see where the removal comes from.

Useful link: Google IO session about this:
[http://danesparza.net/2011/06/a-re-introduction-to-the-
chrom...](http://danesparza.net/2011/06/a-re-introduction-to-the-chrome-dev-
tools/)

------
dhucerbin
On slide 27 [1] it's shown that I can customize colors of Elements pane. It's
possible to customize Sources panel? Would be cool to have solarized theme
here.

[1] [http://www.igvita.com/slides/2012/devtools-tips-and-
tricks/#...](http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#27)

~~~
igrigorik
Yup, I believe there are CSS selectors for that as well. The best way to play
with it is to checkout the devtools source and take a look at the default
structure: [https://developers.google.com/chrome-developer-
tools/docs/co...](https://developers.google.com/chrome-developer-
tools/docs/contributing)

------
antihero
This is _exactly_ what I've been looking for - I'm really interested in
helping a friend make some of his slow sites fast, and making some of my own
sites even faster. There's so much I didn't understand about the page render
process and this helps massively!

------
mmahemoff
I never noticed the setting to show color "as authored" before. Normally,
devtools converts RGB or HSL colors to hex, so you can't copy tweaks back to
the source code. Leaving the color alone is how I'll have my devtools now.

------
neerajdotname2
What tools is used to build this presentation ? Is it open source ?

~~~
skeletonjelly
You should use the Chrome web inspector to dig around ;)

[https://plus.google.com/118075919496626375791/posts/LG93tTdJ...](https://plus.google.com/118075919496626375791/posts/LG93tTdJYLy)

<http://code.google.com/p/io-2012-slides/>

------
qntmfred
let me know when it can <http://stackoverflow.com/q/4911338/55948>

------
mclemme
Was at the talk and what really looked useful was the HAR stuff (HTTP
archive), see httparchive.org

~~~
igrigorik
Confusingly enough, HTTPArchive.org, and HAR the file format are two different
projects (although one depends on the other).

httparchive.org - captures web trends
<http://www.softwareishard.com/blog/har-12-spec/> \- HAR file format

------
wlue
Nice to see a PonyDebugger mention here. :)

------
minikomi
BRB off to write a ton of custom panels :)

Great slides.

------
induscreep
dat navigation controls...

------
chris_mahan
And to think that if they didn't use javascript at all the page would be even
faster...

