19

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

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

4

2 回答 2

5

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

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

  • 选择允许 UI 主题

  • 打开 Chrome 开发工具

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

  • 选择允许 UI 主题

  • 使用以下样式创建DevTools 主题：

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

  • 将其发布到Chrome 网上应用店

  • 安装主题

  • 重启 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 铬：
    • %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

于 2012-08-22T19:07:27.790 回答
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

解决方案2：

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

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

解决方案3：

让 chrome 自动保存你的文件：

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

我个人的看法是，这是最好的解决方案。

于 2012-10-11T16:44:42.740 回答