尝试解决网站上的一些设计问题（使用 OpenCart 构建），并遇到了我以前从未见过的问题：一个元素显示在开发工具中，但没有显示在查看源代码中。
这怎么可能？我怎样才能找到实际的元素？
情况是，我不得不修改原始模板（category.twig）以将“添加到购物车”按钮更改为“查看”......它在默认类别视图中工作，但只要有任何过滤器选中，这会发生......它恢复到原始视图..但它仍然是同一个文件（我将路径添加到代码本身，只是为了确保我确实在查看同一个文件，你可以在屏幕截图的代码视图部分）。
所以是的......试图追踪这个“添加到购物车”的来源，并且非常困惑为什么它没有出现在查看源代码中。不，没有 JavaScript 针对“view_button” DIV 并将其转换为“添加到购物车” - 我制作了“view_button” DIV，它是自定义的。
有什么建议吗？
Javascript 可以（并且经常）在文档中创建新元素，这些元素不会出现在代码视图中，因为它不执行 javascript。我建议您下载整个页面，然后在 js 文件或整个文档中搜索 button-cart-text。
文档的源不是静态定义元素，而是 JavaScript 动态创建元素。这是很常见的。开发者。工具会向您显示内存中存在的文档（它是当前状态），其中将包括 JS 导致发生的任何事情，但是 view...source 会向您显示最初加载的静态文件的实际源代码。
源代码是程序员写的。或者，在浏览器中“查看源代码”的情况下，它至少是服务器响应的内容，它可能是手写的，也可能是使用各种形式的编译或捆绑生成的。这里的一个常见示例是从模板呈现的页面（例如使用Handlebars）。
实时代码，或者至少是实时标记，是您在浏览器控制台的元素窗格中看到的。您正在看到实时渲染的DOM，就在您的眼前。您正在观看程序（即页面及其子资源）执行并生效。它正在变异，很可能是由于JavaScript造成的。
对于example.com等极其简单的页面，源代码和实时代码之间的差异可能难以察觉，因为在运行时没有进行任何修改。但是，对于更复杂的真实网站，DOM 通常会在您浏览页面时进行修改，以便它可以响应您的点击、键入或其他任何事情。这些修改非常强大和有用。但是，正如您所发现的，它们使源代码和实时代码发生了分歧。这使程序员的生活更加困难，同时使用户的生活更轻松。