This step-by-step tutorial explains how you can easily edit the content of any web page with Developer Tools. As you might expect, any persistent changes you make are local to the browser, so you can't edit page titles across the web to say “it's awesome. The process involved a bit of trial and error, but the live editing made the iteration cycle very short, which was particularly useful for a CSS beginner like me. Any changes you make are saved to the file system and updated in the editor (assuming that it is updated when changes occur to the file).
Modern browsers, such as Firefox and Chrome, come with built-in development tools that allow you to edit web pages and view changes that occur live. Once you close or reload the page, the changes will disappear; you'll only see the changes on your computer and you won't be editing the actual website itself. Chrome's inspection tool technique is useful for making a couple of quick edits, but if you're making multiple text changes on a web page, there's a better approach. We have only scratched the surface of what the live editing functionality of Chrome DevTools is capable of, especially in the CSS domain.
While tools such as live reloading have made this process easier, many developers are still modifying the code in both DevTools and their editor. It doesn't make sense to write a small user script if you're going to make a small edit on a website. With the live editing functionality of Chrome DevTools, I added a div placeholder containing only the letter “X” as an impromptu temporary check mark. Chrome's developer tools will never completely replace your favorite editor, but they can be useful when you're making quick changes or working from another PC where the editor might not be installed.