We will be taking example of Google Chrome Browser in this article. Other Browsers might also provide a similar method.


For an example, I need to get the UI Identifier of the Drive link in the Show All overlay in Google Homepage as shown below:

But, whenever I do a right click and inspect the element on the overlay or use the Inspect button in the Developer Tools toolbar, the Overlay goes away. I need to freeze the page to keep the overlay from going away.


There are two methods to do this:
I. Pause/Freeze the Javascript Execution (using Chrome Developer Tools Debugger)

II. Disabling Javascript in Browser temporarily (Doesn't work always)

 

I. Pause/Freeze the Javascript Execution

1. Open Developer tools, Go to Sources tab and keep it ready

2. Now, go back and perform the actions on the App to get it to the state where it needs to be frozen.

3. Click on the 'Pause Script Execution' button (first button in the list of buttons on the right corner of Sources tab) to pause the page.


There's a tricky part to this in some pages. Like in this case, you might see that click on the page first and then clicking Pause button on the Console closes the overlay. In that case, I used a small trick with the console. Using a timeout function as shown below:

element1 = document.querySelector("#gbwa");
setTimeout(function(){element1.click();},3000);

This waits for 3000 milliseconds and then triggers the click action without a user click and therefore doesn't close the overlay due to multiple clicks. The 3 seconds gives us time to switch to the source tab before the click is done.

 

II. Disabling Javascript temporarily

You can also disable the Javascript temporarily once the page is completely loaded. This might work in some cases but not always. You can disable Javascript for by going to Settings > Site Settings > JavaScript and toggle it to disable it.