javascript - 使用检查元素编辑 JavaScript

Question

为什么当我在检查元素中编辑 HTML 时，它会立即运行，但当我编辑 JavaScript 时，它不会运行？有什么解决办法吗？

Answer 1

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

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

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

对于 JavaScript，当您的浏览器点击相应的 <script> 时，它就会被解析。标签。该代码被发送到 JavaScript 引擎进行解析和执行。与将 DOM 作为 HTML 检查的浏览器开发人员工具不同，实际上没有办法深入 JavaScript 引擎来重新创建当前运行上下文的 JS 代码表示。 (探查器是与此最接近的东西。)因此，没有任何等效的 View 可以实时编辑 JavaScript。

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

需要明确的是，这种热重载功能仅在本地有效，与使用检查元素编辑 DOM 完全不同。

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