Sources panel overview

Kayce Basques

Sofia Emelianova

Use the Sources panel to view and edit your website's resources, such as stylesheets, Javascript files, and images.

Overview

The Sources panel lets you do the following:

• View files.
• Edit CSS and JavaScript.
• Create and save Snippets of JavaScript, which you can run on any page. Snippets are similar to bookmarklets.
• Debug JavaScript.
• Set up a Workspace, so that changes you make in DevTools get saved to the code on your file system.

Open the Sources panel

To open the Sources panel, follow these steps:

1. Open DevTools.
2. Open the Command menu by pressing:
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P
3. Start typing sources, select Show Sources panel, and press Enter.

Alternatively, in the top right corner, select more_vert More options > More tools > Sources.

View files

Click the Page tab to view all of the resources that the page has loaded.