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

2024-04-24

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

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


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

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

  • 选择允许 UI 主题

  • 打开 Chrome 开发工具

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

  • 选择允许 UI 主题

  • 创建一个开发工具主题 https://github.com/paulirish/sample-devtools-theme-extension具有以下样式:

    .content-view.script > .text-editor { -webkit-user-modify: read-only !important; }
    
  • 将其发布到Chrome 网上应用店 https://chrome.google.com/webstore/category/themes

  • 安装主题

  • 重新启动 Chrome

参考

  • Custom.css 在 32.0.1700.76 m Google Chrome 更新中停止工作 https://stackoverflow.com/questions/21207474/1113772
  • 示例 DevTools 主题扩展 https://github.com/paulirish/sample-devtools-theme-extension
  • 适用于 Chrome 开发工具的 Chrome 开发者版深色主题 https://github.com/KeenRivals/chrome-developer-edition-dark
  • WebCore 检查器脚本内容视图 http://trac.webkit.org/browser/trunk/Source/WebInspectorUI/UserInterface/Views/ScriptContentView.css
  • Chromium 用户数据目录 http://www.chromium.org/user-experience/user-data-directory

使用 Chrome 31 的旧流程-:

Use a 用户样式表 http://brugbart.com/Articles/custom-style-sheets完全禁用脚本选项卡:

.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 开发工具 https://stackoverflow.com/questions/7149450/1113772引用相关样式的URL:

chrome-devtools://devtools/devTools.css

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Chrome 开发者工具中禁用脚本编辑 的相关文章

随机推荐