Set up a Workspace, so that changes you make in DevTools get saved to the code on
your file system.

View files

Use the Network pane to view all of the resources that the page has loaded.

Figure 1. The Network pane

How the Network pane is organized:

The top-level, such as top in Figure 1, represents an HTML frame.
You'll find top on every page that you visit. top represents the main document
frame.

The second-level, such as developers.google.com in Figure 1, represents an
origin.

The third-level, fourth-level, and so on, represent directories and resources that
were loaded from that origin. For example, in Figure 1 the full path to the
resource devsite-googler-button is
developers.google.com/_static/f6e16de9fa/css/devsite-googler-button

Click a file in the Network pane to view its contents in the Editor pane. You
can view any type of file. For images, you see a preview of the image.

Figure 2. Viewing the contents of jquery-bundle.js in the Editor
pane

Edit CSS and JavaScript

Use the Editor pane to edit CSS and JavaScript. DevTools updates the
page to run your new code. For example, if you edit the background-color of an element, you'll
see that change take effect immediately.

Figure 3. Editing CSS in the Editor pane to change the background color of an
element from blue to red

CSS changes take effect immediately, no save needed. For JavaScript changes to take effect, press
Command+S (Mac) or Control+S (Windows, Linux).
DevTools doesn't re-run a script, so the only JavaScript changes that take effect are those that
you make inside of functions. For example, in Figure 4 note how console.log('A') doesn't
run, whereas console.log('B') does. If DevTools re-ran the entire script after making the
change, then the text A would have been logged to the Console.

Figure 5. Editing JavaScript in the Editor pane

DevTools erases your CSS and JavaScript changes when you reload the page. See
Set up a Workspace to learn how to save the changes to your file
system.

Create, save, and run Snippets

Snippets are scripts which you can run on any page. Imagine that you repeatedly type out the
following code in the Console, in order to insert the jQuery library into a page, so that
you can run jQuery commands from the Console:

Debug JavaScript

Rather than using console.log() to infer where your JavaScript is going wrong, consider using
the Chrome DevTools debugging tools, instead. The general idea is to set a breakpoint, which
is an intentional stopping place in your code, and then step through your code's execution,
one line at a time. As you step through the code, you can view and change the values of all
currently-defined properties and variables, run JavaScript in the Console, and more.

Set up a Workspace

By default, when you edit a file in the Sources panel, those changes are lost when you
reload the page. Workspaces enable you to save the changes that you make in DevTools to
your file system. Essentially, this lets you use DevTools as your code editor.