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

Question

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

1. 我能做到这点吗？
2. 代码是否位于附加事件内部很重要。 即单击等。
3. 我显然正在使用jquery。

我曾经发誓这是一个常见的功能。 但自从一年多以来，我就没有做过太多javascript了。

- Dan

---

现有的html页面中是否包含javascript代码，还是只在控制台运行？ - guest271314

JavaScript在页面的HTML中。 - Dan

请查看以下链接：https://dev59.com/iWMl5IYBdhLWcg3w1593 - guest271314

问题在于它们都创建了完整的“工作区”，并且做了比我想要的更多的事情。我知道以前我可以对我的JavaScript进行小改动，并从开发工具中看到它的效果。这还是不可能吗？我必须创建一个完整的工作区才能进行简单的更改吗？ - Dan

它肯定仍然有效。尝试将代码移入单独的JavaScript文件中。格式化后，您将无法编辑“script.js：formatted”，但是您可以编辑经过缩小处理的“script.js”文件。 - Matt Zeunert

Answer 1

使用chromium/chrome，有几种方法可以修改现有文档的html。在devtools中：

• 选择Elements选项卡，在要修改的元素上右键单击，选择Edit as HTML，在包含元素的框架中进行修改，然后单击编辑器框架之外的区域。

• 选择Sources选项卡，选择Snippets选项卡，右键单击并选择New，编写javascript，按右侧面板的▶以在现有window中运行javascript。例如，如果将$("body").on("click", function() {alert(123)})添加为Snippet，则单击body元素应调用alert(123)。当检查元素时，事件还应在devtools的右侧面板中列出在Event Listeners下。删除监听器可能会更具挑战性；即使在悬停在右侧面板上的监听器上单击remove，因为事件已经附加到元素上。最简单的方法是为事件添加一个namespace$("body").on("click.abcnamespace", handler)，然后调用$("body").off("click.abcnamespace")。

• 修改文本现有处理程序不会自动影响或取消先前附加到元素的事件处理程序。最简单的方法是复制并保存包含事件处理程序的现有javascript，选择Elements选项卡，在具有事件监听器的元素上右键单击，在右侧面板中选择Event Listeners，当悬停在具有事件附加的window、document或HTMLElement上时，应显示一个按钮，上面写着Remove。单击该按钮以删除事件监听器。然后，您应该能够修改已保存的事件监听器，并将其添加回现有的document中，以应用修改。

- guest271314