在 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 开发者工具中禁用脚本编辑 的相关文章

  • JavaScript 添加布尔值

    console log true true 2 console log typeof true true number console log isNaN true true false 为什么两个布尔类型相加会产生一个数字 我有点理解 如
  • Firebase,只得到新的孩子[重复]

    这个问题在这里已经有答案了 var firebase new Firebase firebaseRef on child added function snapshot 这将接收所有元素 有没有办法在创建新的 Firebase 引用时不接收
  • Google Chrome 控制台过滤器 [_] 正则表达式复选框去了哪里?

    当过滤器栏展开时 例如从命令行 API 参考 https developers google com web tools chrome devtools console command line reference 我经常使用它 以至于我设
  • 如何记录 sqlalchemy 中返回的 SQL 语句和行以帮助调试?

    我该如何配置sqlalchemy记录它向数据库服务器发出的 SQL 语句 并记录从这些语句返回的行 这对于调试很有用 选项 1 设置sqlalchemy engine记录器日志级别为logging INFO or logging DEBUG
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div
  • 通过 JavaScript 获取表单名称

    我有一个简单的问题 但我在网上找不到好的解决方案 我有这个 HTML 代码
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 如何使用 Javascript 设置查询字符串

    有没有办法使用 javascript 设置查询字符串的值 我的页面有一个过滤器列表 单击该列表时 它将更改右侧的页内结果窗格 我正在尝试更新 url 的查询字符串值 因此如果用户离开页面 然后单击 后退 按钮 他们将返回到最后一个过滤器选择
  • 如何正确取消引用然后删除 JavaScript 对象?

    我想知道从内存中完全取消引用 JavaScript 对象的正确方法 确保删除时不会在内存中悬空 并且垃圾收集器会删除该对象 当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo

随机推荐