Chrome DevTools could do that?

Going to make a top level comment about the slide tools.<p>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:<p><a href="https://plus.google.com/118075919496626375791/posts/LG93tTdJYLy" rel="nofollow">https://plus.google.com/118075919496626375791/posts/LG93tTdJ...</a><p>Which leads to this:<p><a href="http://code.google.com/p/io-2012-slides/" rel="nofollow">http://code.google.com/p/io-2012-slides/</a><p>Which has this code: <a href="http://code.google.com/p/io-2012-slides/source/browse/" rel="nofollow">http://code.google.com/p/io-2012-slides/source/browse/</a><p>And this dog food demo: <a href="http://io-2012-slides.googlecode.com/git/template.html" rel="nofollow">http://io-2012-slides.googlecode.com/git/template.html</a><p>Looks great for doing a talk about code. Has a few features for highlighting code, handling links etc

WARNING: This presentation seems to crash Firefox for me. Had to view it in Chrome. Anyway...<p>"Disable cache to (re)gain some sanity" because Chrome continues to cache things it shouldn't, including <i>the contents of file:// URLs</i> and in some cases, even content with headers that specify it shouldn't be cached.<p>mumble grumble<p>Cool to see some of these features finally documented, though. I had no idea you could drag-drop elements to reorder them.<p>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.<p>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.

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

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).<p>Does anyone know if this is possible using Dev Tools? There is a bookmarklet Visual Event2 (<a href="http://www.sprymedia.co.uk/article/Visual+Event+2" rel="nofollow">http://www.sprymedia.co.uk/article/Visual+Event+2</a>) that does this, sort of; but it is still lacking.

If you're confused by the <i>total lack of UI</i>, try the arrow keys (facepalm?).

Crap, there's a lot of useful stuff in there.<p>The paint rectangles thing is amazing. I didn't know browsers even expose this data.<p>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.

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?<p>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?<p>EDIT: I eventually found a link to <a href="http://code.google.com/p/chromium/issues/detail?id=42694" rel="nofollow">http://code.google.com/p/chromium/issues/detail?id=42694</a> 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.

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...<p>Am I missing something?

site doesn't work in opera (either regular or opera new).<p><pre><code> Uncaught exception: TypeError: Cannot convert 'document.body' to object Error thrown at line 38, column 375 in &#60;anonymous function&#62;() in http://www.igvita.com/slides/2012/devtools-tips-and-tricks/js/slide-deck.js: Modernizr.load({test:!!document.body.classList&#38;&#38;!!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&#38;&#38;!!document.body.dataset,nope:['js/polyfills/classList.min.js','js/polyfills/dataset.min.js'],complete:function(){window.slidedeck=new SlideDeck();}});})()</code></pre>

Remote debugging is so useful: <a href="http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#28" rel="nofollow">http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#...</a>. It is painful to try and make and test changes on mobile devices without developer tools.<p>I wonder when this will be available for iOS.

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?

While not the presentation for these exact Tips'n'tricks slides, the google guys cover most of this in the following video:<p><a href="http://confreaks.com/videos/886-railsconf2012-let-s-make-the-web-faster-tips-from-trenches-google" rel="nofollow">http://confreaks.com/videos/886-railsconf2012-let-s-make-the...</a><p>(The Chrome Dev tools stuff kicks in about 20 minute)

I posted a tutorial about Chrome Dev Tools recently, it's a bit long though <a href="http://net.tutsplus.com/tutorials/tools-and-tips/chrome-dev-tools-markup-and-style/" rel="nofollow">http://net.tutsplus.com/tutorials/tools-and-tips/chrome-dev-...</a>

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.

For people who are not familiar with Devtools<p>"A Re-introduction to the Chrome Developer Tools" by Paul Irish<p><a href="http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/" rel="nofollow">http://paulirish.com/2011/a-re-introduction-to-the-chrome-de...</a><p>"7 MINUTE VIDEOS: JAVASCRIPT CONSOLE PROTIPS &#38; NEWISH DOM APIS" by Paul Irish<p><a href="http://updates.html5rocks.com/2011/09/7-minute-videos-Javascript-Console-Protips-newish-DOM-APIs" rel="nofollow">http://updates.html5rocks.com/2011/09/7-minute-videos-Javasc...</a>

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

Can someone explain me this, please:<p>-Break on subtree modifications - delete me<p>Thanks!

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.<p>[1] <a href="http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#27" rel="nofollow">http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#...</a>

This is <i>exactly</i> 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!

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.

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

let me know when it can <a href="http://stackoverflow.com/q/4911338/55948" rel="nofollow">http://stackoverflow.com/q/4911338/55948</a>

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

Nice to see a PonyDebugger mention here. :)

BRB off to write a ton of custom panels :)<p>Great slides.

dat navigation controls...

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