使用inspect元素编辑JavaScript

Question

为什么当我在inspect元素中编辑HTML时，它将立即运行，而当我编辑JavaScript时却无法运行？有什么解决办法吗？

Answer 1

差异在于HTML和JavaScript之间的差异。 HTML是一种标记语言，用于在页面上显示内容，因此对标记所做的任何更改都会立即反映出来，因为您正在更改页面的基础结构。

另一方面，

JavaScript主要在页面加载时执行，然后完成，除非您为click事件等附加了事件处理程序。在实时页面上编辑JavaScript不会更改任何内容，因为代码具有已经运行了。

您可以找到有关何时执行JavaScript以及有关此问题的区别的更多答案：When does the browser execute Javascript? How does the execution cursor move?

如果这不能回答您的问题，请发布代码示例，我会为您提供进一步的帮助。

Answer 2

当您使用浏览器的开发人员工具（通过视情况检查元素）来编辑页面时，您实际上并不是在编辑HTML，而是在编辑DOM树的当前状态。

首次加载网站时，将解析HTML，并构建一棵元素树。它将添加到文档中，然后在浏览器的视口中为您呈现该文档。对该HTML进行解析后，它实际上就不复存在了。当您打开开发人员工具时， HTML是从当前DOM重新生成的并显示给您。这是为了方便人类。

区分这一点很重要，因为它有助于解释处理HTML和JavaScript的方式之间的差异。

对于JavaScript，只要您的浏览器点击相应的<script>标签，就会对其进行解析。这段代码已交付给JavaScript引擎进行解析和执行。与用于将DOM检查为HTML的浏览器开发人员工具不同，在JavaScript引擎内部并没有真正的方法来重新创建当前正在运行的上下文的JS代码表示形式。 （探查器与此最接近。）因此，没有任何等效视图可以实时编辑JavaScript。

但是！...。某些浏览器（例如Chrome）具有一项功能，可以使它们从磁盘上热重载内容，包括HTML和JavaScript。实际上，这实际上直接集成到您的浏览器的开发人员工具中的“源”下。如果您去那里并添加本地目录，它将允许您编辑这些文件。在编辑它们时，Chrome会重新加载它们，而不会重新加载整个页面。如果您碰巧在HTML外部文件中有代码引用函数，那么该代码将被新文件中的新函数替换。还要注意，您可以在外部编辑器中编辑此JavaScript并获得相同的功能。

需要明确的是，此热重装功能仅在本地工作，与使用inspect元素编辑DOM完全不同。

如果需要任何说明，请添加评论！