元素存在于Chrome开发者工具中但不在查看源中 - 这怎么可能？

Question

尝试解决网站上的一些设计问题（使用OpenCart构建），并遇到了一个我以前从未见过的问题：一个元素出现在Dev Tools中但没有显示在View Source中。

这怎么可能？我怎样才能找到实际元素？

情况是，我不得不修改原始模板（category.twig）以将“添加到购物车”按钮更改为“查看”...并且它可以在默认的类别视图中工作，但是任何一个筛选器被选中，发生这种情况......它恢复到原始视图..但它仍然是同一个文件（我将路径添加到代码本身，只是为了确保我确实在查看同一个文件，你可以请参阅屏幕截图的代码视图部分。

所以是的...试图追踪这个“添加到购物车”的来源，并且被强烈混淆，为什么它没有出现在View Source中。不，没有针对“view_button”DIV的JavaScript并将其转换为“添加到购物车” - 我制作了“view_button”DIV，它是自定义的。

有什么建议吗？

Answer 1

Javascript可以（通常会）在文档中创建新元素，这些元素不会出现在代码视图中，因为它不会执行javascript。我建议你下载整个页面，然后在js文件或整个文档中搜索按钮 - 文本。

Answer 2

文档的源代码不会静态定义元素，但JavaScript会动态创建元素。这很常见。开发。工具向你展示它在内存中存在的文件（它的当前状态），它将包括JS导致发生的任何事情，但是view ... source显示最初的静态文件的实际源代码加载。

Answer 3

源代码是程序员写的。或者，在＆＃34; View Source＆＃34;在浏览器中，它至少是服务器用响应的内容，它可能是手写的，也可能是使用各种形式的compilation或捆绑生成的。这里的一个常见示例是从模板呈现的页面（例如，使用Handlebars）。

您在浏览器控制台的“元素”窗格中看到了

实时代码，或者至少是实时标记。您正在看到DOM实时呈现，就在您眼前。您正在观看程序（即页面及其子资源）执行并生效。它正在变异，很可能是由于JavaScript。

对于像example.com这样非常简单的页面，源代码和实时代码之间的差异可能难以察觉，因为runtime没有修改任何内容。但是，对于更复杂的真实网站，DOM通常会在您浏览页面时进行修改，以便它可以响应您的点击次数，您的输入或其他任何内容。这些修改非常强大和有用。但是，正如您所发现的，它们使源代码和实时代码分歧。这使得程序员的生活变得更加困难，同时让用户的生活变得更轻松。