Sources panel overview

Use the Microsoft Edge DevTools Sources panel to perform the following actions.

View files

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

The Page pane

How the Page pane is organized:

  • The top-level, such as top in the previous figure, represents an HTML frame. Find top on every page that you visit. top represents the main document frame.
  • The second-level, such as docs.microsoft.com in the previous figure, represents an origin.
  • The third-level, fourth-level, and so on, represent directories and resources that were loaded from that origin. For example, in the previous figure the full path to the resource devtools-guide-chromium is docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium

Click a file in the Page pane to view the contents in the Editor pane. You may view any type of file. For images, a preview of the image is displayed.

View the contents of a4d10f71.index-docs.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 a CSS file by adding the style rule below:

.metadata.page-metadata {
    color: red;
}

That change should take effect immediately.

Edit CSS in the Editor pane to change the text color of the subtitle to red

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

Editing JavaScript in the Editor pane

DevTools erases your CSS and JavaScript changes when you reload the page. Navigate to 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 may 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 may run jQuery commands from the Console:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

Instead, you may save this code in a Snippet and run it with a couple of button clicks, any time you need it. DevTools saves the Snippet to your file system.

A Snippet that inserts the jQuery library into a page

To run a Snippet:

  • Open the file using the Snippets pane, and choose Run (The Run button).
  • Open the Command Menu, delete the > character, type !, type the name of your Snippet, then select Enter.

Navigate to Run Snippets Of Code From Any Page to learn more.

Debug JavaScript

Rather than using console.log() to infer where your JavaScript is going wrong, consider using the Microsoft Edge 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 the runtime of your code, one line at a time. As you step through the code, you may view and change the values of all currently-defined properties and variables, run JavaScript in the Console, and more.

Navigate to Get Started With Debugging JavaScript to learn the basics of debugging in DevTools.

Debug JavaScript

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, DevTools is able to be used as your code editor.

Navigate to Edit Files With Workspaces to get started.

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • File bugs on this article using the Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.