It's easy to view and change any page on the browser with Chrome DevTools. The Sources panel is a powerful component of DevTools - let's dive into it to see how it can help us improve our development.
Chrome DevTools is a set of web developer tools which are built directly into Google Chrome. DevTools aid developers in editing pages on the go and in identifying problems quickly, which enables the developer to builder better websites, faster.
With DevTools, it is easy to view and change any page on the browser just by inspecting its elements and changing the HTML and CSS values. In this post, we will be discussing the DevTools Sources panel and all its components. To get started, let’s first demonstrate how to open DevTools on your browser. There a few ways we can do this, as we’ll list below:
To open Chrome DevTools, follow any of these steps:
Command + Control + C
Control + Shift + C
By default, Chrome DevTools opens to the Elements panel as can be seen from the image above. However, in this post we are interested in the Sources panel. Let’s go ahead and switch over to it as we’ll be discussing its components in this post:
Under the Sources panel, we have four distinct components:
As earlier said, we’ll discuss these components in detail to better understand their features and use cases, but first, let’s take a peek at the kinds of actions we can perform with them in the Sources panel. The Sources panel gives us the ability to perform a lot of operations on the browser, some of which are:
As said earlier, the Sources panel has its limitations. They include:
Now let’s go into these operations in detail under their respective components to give you a clearer understanding. Let’s start with Overrides.
Local Overrides let you make changes in DevTools, and keep those changes across page loads. Ordinarily, you would lose any changes made in DevTools when you reload the browser page. However, with Overrides, you can persist these changes and retain them across multiple page reloads. These work for most file types, with a couple of exceptions.
How it works:
Set up overrides:
The Filesystem can be referred to as the methods and data structures that DevTools uses to keep track of the way files are organized on a disk. This is also referred to as the disk used to store the files or the type of the Filesystem. Filesystem allows you to add a local folder to your Workspace and edit it on the browser.
Filesystem gives Chrome the ability to serve as an IDE for developers, as it gives us the ability to effect changes to local files.
To better understand how it works, let’s open a project folder in Filesystem and make changes to the project files therein.
Command + Options + J
Set up Filesystem
To get started, open the DevTools and switch over to the Sources tab:
Like the instruction onscreen suggests, we can drag and drop our project folder on the visible workspace window. Once you drag the folder into the workspace, you will get a prompt :
Click allow and your project folder will be properly setup in the Filesystem tab below your Navigator. Now when you click the Filesystem tab, you should be able to see your project files:
Now that our project is correctly set up on Chrome, we can go ahead and make changes to our project files directly from Chrome. First, to keep things simple, let’s play around with the names of our team members.
This way, we have been able to update our local project files directly on Chrome. However, we can only do this in the recent versions of Chrome, as it is allowed by default when you click that allow button that was prompted when you dragged your project folder into the Chrome workspace.
These are scripts which you can run, author and execute within the Sources panel of Chrome DevTools. When a Snippet is run, it executes from the context of the current page.
How it works
To create a snippet, follow these simple steps:
When you have created a new snippet, enter your code in the provided editor, save the code and run the snippet by right clicking on the snippet and clicking run like so:
The page tab is used to view all the available resources on the current page. This is mostly helpful for developers to replicate a page structure locally as all the file/folder levels are explicitly exposed in the page tab.
When you open a new page in the browser, the Page tab in the Sources panel will organize all the resources of that current page according to the contents of the sidebar:
The project folders contain respective project files containing all the resources that make up the current page.
When you open a project folder and click on a file, it opens up the file in the Editor pane where you can look through the file contents or preview images.
In this post we have individually explained all the components of the Sources panel and reviewed their features and possible use cases. There’s still a lot of information we didn’t cover on Chrome DevTools that promises to enhance your development and design experience, so you would do well to check out the official DevTool documentation for them.
Christian is a Lagos, Nigeria based software developer and developer advocate. He’s keeps pushing boundaries with/for the Next Billion Users and Next Million Developers.
Subscribe to be the first to get our expert-written articles and tutorials for developers!