无法在 Chrome 开发工具中编辑 javascript答案

【问题标题】：Unable to edit javascript in Chrome dev tools无法在 Chrome 开发工具中编辑 javascript
【发布时间】：2016-06-11 00:36:59
【问题描述】：

我正在尝试编辑页面 html 中的一些 javascript 代码（不是导入的 js 文件）。我可以设置断点并逐步执行它们，但我无法在执行期间或执行之前/之后编辑 javascript。我对文件进行了美化 ({}) 和未美化。本节中的代码片段没有被缩小。

我可以发誓这曾经是一个共同特征。但是自从我做了很多javascript以来已经一年多了。

【问题讨论】：

javascript 是在现有的html 页面中，还是仅在console 处运行？
javascript在页面的html中。
见stackoverflow.com/questions/18077217/…，
问题在于他们都在创建完整的“工作区”并且做的比我想要的更多。我知道我曾经能够对我的 javascript 进行一些小改动，并通过开发工具看到它的工作原理。这不再可能了吗？我是否必须创建一个完整的工作区才能进行简单的更改？
它确实仍然有效。尝试将您的代码移动到单独的 JavaScript 文件中。美化后您将无法编辑“script.js:formatted”，但您可以编辑缩小的“script.js”文件。

【解决方案1】：

使用铬/铬有几种方法可以修改现有document 的html。在 devtools

选择Elements标签，右键点击要修改的元素，选择Edit as HTML，在包含元素的框架中进行修改，然后点击编辑器框架外
选择Sources选项卡，选择Snippets选项卡，右键单击并选择New，写入javascript，在现有的window中执行，在右侧面板按▶运行javascript在现有window 中的Snippets 中间面板中。例如，如果将$("body").on("click", function() {alert(123)}) 添加为Snippet，单击body 元素应调用alert(123)。检查元素时，该事件还应列在开发工具右侧面板的Event Listeners 中。移除监听器可能更具挑战性；即使您将鼠标悬停在右侧面板的侦听器上时单击remove，因为该事件已经附加到该元素。最简单的方法是将namespace 添加到事件$("body").on("click.abcnamespace", handler)，然后调用$("body").off("click.abcnamespace")
修改文本现有处理程序不会自动影响或取消先前附加到元素的事件处理程序。最简单的方法是复制并保存现有的包含事件处理程序的javascript，选择Elements 选项卡，右键单击具有事件侦听器的元素，在右侧面板中选择Event Listeners，将鼠标悬停在window、@987654347 上@ 或HTMLElement 附加了事件的按钮应该显示为Remove。单击该按钮以删除事件侦听器。然后，您应该能够修改已保存的事件侦听器并将其添加回现有的 document 并应用修改

【讨论】：