javascript - 在 Chrome 开发者工具中禁用脚本编辑

Question

我使用 Chrome 开发者工具来调试 JavaScript 代码，但我对 Chrome 允许您在“脚本”选项卡下编辑 JavaScript 文件的方式感到不满。有时，我没有意识到我在 Chrome 中，开始对“脚本”选项卡下的代码进行更改，却发现当我刷新时，我刚刚所做的更改从未保存到磁盘!

我想知道是否有办法使“脚本”选项卡中显示的代码变为只读，这样，如果我尝试在 Chrome 中编辑该文件，我会发现它不可编辑，然后意识到我是不在我的 IDE 中。

Answer 1

使用以下过程使脚本源在 Chrome 32+ 中为只读:

• 转到 chrome://flags/#enable-devtools-experiments 网址

• 选择允许用户界面主题

• 打开 Chrome 开发工具

• 选择设置(按 F1 或单击最右侧的三个点)

• 选择允许用户界面主题

• 创建 DevTools theme具有以下样式:

  .content-view.script > .text-editor { -webkit-user-modify: read-only !important; }
  

• 发布Chrome Web Store

• 安装主题

• 重新启动 Chrome

引用文献

• 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

使用 Chrome 31 的旧流程-:

使用 user stylesheet完全禁用脚本选项卡:

.toolbar-item.scripts { display:none !important; } /* Hide Scripts Tab */

或者简单地将脚本源设置为只读:

.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 */

以下是该文件的几个可能位置:

• 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

使用以下Chrome Devtools引用相关样式的 URL:

chrome-devtools://devtools/devTools.css