How to Pause JavaScript and Inspect an Element that Quickly Disappears

Yesterday, a reader of mine, Gabriel, posted a comment with a question:

I’ve implemented successfully a lot of form tracking through element visibility trigger. However, I’m struggling with one website. They don’t have a permanent element that is visible after submitting the contact form. Just a 2 second pop-up appears at the top of the page, then it disappears. Is it possible to track it somehow?

So basically, Gabriel does not get enough time to inspect the popup message (as a website element) in order to track it with the Element Visibility trigger of Google Tag Manager. What can be done here?

I’ve tried various solutions (like this one and this one) but the one that I will show you worked for me the best. I have spotted it here. I’m pretty sure that there are more elegant solutions (that I’m not aware of) but this one was fairly simple.

P.S. If you know a better solution, I’d really like to hear that! Share it in the comments, thanks!

A quick demo

To better illustrate the problem, I’ve found a demo website with a popup that disappears after 4 seconds. I know that in the future, the demo page of the popup might be shut down but let’s enjoy it while we can.

Open that page and see for yourself. Every time a page is loaded, this popup will appear and then disappear.

The problem

It does not matter what will you do with that popup (keep your mouse cursor on it, try to click the ESC button hoping that it will work the same way it does with the redirects (see the silly ESC key trick)) it will just disappear. And several seconds are definitely not enough to properly inspect the element, to check its CSS class, ID, or some other attributes.

Hence, it becomes nearly impossible to configure the Element Visibility trigger. Not unless you try this (probably also silly) trick. These exact steps apply to Google Chrome. You will have to do your own research for other browsers.

The solution

Before the popup (or some other element that you wish to track) appears on the screen, open Browser Developer tools. On Windows, you can press the F12 key. On Mac, it’s Command+Option+I.

Then go to the Settings:

Locate the setting that is called “Disable JavaScript”. Keep it disabled for now.

Now, complete the action on your website that makes that sneaky element appear on the screen. In Gabriel’s case, it’s the form submission. Once you submit the form and the popup appears, click the Disable JavaScript checkbox.

Now you can take your time and inspect the popup. Find the element you can use in your Element Visibility Trigger. The charm of this solution is that you can continue using the Elements tab of the Chrome Dev Tools while JS is disabled.

When you complete inspecting the element, turn on the JavaScript once again. That’s it!