Search code examples
htmlweb-scrapingsearchdeveloper-tools

How to search only within a specific part of the HTML in the Elements tab of Developer Tools?

Is it possible to search words only inside certain elements on the html in Developer Tools? If I Ctrl+f in Developer Tools it performs the search on the entire html and also it automatically scrolls the html to the first element it finds. This way if I'm interested to find a term only in a certain section of the html I have to scroll back to that area and this is very time consuming for long htmls.

Solution

  • it is also possible to look for text in the HTML code of certain elements in dev tools, without going over the whole web page.

    1. search within the specific HTML element:
    • right-click on the desired section of the page and select Inspect. this will open the Elements panel with the HTML highlighted for the section.
    • right-click the same element again and select search within node (or ctrl+f while the node is selected). this will limit the search to that specific element and its child nodes.
    1. if you're more familiar with CSS selectors or XPath:

    • go to the Console tab in Developer Tools

    • use JavaScript commands to find elements, for example:

      > $x("//div[@class='classname']") // XPath
> document.querySelectorAll('.classname') // CSS selector