Question

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

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

Answer 1

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

转到chrome：// flags / #enable-devtools-experiments URL
选择允许用户界面主题
打开Chrome开发工具
选择设置（按F1或点击最右边的三个点）
选择允许用户界面主题

使用以下样式创建DevTools theme：

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

将Chrome Web Store
安装主题
重新启动Chrome

<强>参考

对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网址来引用相关的样式：

铬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：//标志下启用实验性扩展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也让你活着 - 重新加载你的文件，并提供完整的语法高亮。

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

禁用chrome开发人员工具中的脚本编辑

2 个答案:

解决方案1：

解决方案2：

解决方案3：