This is the session I’ve been most looking forward to here at IO Bootcamp. I use these tools all the time, but I know I’m missing out on a lot that’s available. We will be working with the examples at goo.gl/FFEmd. That includes a TODO web application, and the slides from today’s talk.
We start with using Chrome to change CSS styles in the app. I have no sense of design, so I just make things uglier. But the various transforms and transitions are cool. I delete items by having them slowly shrink to nothingness.
Moving on to feature detection, seeing what APIs are available to your web page. The next exercise uses Modernizr to see if the Geolocation API is available (of course, it is in Chrome), and then we add use of it to the JavaScript for the page. Just edit the script in the dev tools, click Ctrl-S to “save” the changes, and refresh the page. When you’re done, go to the Resources tab, look at every version of the resource you’ve saved, and right-click to save the modified script to a file on your PC. Very nice.
Next, profiling. We use the Profiles tab in the dev tools and start by taking snapshots and comparing their differences. Then start profiling by clicking on the circle, do some things, and stop the profiler by clicking the circle again. You get a list of how much time each part of your code was running during the test. The half second busy loop inserted in the example really eats up a lot of the application’s time.
You can set breakpoints in your code the normal way (by selecting the code to break on), even with conditional breaks. But you can also set breakpoints on code that handles events, callbacks for XHR, and even on changes to DOM elements. That last is really going to be useful. But, things are going fast here and I’m not fully keeping up. Still, knowing what’s there will let me seek out the details later.
This has been a nice session, even if I didn’t always keep up with the presenter. I eventually covered it all, and have more tools available to me when I get back to work.
Charles Engelke's Blog 