When I enable the inspector, where should I look to find the exact file name and location of the item or paragraph highlighted?
See this example:
Hi @Pendres!
Maybe I don’t understand your question properly, so I apologize if I seem obtuse. The location of the HTML file is not in the Inspector, but in the URL bar of the browser.
The exception would be an item within an iframe, in which case, the location is in the src attribute of the enclosing iframe element. I’ve highlighted that in the example below.
Or maybe you have a more complex use case than I think?
I’m moving your question from the MDN forum to the Developer Tools forum, where there are people who are much more knowledgeable than I am.
Hi @Pendres,
I understand your question a little differently than @jswisher, so let me give another possible answer. Sorry if this isn’t what you meant.
The files you use to generate the HTML markup on your site likely run on a server, and may be using a variety of server-side technologies like PHP, JSP, nodeJS, etc.
Once the HTML is generated by the server and reaches the browser, that’s when the engine of the browser transforms it into the DOM tree used to display the page.
The Inspector shows the DOM tree. Not the HTML source code. So that’s why there is no way for it to tell you which source files the HTML originally came from.
Even if it did show the HTML source code , it would not be able to know which source files it came from. The HTML comes in the form of an HTTP response, and this response contains no information as to what the source file on the server originally were.
So, to summarize, there is no way right now for the Inspector to give you filename and line information for a given DOM node.
If the page is build not by a server-side technology but client-side from JavaScript, then the answer is a bit different.
When this is the case, the source file that generated the paragraph in your example is available, it’s a JavaScript file that can be seen in the Debugger tab.
One way to find out which one it is is right-clicking on the parent of the <p> node and choosing “Break on sub-tree modification”. This will pause script execution when the <p> node changes (or other nodes in the same subtree) and select the Debugger tab, at the right filename and line number.
I hope this helps. But please do come back to us to confirm if we got your question right.
Just to add to what @pbro suggested, there was a tip on a previous (similar) topic shared by @sebastianz:
To get to know where the attributes come from, you should first use the newly added full text search of the Network panel to search for the words.
(See answer in context: Which file to modify?)
Basically, by searching for “YG Construction” (which is the text of the selected element on your screenshot), you might find the request which contained the same text, and this could help you understand how it was constructed.
But as @pbro said the rest of the answer can be vastly different from one website to another, and is mostly out of reach from DevTools.
Thank you all for your prompt answers.
So what I gather is that we are unable to find the exact location or file name of the inspected item because the display is already converted to a DOM tree and doesn’t reflect actual file names like xyz.php or others.