CODEWITHSUNDEEP
javascriptdebugginggoogle-chromeusabilitygoogle-chrome-devtools
Jeff Jo
Jeff Jo

Reputation: 231

Disable script editing in chrome developer tools

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.

Upvotes: 21

Views: 11693

Answers (2)

Paul Sweatte
Paul Sweatte

Reputation: 24637

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

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

Upvotes: 5

A.M.K
A.M.K

Reputation: 16785

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.

Upvotes: 4

Related Questions