How to locate the actual HTML files using inspect element?

Question

I know it might look like a stupid question. I have just started customizing the Mapbender3 application which is developed in Symfony (PHP). Using the Inspect Element feature in Firefox I could make some changes to the HTML files but to make these changes permanently I need to know where they are actually located on the server. I tried searching for a specific element by ID but I found nothing and there are a whole lot of HTML files that I can not check. Please help me.

Answer 1

You can not find from how many files the HTML has loaded because for browser it's whole one document.

It doesn't matter if it is a one file or created by chunk of HTML code and then merged in one. For browser it's one single document.

You can see the images, javascript, css or fonts files because these are the assets of browser coming from specific location. Inspect element or developer tools on any browser work on DOM which gets loaded. Since the HTML is one single doc, Inspect element will also have same finding.

There are three (or more) ways, (though not the standard one) to find the origin of code in modern IDE (not browser)

1. Get one good IDE, I would say PHPStrom or Netbeans and search for specific ID or wrapper in entire project.

2. If the element is generating dynamically, search for PHP and Javascript Specific files.

3. If you are using any template engine then search for methods which generates element for you.

Hope this helps and good luck with finding :)