Menu
On this website, there's a div with the attribute class="item". When I clicked F12 to bring up the Developer Tools. I pressed Ctrl + F and typed in class="item" and no results came back. I also tried Ctrl + Shift + F but nothing returned. Here is a screenshot:
Even if I search for class=, only text within HTML comments are found. Thanks in advance for any help you are able to provide.
542
Searching the current HTML You want to perform a text string search on the current HTML page. Routine: From the elements panel, use a keyboard shortcut (win: Ctrl+f, mac: Cmd+f) to open up the search input UI. Enter any text you'd like to be found on the current HTML page.
Just right-click and click Inspect Inspect Element, or press Command+Option+i on your Mac or F12 on your PC. In the search field, you can type anything—ANYTHING—that you want to find on this web page, and it will appear in this pane.
Right-click any part of the page and choose Inspect Element. Right-clicking a specific page element will open that element in the inspector view. Select Tools > Web Developer > Inspector from the top menu bar. Use the shortcut control-shift-C in Windows or command-option-C in macOS.
Another way to locate the web element is to click on the “Find” button present in the top menu and by clicking on the desired web element within the web page.
Below, you will find 16 short videos detailing solutions to the most common search-find-edit routines using Chrome DevTools. 1. Searching the current HTML You want to perform a text string search on the current HTML page. Routine: From the elements panel, use a keyboard shortcut (win: Ctrl+f, mac: Cmd+f) to open up the search input UI.
The I nspect Element tool is a simple yet powerful built-in feature that comes with Chrome Developer Tools. It’s handy because we can modify a web page’s look or do CSS editing live on the browser.
Search for an element Before you start searching, make sure to keep the focus on the element tab. Then simply doing a Ctrl+F, a search bar would appear at the bottom of the DOM Tree. (The search bar supports CSS and XPath selectors also.)
Luckily, Chrome also provides some great tools for quickly prototyping CSS changes using DevTools. To the right of the HTML view in the “Elements” tab, there is a view showing a breakdown of what CSS rules apply to the selected element. This view can be extremely helpful for debugging a plethora of CSS bugs.
I searched for the XPath of the element instead and it worked:
//*[@class="item"]
132
Late answer but pretty sure .item would've worked.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
