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.

This entry was posted in Web Development and tagged , , , , , , , , , , , . Bookmark the permalink.

Related Posts

4 Responses to Introducing DOM Watcher – A Google Chrome Extension

  1. jojo siao says:

    Hello,

    Very nice tool!

    btw, i tried the one in Github since i can’t download from Chrome Web Store.
    when I tried to use it, it doesn’t show anything. Please help!
    Thanks!

  2. lysender says:

    Hey Jojo,

    If you want to take the github version path, you have to load the extension as unpacked extension at extensions page. Just enable developer mode.

    Better get it at Chrome Webstore as it gets updated automatically once installed.

    Thanks,
    Lysender

  3. Daniel R says:

    Writing a custom extension… I have to admit, I’d never considered that when I had a need while debugging web. I’ll keep that in mind during future projects, if it’ll save me a lot of time. Thanks for the inspiration!

  4. lysender says:

    Hi Daniel R.,

    Depending on your needs, you can design it in a way that it will save you a lot of time. In my case, instead of using Firefox, clicking on Firebug/DOM tab and search for utag_data, all I have to do is click a button in Chrome, then all values I need to know will be displayed.

    Thanks,
    Lysender

Leave a Reply

Your email address will not be published. Required fields are marked *