元素存在于Chrome开发工具中，但不存在于View Source中-这怎么可能？

Question

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

这怎么可能？ 我如何找到实际的元素？

情况是，我必须修改原始模板（category.twig）才能将“添加到购物车”按钮更改为“查看” ...，并且它可以在默认类别视图中使用，但是只要有任何过滤器选中，发生这种情况...它恢复为原始视图..但它仍然是同一文件（我将路径添加到代码本身中，只是为了确保我确实在查看同一文件，您可以在屏幕截图的“代码视图”部分）。

所以，是的。。。试图跟踪此“添加到购物车”的来源，并感到困惑，为什么它不显示在“查看源代码”中。 不，没有针对“ view_button” DIV并将其转换为“添加到购物车”的JavaScript-我制作了“ view_button” DIV，这是自定义的。

有什么建议吗？

Answer 1

JavaScript可以（而且经常）在文档中创建新元素，因为它不执行javascript，因此不会出现在代码视图中。 我建议您下载整个页面，然后在js文件或整个文档中搜索按钮购物车文本。

Answer 2

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

Answer 3

源代码是程序员编写的。 或者，对于浏览器中的“查看源代码”，至少是服务器响应的内容 ，它可能是手工编写的，也可能是使用各种形式的编译或捆绑生成的。 一个常见的示例是从模板渲染的页面（例如，使用Handlebars ）。

在浏览器控制台的“元素”窗格中看到的是实时代码 ，或者至少是实时标记 。 您正在眼前实时看到DOM的实时渲染。 您正在观看程序（即页面及其子资源）执行并生效。 它正在变异，很可能是由于JavaScript造成的 。

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