禁用Chrome开发者工具中的脚本编辑功能

Question

禁用Chrome开发者工具中的脚本编辑功能

javascriptdebugginggoogle-chromeusabilitygoogle-chrome-devtools

20

我使用Chrome开发者工具来调试我的JavaScript代码，但是我对Chrome在“脚本”选项卡下让你编辑JavaScript文件的方式有一个小抱怨。有时，我没有意识到自己正在使用Chrome，并开始更改“脚本”选项卡下的代码，直到我刷新后才意识到我刚刚做的更改从未保存到磁盘上！

我想知道是否有一种方法可以使“脚本”选项卡中显示的代码只读，以便如果我尝试在Chrome中编辑文件，我会看到它是不可编辑的，然后意识到我没有在我的IDE中。

- Jeff Jo

6

你怎么会不知道你在你的集成开发环境里？ - Willem D'Haeseleer

白色背景和屏幕上满是窗口。 - OsamaBinLogin

2个回答

4

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

解决方案二：

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

另一个选项就是修改开发工具源码，请参见https://developers.google.com/chrome-developer-tools/docs/contributing获取更多信息。如果您这样做，只需从编辑器容器中删除 text-editor-editable 类（位于第 1279 行中的DefaultTextEditor.js），即可完成。

解决方案三：

让 Chrome 自动保存您的文件：

第三个选项是启用 Chrome 保存您的文件，有很多扩展可以实现此功能，比如 Tincr。Tincr 还可以实时重新加载文件，并提供完整的语法高亮显示。

个人认为这是最佳解决方案。

- A.M.K

方案3似乎是最好的！悬赏已经颁发了！额，它不让我在两个小时内完成。那么，就像，两个小时后颁发悬赏？尽管你的声望现在相当“精英”！ - tkone

但我刚到这里啊！（回答，非SO）我还有一个主意，你可以使用Paul Sweatte的解决方案，但是，你可以用:before创建一个透明遮罩在编辑器上。你仍然可以进行调试，但不能选择或编辑。 - A.M.K

抱歉，Paul 正好给了我所需的内容 - 只需要一行 CSS :) - tkone

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul Sweatte · Accepted Answer

使用以下步骤在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

参考资料

对于Chrome 31及以下版本，请使用旧流程：

使用用户样式表来完全禁用脚本选项卡：

.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开发工具 URL 引用相关样式：

`chrome-devtools://devtools/devTools.css`