Can Chrome Dev Tools search an entire project for an html element?

Question

I want to find all the places a certain icon is used throughout a pretty complex application. I know how to use a css selector and search. The problem is that it only searches the currently displayed html in the dom. Is there a way to search all of the html in the project?

Example: A window is open that has the icon. I can open dev tools and search for the selector. It will then show one match. I can then open up a different part of the application that has the same icon and search again. It will show two matches because the html has been loaded. There are more instances of the icon that aren't currently being displayed. I want to find all of them for the entire application even if they are not visible.

Answer 1

Chrome dev tools (as well as the tools of other browsers) work with the context that your currently open page resides at. So the only thing you will be able to see is the objects in the DOM that your current page is build of.

Answer 2

Using Chrome Dev Tools, as you said, it is not possible, because it only evaluates the current DOM - and a DOM does not carry the concept of a project or application.

Alternatives:

• Usually, icons have some clear reference, such as a class or an application component. You can search the code of the app for such reference;
• You can inject code before tests, after changing a page, or some other specific point-cut, to make a quick search on the entire DOM for the icon, using your favorite aspect-oriented programming library.

Answer 3

Dev Tools are helpful for inspecting the elements that are in current DOM and on reload DOM element events will be called.

DOM structure does not bind to project directory.