13 ms·
Chrome DevTools could do that?
- ljoshua 14y agoGreat 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.)
- wmf 14y agoIf you're confused by the total lack of UI, try the arrow keys (facepalm?).
- adrianpike 14y agoTo 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?
- Torn 14y agoYep it was given at this year's Velocity Conference (which was great fun by the way, lots of cool presentations) http://velocityconf.com/velocity2012 http://velocityconf.com/velocity2012 Not seeing any aliasing here.
- nizmow 14y agoThis needs to be upvoted.
- fletchowns 14y agoSpacebar and arrow keys control the slides, just like in every spreadsheet application, ever.
- deleted 14y ago[deleted]
- michaelkscott 14y agoI think you meant presentation (as in powerpoint) not spreadsheet (as in excel).
- fletchowns 14y agoYep, whoops :)
- xiaoma 14y agoAu contraire! https://www.apple.com/apps/numbers/ https://www.apple.com/apps/numbers/
- akira2501 14y agoIt wasn't even clear this was a slide deck until I looked at the URL.
- camiller 14y agoOr "Page Up" "Page Down" keys
- smcnally 14y agoswiping works fine on tablet chrome
- primatology 14y agoYou can also click the black areas to the left and right of the slide.
- Uhhrrr 14y agoI flagged it because in my browser it was as useless as a lead dirigible.
- rhengles 14y agoI changed the slides by clicking outside of the slides, on the left and right.
- danielweber 14y agoI tried that and it didn't work. It turns out there is a rectangle about 80px wide or so that you need to hit.
- kevingadd 14y agoWARNING: 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 14y agoWhat release channel of Firefox are you running? I had no problems in Aurora.
- moondowner 14y agoWorks on FF 15.0.1
- atas 14y agoYes, on mine too.
- hadem 14y agoThe 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 14y agoYes, 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.
- quest88 14y agoYes, the audio that went with this presentation.
- adgar2 14y agoPutting all your information on your slides is the mark of a near-useless presenter. That was middle-school stuff for me.
- Ygg2 14y agoYeah, this seems like common confusion. Slides are generally used for the presenter, not the one he presents his stuff.
- bgrins 14y agoRemote debugging is so useful: http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#28 http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#.... 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.
- RandallBrown 14y agoYou 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.
- boogah 14y agoHow about now? http://moduscreate.com/enable-remote-web-inspector-in-ios-6/ http://moduscreate.com/enable-remote-web-inspector-in-ios-6/
- anu_gupta 14y agoiOS6 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
- felixthehat 14y agoIt'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-developers http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-develope... (see last point) http://teamsoell.com/andy/dietcoda http://teamsoell.com/andy/dietcoda http://html.adobe.com/edge/inspect/ http://html.adobe.com/edge/inspect/
- Joeri 14y agoAnother way to debug web pages with the inspector is to use the iOS 5 emulator with http://www.iwebinspector.com/ http://www.iwebinspector.com/
- deleted 14y ago[deleted]
- qntmfred 14y agolet me know when it can http://stackoverflow.com/q/4911338/55948 http://stackoverflow.com/q/4911338/55948
- statictype 14y agoCrap, 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 14y agoFirefox also has a way to expose invalidation rectangles: http://www.junglecode.net/?p=110 http://www.junglecode.net/?p=110
- chris_mahan 14y agoAnd to think that if they didn't use javascript at all the page would be even faster...
- deleted 14y ago[deleted]
- neerajdotname2 14y agoWhat tools is used to build this presentation ? Is it open source ?
- skeletonjelly 14y agoYou should use the Chrome web inspector to dig around ;) https://plus.google.com/118075919496626375791/posts/LG93tTdJYLy https://plus.google.com/118075919496626375791/posts/LG93tTdJ... http://code.google.com/p/io-2012-slides/ http://code.google.com/p/io-2012-slides/
- d70 14y agoDumb 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 14y agohttps://plus.google.com/118075919496626375791/posts/LG93tTdJYLy https://plus.google.com/118075919496626375791/posts/LG93tTdJ...
- igrigorik 14y agoIn my own case, Sublime + codekit + chrome.. Hand editing the HTML. :-)
- rurounijones 14y agoWhile 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-web-faster-tips-from-trenches-google http://confreaks.com/videos/886-railsconf2012-let-s-make-the... (The Chrome Dev tools stuff kicks in about 20 minute)
- Torn 14y agoThe 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/proceedings http://velocityconf.com/velocityeu2012/public/schedule/proce...
- skeletonjelly 14y agoGoing 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/LG93tTdJYLy https://plus.google.com/118075919496626375791/posts/LG93tTdJ... Which leads to this: http://code.google.com/p/io-2012-slides/ http://code.google.com/p/io-2012-slides/ Which has this code: http://code.google.com/p/io-2012-slides/source/browse/ http://code.google.com/p/io-2012-slides/source/browse/ And this dog food demo: http://io-2012-slides.googlecode.com/git/template.html 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 14y agoSweet, thanks.
- molmalo 14y agoCan someone explain me this, please: -Break on subtree modifications - delete me Thanks!
- molmalo 14y agoOk, 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-chrome-dev-tools/ http://danesparza.net/2011/06/a-re-introduction-to-the-chrom...
- Achshar 14y agoThis 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.
- ludwigvan 14y agoHere'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 http://www.sprymedia.co.uk/article/Visual+Event+2) that does this, sort of; but it is still lacking.
- xxbondsxx 14y agoIt'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 14y agoThis 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 14y agoYes, 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.
- zaroth 14y agoThis 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 14y agoAnd 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 :-)
- minikomi 14y agoBRB off to write a ton of custom panels :) Great slides.
- niyazpk 14y agoFor 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?
- smagch 14y agoFor 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-developer-tools/ 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-Javascript-Console-Protips-newish-DOM-APIs http://updates.html5rocks.com/2011/09/7-minute-videos-Javasc...
- induscreep 14y agodat navigation controls...
- wlue 14y agoNice to see a PonyDebugger mention here. :)
- mmahemoff 14y agoI 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.
- antihero 14y agoThis 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!
- umaar 14y agoI posted a tutorial about Chrome Dev Tools recently, it's a bit long though http://net.tutsplus.com/tutorials/tools-and-tips/chrome-dev-tools-markup-and-style/ http://net.tutsplus.com/tutorials/tools-and-tips/chrome-dev-...
- cynwoody 14y agoThanks. That's great!
- dhucerbin 14y agoOn 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/#27 http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#...
- igrigorik 14y agoYup, 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/contributing https://developers.google.com/chrome-developer-tools/docs/co...
- tech-no-logical 14y agosite 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();}});})()
- EliAndrewC 14y agoCan 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 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 14y agoI have a writeup on some of the chrome network internals here: http://www.igvita.com/2012/06/04/chrome-networking-dns-prefetch-and-tcp-preconnect/ http://www.igvita.com/2012/06/04/chrome-networking-dns-prefe... 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.
- mclemme 14y agoWas at the talk and what really looked useful was the HAR stuff (HTTP archive), see httparchive.org
- igrigorik 14y agoConfusingly 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/ http://www.softwareishard.com/blog/har-12-spec/ - HAR file format