To edit HTML in Chrome and keep the changes you want, you should know how the Sources panel is used. If you make modifications to HTML code on the Elements panel, your changes will be lost.
Furthermore, if you reuse the same code for different pages, you can simplify this repetitive code-writing process with the Sources panel. It has a built-in editor called the snippet feature which allows you to create and save a part of your code.
This tutorial will explain all of the features, allowing you to edit webpage Chrome faster. We will cover Chrome snippets feature in more detail, and introduce you to the structure of the Sources panel.
Chrome DevTools Sources: Main Tips
- In this tutorial, we will do an overview of the Sources panel of the Chrome Developer Tools.
- The Sources panel is divided into three panes, all of which are meant for inspecting the files that the currently loaded page is using.
- Snippet of code is a useful feature, allowing you to add the same code to many pages.
Sources Panel Explained
The Sources panel can be used for multiple things when it comes to developing your web applications and web pages.
The main functions of the Sources panel are the following:
- Setting up Workspace so the changes you make in DevTools would be saved on your file system.
- Viewing the files that the loaded page consists of.
Network Pane: Inspect Page Resources
The leftmost part of the Sources panel is used for displaying the files that are loaded for the current web page.
This pane is displayed according to a certain structure:
- The top level, top, represents the HTML frame or the default context, being the currently loaded web page, or the main document frame.
- The second level is refered to as the origin and is the name of your domain.
You can double-click on the files in this pane to display and edit their contents in the Editor.
As the title suggests, you can use it as a code editor. With some adjustments, you can save the changes you make to your page.
Another helpful feature is that the changes you make to CSS files are displayed right away (same as in the Elements panel).
By default, these changes are removed when the page is reloaded.
To save the changes, made using Chome Developer Tools, you need to set up a Workspace.
Snippets are bits of code you can repeatedly use on any page! This feature will allow you to edit webpage Chrome faster as you won't have re-write the same code on several pages.
Firstly, to create a snippet, select Snippets in the horizontal menu in the Networks pane.
From there, you can click New snippet and start writing code!
After you are done, you need to right-click the snippet in the menu and select Run.
This is a good alternative for using
console.log() to check whether your code is running correctly. You can also set breakpoints for this purpose.
The breakpoints allow you to stop the execution of code at certain places so you can inspect and interact with the values used. However, breakpoints require a separate tutorial because of their complexity.
Chrome DevTools Sources: Summary
- This tutorial covered the main aspects of the Sources panel of the Chrome Developer Tools.
- Code snippets feature can help you use the same code in multiple pages without having to write it again on a different page.