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

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