How to Edit Source Files Directly in Chrome
The days of using separate applications for development and browsing are coming to an end. It’s possible to edit source files directly within Chrome and save the result to a local file. Even better — changes can be applied immediately without refreshing the browser.
Step 1: Launch Developer Tools
Step 2: Edit Your Code
You can now jump straight in and edit your code. Chrome also offers a useful function list to help you locate the right line — press Ctrl+Shift+O / Cmd+Shift+O:
Step 3: Save the File
Hit Ctrl+S / Cmd+S to save your changes. This updates the file in memory and applies the changes immediately. Note however, that code won’t start again so changes to initialization variables won’t be affected.
To save the changes to the original file, right-click the editor and select Save or Save As…. Once done, you can refresh the page and the script will restart.
Step 4: Undo Your Mistakes
Did your update cause chaos? Right-click the editor and select Local modifications…. The lower pane displays all recent changes and allows you to revert back.
Chrome’s Developer Tools may not be a replacement for your current IDE or editor, but they’re very useful if you’re working on another PC or just require a few quick and dirty edits.
Comments on this article are closed. Have a question about browsers and HTML? Why not ask it on our forums?