简体繁体 English

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

[英]Element present in Chrome Dev Tools but NOT in View Source - how is this possible?

原文 2017-10-23 23:31:04 3 3 javascript/ html/ opencart-3

Trying to troubleshoot some design issues on a website (built with OpenCart), and ran into an issue I've never seen before: an element shows up in Dev Tools but DOESN'T show up in View Source. 试图解决网站（使用OpenCart构建）上的一些设计问题，并遇到一个我从未见过的问题：一个元素出现在Dev Tools中，但没有出现在View Source中。

How is this possible? 这怎么可能？ And how can I find the actual element? 我如何找到实际的元素？

The situation is, I had to modify the original template (category.twig) to change the "Add To Cart" button to "View"... and it works in the default category view, but as soon as any of the filters are selected, this happens... it reverts to the original view.. but it's still the same file (I added the path into the code itself, just to make sure I'm indeed looking at the same file, you can see in in the Code View portion of the screenshot). 情况是，我必须修改原始模板（category.twig）才能将“添加到购物车”按钮更改为“查看” ...，并且它可以在默认类别视图中使用，但是只要有任何过滤器选中，发生这种情况...它恢复为原始视图..但它仍然是同一文件（我将路径添加到代码本身中，只是为了确保我确实在查看同一文件，您可以在屏幕截图的“代码视图”部分）。

So yeah... trying to trace where this "Add To Cart" is coming from, and being mighty confused as so why it's NOT showing up in View Source. 所以，是的。。。试图跟踪此“添加到购物车”的来源，并感到困惑，为什么它不显示在“查看源代码”中。 And no, there's no JavaScript targeting the "view_button" DIV and transforming it into "Add To Cart" - I made the "view_button" DIV, it's custom. 不，没有针对“ view_button” DIV并将其转换为“添加到购物车”的JavaScript-我制作了“ view_button” DIV，这是自定义的。

Any advice? 有什么建议吗？

3 个解决方案

Javascript can (and often does) create new elements in the document, that won´t appear on code view becasuse it does not execute javascript. JavaScript可以（而且经常）在文档中创建新元素，因为它不执行javascript，因此不会出现在代码视图中。 I would advice you to download the entire page and then search for button-cart-text in js files or the whole document. 我建议您下载整个页面，然后在js文件或整个文档中搜索按钮购物车文本。

The document's source does not define the element statically, but the JavaScript creates the element dynamically. 文档的来源不是静态定义元素，而是JavaScript动态创建元素。 This is very common. 这是很常见的。 The dev. 开发人员。 tools show you the document as it exists in memory (it's current state), which will include anything that the JS caused to happen, but view...source shows you the actual source code of the static file that was initially loaded. 工具会向您显示文档在内存中的状态（当前状态），其中将包括JS导致发生的任何事情，但是view ... source向您显示最初加载的静态文件的实际源代码。

Source code is what the programmer wrote. 源代码是程序员编写的。 Or, in the case of "View Source" in a browser, it is at least what the server responded with , which may have been written by hand or may be generated using various forms of compilation or bundling. 或者，对于浏览器中的“查看源代码”，至少是服务器响应的内容 ，它可能是手工编写的，也可能是使用各种形式的编译或捆绑生成的。 A common example here would be a page rendered from templates (eg using Handlebars ). 一个常见的示例是从模板渲染的页面（例如，使用Handlebars ）。

Live code , or at least live markup , is what you are seeing in the Elements pane in the browser console. 在浏览器控制台的“元素”窗格中看到的是实时代码 ，或者至少是实时标记。 You are seeing the DOM rendered in realtime, right before your very eyes. 您正在眼前实时看到DOM的实时渲染。 You are watching the program (ie the page and its subresources) execute and take effect. 您正在观看程序（即页面及其子资源）执行并生效。 It is mutating, most likely due to JavaScript . 它正在变异，很可能是由于JavaScript造成的。

For extremely simple pages like example.com , the difference between the source code and the live code may be imperceptible, because nothing is modified at runtime . 对于诸如example.com之类的极其简单的页面，源代码和实时代码之间的差异可能是难以察觉的，因为在运行时不会进行任何修改。 However, for more complex, real-world websites, the DOM is often modified while you are browsing the page so that it can respond to your clicks, your typing, or anything else. 但是，对于更复杂的现实世界网站，通常会在浏览页面时修改DOM，以便可以响应您的点击，键入或其他任何内容。 These modifications are extremely powerful and useful. 这些修改非常强大且有用。 However, as you have discovered, they make the source code and the live code diverge. 但是，正如您所发现的，它们使源代码和实时代码有所不同。 This makes a programmer's life more difficult, while making a user's life easier. 这使程序员的生活更加困难，同时使用户的生活更加轻松。