To be fair, I'm assuming it's not intended for us to be consuming individually at our discretion, but rather Ilya runs it on our behalf at an event. (Not like it would be hard to add some UI though!)
What really is bugging me though is the antialiasing, is anybody else seeing that?
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.
Kevin, thanks for mentioning the Firefox crash. I opened a bug report to track the issue: https://bugzil.la/798244
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.)
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...
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.
You can already do this with Safari (on a mac at least). The dev tools in chrome are just the webkit dev tools (maybe with a few changes) so Safari can do all (almost?) of the same things.
iOS6 Safari allows remote debugging: you can open a site up on an iDevice and then connect via Safari on the desktop and use Safari's version of Web Inspector
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)
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.
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.
This is a part of live js "pause" feature. Basically chrome (and other browsers too) allow you to pause live js execution. What this "break on..." means is that whenever the element or any of it's children is modified (in html) the js execution should break (as in create a breakpoint) so that we can see what triggered the change.
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).
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...
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.
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.
Maybe I'm missing something, but you'll find attached Event Listeners at the very bottom-right of the Elements panel, under where (Computed) Styles, Metrics, Properties, and DOM Breakpoints are found.
> Does anyone know if this is possible using Dev Tools?
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[0] 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)
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.
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 :-)
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?
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.
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!
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.
78 comments
[ 2.0 ms ] story [ 142 ms ] threadWhat really is bugging me though is the antialiasing, is anybody else seeing that?
Not seeing any aliasing here.
"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.
Worked fine for me with whatever the latest Firefox Beta is (from ppa:mozillateam/firefox-next).
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.)
Am I missing something?
I wonder when this will be available for iOS.
http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-develope... (see last point) http://teamsoell.com/andy/dietcoda http://html.adobe.com/edge/inspect/
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.
http://www.junglecode.net/?p=110
https://plus.google.com/118075919496626375791/posts/LG93tTdJ...
http://code.google.com/p/io-2012-slides/
http://confreaks.com/videos/886-railsconf2012-let-s-make-the...
(The Chrome Dev tools stuff kicks in about 20 minute)
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...
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
-Break on subtree modifications - delete me
Thanks!
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...
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.
.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.
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[0] 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)
[0] http://firequery.binaryage.com/
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.
Great slides.
"A Re-introduction to the Chrome Developer Tools" by Paul Irish
http://paulirish.com/2011/a-re-introduction-to-the-chrome-de...
"7 MINUTE VIDEOS: JAVASCRIPT CONSOLE PROTIPS & NEWISH DOM APIS" by Paul Irish
http://updates.html5rocks.com/2011/09/7-minute-videos-Javasc...
[1] http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#...