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

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

---

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

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

去医院chrome://flags/enable-devtools-experiments 网址

选择允许UI主题

打开Chrome开发工具

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

选择允许UI主题

使用以下样式创建一个：

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

将其发布到

安装主题

重新启动Chrome

参考资料

使用Chrome 31-的旧流程：

使用可完全禁用“脚本”选项卡：

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

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

Windows 7 Chrome： %LOCALAPPDATA%\Chromium\User Data\Profile 1\User StyleSheets\Custom.css Windows 7 Chrome： %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 使用以下URL引用相关样式：

---

铬-devtools://devtools/devTools.css

据我所知，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:

解决方案2： 修改源并运行自定义生成：

另一个选项是修改开发人员工具源代码，有关更多详细信息，请参阅。如果这样做了，则只需从编辑器容器行1279中删除文本编辑器可编辑类即可

解决方案3： 使chrome自动保存您的文件：

第三种选择是启用chrome来保存您的文件，有许多扩展名可以这样做。Tincr还允许您实时重新加载文件，并提供完整的语法高亮显示

---

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

这不会禁用脚本文件的本地编辑。现在在beta版中，脚本文件本身会关注每个断点，这更令人讨厌。不是您的答案，而是允许对文件进行本地修改，而无法将其打开off@tkone谢谢我找到了另一种使用CSS禁用选项卡的方法，并用详细信息更新了我的答案。虽然我需要脚本选项卡-调试对我的工作至关重要，但问题是每次遇到断点时，脚本窗口都会得到关注。如果文件确实很长，比如说像未压缩的jquery，而您误按了空格，则无法撤消更改，该文件被标记为本地编辑，断点不再在选项卡中操作。@tkone谢谢。我找到了启用只读模式的属性。我已经用细节更新了我的答案。天哪。这真的很有效。我不必搞扩展或其他什么。解决方案3似乎是最好的！赏金！呃,两个小时不让我做。那么，两小时后就有赏金了？虽然你的代表现在是相当精英！但我才刚到这里！rep，不是这样，我有另一个想法，你可以使用Paul Sweatte的解决方案，而是使用：before，在编辑器上创建一个透明的遮罩。你仍然可以调试，但不能选择或编辑。抱歉，Paul完全按照我的需要得到了它-只有一行CSS：你怎么没有意识到你在IDE中？白色背景和满是窗口的屏幕

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

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