I use Chrome Developer Tools to debug my JavaScript code, but I have one pet peeve with the way Chrome lets you edit the JavaScript files under the Scripts tab. Sometimes, I do not realize that I am in Chrome and I start making changes to the code under the Scripts tab, only to realize when I refresh that the changes I had just made were never saved to disk!
I was wondering if there is way to make the code shown in the Scripts tab read-only, so that if I try to edit the file in Chrome, I'll see that it's not editable and then realize that I'm not in my IDE.
Use the following process to make the script source read-only in Chrome 32+:
Go to the chrome://flags/#enable-devtools-experiments URL
Select Allow UI Themes
Open Chrome Dev Tools
Select Settings (Press F1 or click on the three dots on the far right)
Select Allow UI Themes
Create a DevTools theme with the following style:
.content-view.script > .text-editor { -webkit-user-modify: read-only !important; }
Publish it the the Chrome Web Store
Install the Theme
Restart Chrome
References
- Custom.css has stopped working in 32.0.1700.76 m Google Chrome update
- Sample DevTools Theme Extension
- Chrome Developer Edition Dark Theme for Chrome Dev Tools
- WebCore Inspector Script Content View
- Chromium User Data Directory
Use the old process for Chrome 31-:
Use a user stylesheet to disable the script tab altogether:
.toolbar-item.scripts { display:none !important; } /* Hide Scripts Tab */
Or simply make the script source read-only:
.text-editor-editable { -webkit-user-modify: read-only !important; } /* Old selector */
.content-view.script > .text-editor { -webkit-user-modify: read-only !important; } /* Older selector */
.editing { -webkit-user-modify: read-only !important; } /* Generic Selector */
Here are several possible locations of the file:
- Windows 7 Chromium:
%LOCALAPPDATA%\Chromium\User Data\Profile 1\User StyleSheets\Custom.css
- Windows 7 Chrome:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
- OSX Chrome:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
- Ubuntu Chrome:
~/.config/chromium/Default/User\ StyleSheets/Custom.css
Use the following Chrome Devtools URL to reference the relevant styles:
chrome-devtools://devtools/devTools.css
As far as I know, there is no option to disable script editing in the Chrome/WebKit Developer Tools.
Below are two three possible solutions:
Solution 1:
Make an extension that shows an alert every time you make an edit:
JavaScript:
chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource, content) {
alert("WARNING: Your changes will not be saved!!");
// Optional, but and extra layer of "protection", if you don't want/need it just remove the "experimental" permission from the manifest
if (chrome.experimental) {
chrome.experimental.devtools.console.addMessage("error", "WARNING: Your changes will not be saved!!");
// Shows in red
}
});
Extension (unpacked, first enable the experimental extension API's under chrome://flags): http://www.mediafire.com/?wb1r67ron0x6szh
Solution 2:
Modify the source and run a custom build:
The other option would be to modify the developer tools source, please see https://developers.google.com/chrome-developer-tools/docs/contributing for more details. If you did that, all you need to do is remove the text-editor-editable class from the editor container (line 1279, DefaultTextEditor.js).
Solution 3:
Make chrome auto-save your files:
The third option would be to enable chrome to save your files, there are a number of extensions that do this namely Tincr. Tincr also let's you live-reload your files and offers complete syntax highlighting.
My personal opinion is that this is the best solution.
