It was due to very complicated way of testing a website technology we are using at work, I decided to create this Google Chrome extension to simplify the work in just a single click. The extension is designed to pickup DOM object values and display it in a tabular format in a popup overlay.
The target technology was just the Tealium Universal tag. This technology allows a site to submit data to Tealium that in turn will do specific actions on their end (which I cannot disclose). The tagging utilizes a global variable
utag_data where testing is so tedious. We need to use Firefox and inspect the DOM objects, then view the whole
utag_data which is polluted with other values that does not make sense to our testing.
With this extension, I was able to pickup specific values from
utag_data and display them on a tabular popup.
As stated above, I used the extension for testing Tealium tags if the right variables and values are correct. However, it can also be used to track values set by Omniture SiteCatalyst for example but of course there is Omnibug for Firefox that does the perfect job for testing Omniture SiteCatalyst.
To install the extension, using Google Chrome, go to DOM Watcher download page. I have made a video on it for easy guide and reference.
Usage is very simple, however, configuration is not. Not unless you are comfortable with JSON as configuration. Basically, the heart of the extension is the watched values. You set this on a configuration in JSON format. For example, if you want to watch the current URL of the address bar, your configuration will look like this:
The whole config is a JSON object. Each first level keys are objects under the
window object. So, if you want to watch
window.location.href, you write it as written above. If you want to watch another objects
bar, you write it below:
The extension can also traverse deeply nested objects just like in our
window.location.href example. Below is a sample configuration that can read some of the Tealium and SiteCatalyst values.
Here is the video I’ve created demonstrating how to use the extension. Can you guess what company am I working based on the sample sites I’ve shown on the video?
Enjoy and share.