How to Edit Source Files Directly in Chrome

GNN Ads

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.

This technique should work in recent versions of Chrome although, currently, it’s only possible to edit and save JavaScript files. HTML and CSS are almost certain to be supported eventually, though.

Step 1: Launch Developer Tools
Open Chrome, load a page from your local file system/server and open Developer Tools from the Tools menu or press Ctrl+Shift+I / Cmd+Shift+I. Navigate to the Source tab then either click the Sources icon or hit Ctrl+O to select your JavaScript file:

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.