Inspecting hard-to-get elements in the DOM

Today I learned how to inspect hard-to-get elements in the DOM, you know, the ones that you open but close as soon as you try to inspect them. I used a simple CSS trick in the console

So what you basically do is that you go into the console, you set a delay timer and then run the debugger. Before the debugger starts you open the elements that e.g in my case it was a dropdown and then you wait for the debugger to pause your screen

The command is setTimeout(() => {debugger;},3000)

Whats happening here?

We are essentially
 A. running the debugger 
 B. Adding a wait timer before the debugger is launched, in this case of 3 seconds

Step 1. run command in console 
Step 2. open the view you want 
Step 3. wait for DOM to freeze and then inspect elements accordingly 

This just freezes the DOM essentially, it currently works for Chrome, it should also work on other browsers




#SWE #FE 

Comments

Popular posts from this blog

Starting with Zero

Learnings - From working in a SaaS corporate to SaaS start-up

Are traditional business worth starting?