Saving local changes with your browser's DevTools

Often, when developing a website or web page, we run into the need to test some changes in CSS properties, HTML code, or even JavaScript, in order to quickly validate a change.

For this, we can use DevTools in Google Chrome or Mozilla Firefox.

This tool, which comes built into modern browsers, is a huge help for developers when analyzing, creating, and validating the functionality and behavior of HTML, CSS, and JavaScript on web pages.

In this post, I'll focus only on changing CSS properties in local files and how to save those changes directly from the browser, without needing to open the source code in your favorite editor.

This only works with local files on your machine — you can't change the CSS/HTML/JavaScript of remote sites

Google Chrome

Making changes in Google Chrome might seem a bit "complicated," but in reality it isn't, so let's go through it step by step.

1. Add your local files to the browser's workspace

In Google Chrome, you need to add the directory containing your web project's files to the browser's workspace. To do this, open DevTools and in the "Sources" tab click "Add folder to workspace"

The browser will ask for access to the directory you want to add. Once you grant access, the directories and files should appear in the workspace

2. Select the HTML element to edit its style.

3. Edit the CSS in the "Styles" tab

This method is simpler and is probably the one most used by developers (at least it's the one I use the most) ;)

4. View and save the changes

Changes are automatically reflected on screen with each edit, but you can also view the changes in the code itself (kind of like Git).

Notice that changed files get an asterisk (*) on the left side, so if you click on "Local modifications...", it opens a new tab called "Changes", where you can view the changes made across all files in the workspace.

Save the changes with Ctrl + S and that's it — the changes will be reflected directly on your filesystem.

Mozilla Firefox

Making these local changes in Firefox is much simpler — let's walk through it step by step.

1. Select the HTML element to edit its style.

2. Edit the CSS

Notice that the CSS property that was changed gets a green mark on the left side. This is how Firefox flags changes.

3. Save the changes

Saving the changes is very simple — just click the "Style Editor" tab and then click "Save" next to each file that was modified.

Conclusion

Editing CSS directly in the browser makes it much easier to validate changes, and being able to save those changes straight from the browser to your local machine speeds up development quite a bit.

If you have questions, compliments, or suggestions, leave a comment. If you enjoyed the content, share it with your friends.