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:
Which leads to this:
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
"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.
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.
I bisected the recent Nightly builds and I believe this crash was a regression in Nightly 18.0a1 (2012-09-29). I was not, however, able to reproduce this crash on Aurora 17.0a2 builds. What OS are you running? (I'm running Mac OS X 10.8.)
Worked fine for me with whatever the latest Firefox Beta is (from ppa:mozillateam/firefox-next).
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.
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.
The WDT puts that in the sidebar of the Elements tab, below Metrics.
These are usually completely unreadable as it's become rather common to 1. use a third-party DOM library (which will add indirections and essentially always bind the same thing) and 2. use delegation (which will bind on a far-removed parent of the element you've selected).
Firebug doesn't (as far as I know) do it natively, but FireQuery adds a display hook to jQuery-bound events (and more), which may provide more and more useful information than the WDT on these (won't work if you're not using jQuery though)
.live() .delegate() and (usually) .on() will leave the handler on a parent node, making sniffing out all active handlers an expensive DOM-walking task.
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.
What really is bugging me though is the antialiasing, is anybody else seeing that?
Not seeing any aliasing here.
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.
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.
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.
Am I missing something?
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:
called from line 38, column 181 in http://www.igvita.com/slides/2012/devtools-tips-and-tricks/js/slide-deck.js:
I wonder when this will be available for iOS.
http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-develope... (see last point)
(The Chrome Dev tools stuff kicks in about 20 minute)
"A Re-introduction to the Chrome Developer Tools" by Paul Irish
-Break on subtree modifications - delete me
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:
httparchive.org - captures web trends
http://www.softwareishard.com/blog/har-12-spec/ - HAR file format