Hey there. I'm Paul Irish. I'm a Developer Advocate on the Google Chrome team and today
I'm going to show some advanced uses of the core Chrome Dev Tools features.
First, let's enter into the dev tools. It's common to use the app's menu. And you can
also use a keyboard shortcut, like Ctrl-shift-I on Windows or Cmd-option-I on Mac. But I prefer
to open them by right-clicking on an element and choosing Inspect.
Now that we have this open, I can navigate the DOM by clicking on the arrows, but it's
much quicker to use the keyboard arrow keys to traverse up and down the DOM tree.
You’ll notice as I'm selecting these elements, I get an onscreen blue highlight, but I also
get a css selector that represents that element, along with its current width and height.
Sometimes, I like to zoom out of the page with ctrl - to get the full view while I do
this. Now, over in the Console tab, I'd like to
share a few things. Let's say that you have a big string coming
from your app, and you want to copy it into your clipboard.
While you certainly could highlight the entire string with your mouse, it's much more effective
to use the console's built in copy method. I can now paste this wherever I am going.
Sometimes you get too much text in the console. You can use the clear() function to clear
it out. Or, of course, the clear icon below will do
just the same. Now sometimes, you have a reference to a DOM
element, and you want to inspect it. Right now, I have a reference to the big headline
on the page. A simple way to do that is the console's inspect
function. Now, let's say you have the reverse: You're
looking at an element in the Elements tab, but you want to access it via scripts. What
I used to do is add an ID onto the element and use getElementById.
You’ll notice I brought up the console right here. In fact, I can toggle on a console on
every tab of the dev tools with the escape key.
But instead of setting a temporary ID to the element, to save time, I can just type $0
in the console. This is a shortcut reference to whatever element is currently selected
in this panel. It's just a regular reference, so if I'm using jQuery I can toss it into
it's dollar method easily. Now over on the Network tab, I'd like to share
a few things. In this waterfall chart, two lines are added.
The blue one points out where the DOMContentLoaded event fires, which is basically “document
ready” and the red is window's load event, which waits for all images and iframes to
finish. Now you probably have had to inspect the cookies
that are associated with your page request before. The Headers tab has that info as one
of the request headers, but you can now view the current cookies in table format.
You also have the size of each cookie, which you want to keep as small as possible, as
all the cookies are sent in the HTTP header with every request of the page.
Now, I'd like to show you a few handy features when doing Javascript debugging. I'm going
to bring up a page with some basic script. So here, I can filter our results here using
search or a category filter. Easy enough. This gallery.js contains most of the functionality.
Now I'd like to add some logging to see what's going on. In Chrome, I can edit the script
on the fly inside the UI. This feature is unique to Chrome because of how the V8 Javascript
engine executes your code. I’m going to jump down to the showGallery
function. I can use cmd-G or ctrl-G to jump to a specific line number.
Now I'd really like to dig into this JSON argument here, so I'm going to console log
it out. Now when I filter, I get the object logged
to the console, where I can poke around with it further.
You'll notice I'm also getting an exception thrown on the page. Sometimes it's difficult
to figure out where these errors are coming from. By clicking on this pause button, I
can ask the dev tools to pause execution whenever an exception is encountered, effectively giving
me a breakpoint at that position. I can now open up the console, again by hitting
Escape, and figure out what's going on. Whoops! Looks like that element doesn’t
exist yet. I guess it’s time to file a bug report.
If you'd like to dive into the dev tools, I definitely recommend picking up a dev channel
version of Chrome. It updates weekly and gets new features in the dev tools very regularly.