Home/ Questions/Q 8459323
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T13:18:07+00:00

I use Chrome Developer Tools to debug my JavaScript code, but I have one

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0