Introducing DOM Watcher – A Google Chrome Extension

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.

Original target

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.

Use

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.

Install

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.

Installing DOM Watcher

Usage

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:

{"location":{"href":1}}

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 foo and bar, you write it below:

{"location":{"href":1},"foo":1,"bar":1}

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.

{"utag_data":{"site_name":1,"page_name":1,"page_type":1,"section_name":1},"s":{"pageName":1,"channel":1}}

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?

Open Source

This project is open source and can be viewed at github. For issues and suggestions, kindly shoot a comment and issues shall be listed here for prioritization.

Enjoy and share.