Disable script editing in chrome developer tools

Question

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.

Answer 1

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.

Answer 2

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