使用inspect元素编辑JavaScript

Question

为什么当我在inspect元素中编辑超文本标记语言时，它会立即运行，而当我编辑JavaScript时，它不会运行？有什么解决方案吗？

Answer 1

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

另一方面，JavaScript主要在页面加载时执行，然后执行，除非您为单击事件等附加了事件处理程序。在活动页面上编辑JavaScript不会更改任何内容，因为代码已经运行。

你可以找到更多关于何时执行JavaScript以及这个问题的不同之处的答案：When does the browser execute Javascript? How does the execution cursor move?

如果这不能回答您的问题，请发布代码示例，我将查看是否可以进一步帮助您。

Answer 2

当您使用浏览器的开发人员工具(在本例中是通过inspect元素)编辑页面时，实际上并不是在编辑HTML，而是在编辑DOM树的实时当前状态。

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

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

对于JavaScript，只要您的浏览器命中适当的<script>标记，它就会被解析。这些代码被发送到JavaScript引擎进行解析和执行。与浏览器开发人员将DOM作为HTML语言进行检查的工具不同，实际上没有一种方法可以深入JavaScript引擎来重新创建当前运行上下文的JS代码表示。(分析器是最接近这一点的东西。)因此，没有任何等效的视图来实时编辑JavaScript。

然而……一些浏览器，如Chrome，有一个允许它们从磁盘上热重新加载内容的功能，包括HTML和JavaScript。这实际上是直接集成在浏览器的开发人员工具中的源代码下。如果您转到那里并添加本地目录，它将允许您编辑这些文件。当你编辑它们时，Chrome会重新加载它们，而不会重新加载整个页面。如果您的代码恰好引用了HTML外部文件中的函数，则该代码将被新文件中的新函数替换。同样值得注意的是，您可以在外部编辑器中编辑此JavaScript并获得相同的功能。

为了清楚起见，这种热重新加载功能只能在本地工作，并且与使用inspect元素编辑DOM完全不同。

如果您需要任何澄清，请添加评论！