20

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.

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
Jeff Jo
  • 221
  • 1
  • 2
  • 6

2 Answers2

5

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

Community
  • 1
  • 1
Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
  • 1
    This doesn't disable local editing of script files. And now in the beta the script file itself gets focus on EVERY breakpoint, this is even more obnoxious. (Not your answer, but allowing local modifications to a file without being able to turn it off) – tkone Oct 11 '12 at 15:50
  • @tkone Thanks. I found another way to disable the tab using CSS and updated my answer with details. – Paul Sweatte Oct 12 '12 at 05:44
  • I need the scripts tab though -- Debugging is essential to my work, but the problem is every time a breakpoint is hit, the script window gets the focus. If the file is really long (say like uncompressed jquery), and you hit space by mistake, you can't undo the changes, the file is marked as locally edited and breakpoints no longer operate in the tab. – tkone Oct 12 '12 at 13:41
  • @tkone Thanks. I found the property to enable read-only mode. I've updated my answer with details. – Paul Sweatte Oct 12 '12 at 19:52
  • Holy crap. That works really well. I don't have to mess with extensions or anything. – tkone Oct 12 '12 at 21:51
  • Adding that style works for the most part, but once in a while, scrolling will cause an edit. There really should just be an "off" switch in the settings to block all editing of local source files. – junkyspace Jan 11 '13 at 14:34
  • Sadly this doesn't work in recent versions of chrome as user stylesheets have [been removed](https://code.google.com/p/chromium/issues/detail?can=4&start=0&num=100&q=&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=318566) – hjdivad Sep 05 '14 at 18:15
4

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.

A.M.K
  • 16,727
  • 4
  • 32
  • 64
  • Solution 3 seems to be best! Bounty awarded! Er, it won't let me do it for two hours. So, like, bounty awarded in two hours? Although your rep is pretty "elite" right now! – tkone Oct 12 '12 at 13:43
  • But I only just got here! (rep, not SO) I have another idea, you could use Paul Sweatte's solution but instead, using `:before`, create a transparent mask over the editor. You could still debug but not select or edit. – A.M.K Oct 12 '12 at 14:13
  • Sorry Paul got it exactly as I needed-- just one line of CSS :) – tkone Oct 12 '12 at 21:52