Yes, you can edit the source code of a web page directly in the browser with the developer tools and the changes will be visible, but only to you, since the changes are made to the files downloaded by your browser. HTML edits can be undone or redone using the normal hot keys Ctrl+Z and Ctrl+Y. They will also be lost when you refresh the page, unless you enable persistent editing. If you're a developer and want to take your site to the next level, you can access the JavaScript editor using the “J+S” shortcut while connected to the PageCloud website editor.
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.
You can open and edit CSS and JavaScript files in this view, but your changes will be lost as soon as you refresh the page. Your first instinct may be to hit the Escape key, but this will prevent you from editing while discarding your changes. One of the most useful functions of DevTools for web developers is the ability to edit in real time the HTML and CSS of a page.
