在 chrome 开发者工具中禁用脚本编辑

Question

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

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

Answer 1

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

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

• 选择允许 UI 主题

• 打开 Chrome 开发工具

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

• 选择允许 UI 主题

• 使用以下样式创建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 铬：
  • %LOCALAPPDATA%\Chromium\User Data\Profile 1\User StyleSheets\Custom.css
• Windows 7 铬：
  • %LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
• OSX 铬：
  • /Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
• Ubuntu 铬：
  • ~/.config/chromium/Default/User\ StyleSheets/Custom.css

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

chrome-devtools://devtools/devTools.css

Answer 2

据我所知，Chrome/WebKit 开发者工具中没有禁用脚本编辑的选项。

以下是两个三种可能的解决方案：

解决方案 1：

制作一个每次编辑时都会显示警报的扩展程序：

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
    }
});

扩展（解压后，先启用chrome://flags下的实验扩展API）：http://www.mediafire.com/?wb1r67ron0x6szh

解决方案 2：

修改源代码并运行自定义构建：

另一种选择是修改开发者工具源，详情请见https://developers.google.com/chrome-developer-tools/docs/contributing。如果您这样做了，您需要做的就是从编辑器容器中删除 text-editor-editable 类（第 1279 行，DefaultTextEditor.js）。

解决方案 3：

让 chrome 自动保存你的文件：

第三个选项是启用 chrome 来保存您的文件，有许多扩展程序可以做到这一点，即 Tincr。 Tincr 还可以让您实时重新加载文件并提供完整的语法高亮显示。

我个人认为这是最好的解决方案。