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

Question

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

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

Answer 1

使用以下过程在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

参考

• Custom.css已停止在32.0.1700.76 m谷歌Chrome更新中工作
• 示例DevTools主题扩展
• 适用于Chrome开发者工具的Chrome开发者版黑暗主题
• WebCore Inspector脚本内容视图
• Chromium用户数据目录

使用适用于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 Devtools网址引用相关样式:

铬devtools://devtools/devTools.css