How to Edit Source Files Directly in Chrome
This popular article was updated in 2020. For more on improving your development workflow with tools, read Developer Essentials: Tools on SitePoint Premium.
A web developer’s typical day involves creating HTML web pages with associated CSS and JavaScript in their favorite editor. The workflow:
- Open the locally hosted page in a browser.
- Swear.
- Open DevTools to investigate the layout and functionality problems.
- Tweak the HTML elements, CSS properties, and JavaScript code to fix the issues.
- Copy those changes back into the editor and return to step #1.
While tools such as live reloading have made this process easier, many developers continue to tweak code in both DevTools and their editor.
However, it’s possible to open and edit source files directly in Chrome. Any changes you make are saved to the file system and updated within the editor (presuming it refreshes when file changes occur).
Step 1: Launch Developer Tools
Open Chrome, load a page from your local file system/server and open Developer Tools from the More tools menu or press F12 or Ctrl/Cmd + Shift + I depending on your system. Navigate to the Sources tab to examine the file explorer:
You can open and edit CSS and JavaScript files in this view, but any changes will be lost as soon as you refresh the page.
Step 2: Associate a Folder with the Workspace
Click the Filesystem tab, then click + Add folder to workspace. You’ll be prompted to locate your work folder and Chrome will ask you to confirm that you Allow access. The explorer shows files on your system which can be opened with a single click:
Step 3: Edit and Save Your Code
You can now jump in and edit your code. Unsaved edits are marked with an asterisk on the file tab.
CSS changes are instantly updated but, in the case of HTML and JavaScript, you’ll normally need to press Ctrl/Cmd + S to save the file to the file system then refresh the browser.
Note that you can also right-click the file tab and select Save as… to save a copy of the file elsewhere.
Step 4: Review and Undo Changes
To review changes, right-click a file tab and choose Local modifications… from the context menu:
A diff-like view is shown. The arrow icon at the bottom-left of the pane will undo all changes and revert the file to its original state.
Chrome’s Developer Tools will never be a full replacement for your favorite editor, but it can be useful when you’re making quick changes or working from another PC where your editor may not be installed.
FAQs on How to Edit Source Files Directly in Chrome
You can edit the source code of a web page directly within Chrome using its built-in Developer Tools. To do this, open Developer Tools by pressing F12 or Ctrl+Shift+I, then navigate to the Elements tab. Locate the HTML element you want to edit, right-click on it, and choose “Edit as HTML” or double-click on the code. Make your changes, press Enter to apply them, and the web page will update instantly. Keep in mind that these changes are temporary and only affect your current browser session; to make permanent changes to a website, you’d need access to the server and the source code files.
In Chrome’s Developer Tools, there isn’t a direct keyboard shortcut specifically for “Edit as HTML.” However, you can access the feature quickly using a combination of keyboard shortcuts. The combination of Ctrl+Shift+C (Cmd+Option+C on Mac) to activate “Inspect” mode and then clicking on the element you want to edit serves the same purpose
You can edit a JavaScript (JS) file using Chrome Developer Tools by opening the “Sources” tab in Developer Tools. Locate the JavaScript file you want to edit in the file navigator on the left, click on it to open it in the code editor panel on the right, and make your changes to the JavaScript code. After editing, save your changes locally by pressing Ctrl+S (Cmd+S on Mac) within the code editor panel. Remember that these changes are temporary and apply only to your current browser session. To make permanent modifications to a JavaScript file for a website, you’d need access to the server hosting the file and the ability to edit it directly on the server.