Different ways to inspect disappearing elements on a browser
Have you ever had trouble inspecting elements on certain websites?For example sometimes you try to select an element, it disappears, making it hard to locate. This can be due to the various reasons.
However, when you need to debug. Chrome Dev Tools tools come to your rescue, allowing you to pause the execution when a DOM element undergoes changes and even monitor its attributes.
In this blog, I have explained 6 ways to inspect disappearing elements in DOM.
1. Events Listeners: Removing the blur property
a. Select Chrome Dev Tools and navigate to Elements
b. Access the Event Listeners Tab (From Right Side)
c. Select blur and expand the blur option
d. Click on remove for all the available properties.
With the above steps, the elements won’t disappear from the dropdown and you would be able to inspect them.
2. Emulate a focused page
In certain applications, we do not have blur property, but you can still inspect the hidden element by following the below approach.
a. Open chrome dev tools, click command+shift+p then type focus.
b. Select “Emulate a focused page”.
Now, the hidden elements will not disappear on the page and you would be able to inspect the elements on the web application.
3. Keyboard Shortcut: Fn+F8 or cmd+\
You can also pause the DOM elements by using the keyboard shortcuts→ fn+F8 (or Ctrl+/).It freezes the DOM , allowing you to inspect the elements on the page.
4. Source: Snippets
Another way to locate the auto-suggestion/ hidden dropdown values is using source:snippets.
a. Go to Dev Tools, and select the “Sources” tab.
b. Select snippet
Tip: Click on >> to move to the right if you don’t see a snippet on the screen
c. Click on New Snippet
d. Go to Script Snippet (right side section) and enter “debugger;”
c. Now, Right-click on the Script snippet and select Run (Just as shown in the below screenshot).
It will also help you inspect the elements on the page
5. Console: Script
a. Open the console tab in Developer Tools
b. Enter the below command command to pause execution and display “paused in debugger”
setTimeout(function() {
debugger;
}, 3000);
6. Break On :
You can also pause the DOM element by applying Break-On with Subtree Modifications.
a. Access Chrome Dev Tools
b. Navigate to the element that you want to set the breakpoint on.
c. Right-click on the element
b. From the Dom, right-click on the element and select Break on, and select all the attributes ( Just as shown in the below screenshot).
Now, you would be able to inspect the elements on the page
Conclusion:
In this blog, I have explained multiple ways to inspect the auto-suggestion/ hidden dropdown values in DOM. I have shared 6 different approaches. Sometimes, the pause debugger doesn’t work but removing the blur options does. I hope, it helps you inspect disappearing elements on the web application.
Thanks for reading. Happy Learning! — AB
Ref : Naveen AutomationLabs ( https://youtu.be/SS3dfwygKig, https://youtu.be/zw99PZalGqA)
Thanks, Naveen AutomationLabs for the great content.
Anshita Bhasin
QA Chapter Lead
GitHub | LinkedIn | Twitter | Youtube | BookAnAppointment
