Debugging JavaScript Code Extensions

[pmeyerdk]

Hi all,

I generally want to be able to debug JavaScript Code Extensions as easy as possible, so I like to output debug information to the browser console, by using the utag.DB function.
Yes, I know that anyone could enable the debug cookie and see that information, but I still do like to add it.

When creating JavaScript Code Extensions, I therefore almost alway use this minimal debugging "scaffold".

utag.DB("--- Extension: Test");
try {

    // Insert Extension code here

} catch (error) {
    utag.DB("--- Error - Extension: Test");
    utag.DB(error);
}

This will then give me information about the Extension name, when the Extensions runs, but also any unhandled JavaScript errors, also together with the name of the extension.

If I then create an Extension like this, but with "Pre Loader" scope, I include and use my own function, basically doing the same as the utag.DB function.

function tiqDebug(debugText) {
    var tiqDebugMode = document.cookie.toLowerCase().indexOf('utagdb=true') > -1 ? true : false;
    if (tiqDebugMode && debugText) {
        console.debug(debugText);
    }
}

How are you guys generally doing this?

Any comments and input will be much appreciated :-)

Best regards,

Peter

[abrahameaso]

Hello @pmeyerdk,

Thank you for the detailed post pmeyerdk. 

Per my review on the tealium utag.DB code, it looks very similar to the custom code you have posted here. 

Here is a quick tip i could share to verify the utag.DB code: Open Google Chrome Web Browser and open a website with tealium tags implemented. Use the "Text search across all sources" option(or click Ctrl+Shift+F) and search for the text "DB: function" to find the utag.DB function definition. Also you can find this function within utag.js by simply searching in utag.js file on page. 

Hope this helps understand the utag.DB function better.

Thanks

Abraham

[pmeyerdk]

Thank you for the input!

But I do know how to use the utag.DB function.

Since utag.DB isn't available when Pre Loader scoped Extensions run, I made my own similar function for that purpose alone.
In Extensions not scoped to Pre Loader, I do use the normal utag.DB function, since it is available for use there.

Best regards,
Peter

[abrahameaso]

Hello @pmeyerdk,

Thank you for the additional inputs pmeyerdk.

Totally understand your point. Looks like Pre-loader scoped extensions are ran before the Tealium library runs so utag or its functions(utag.DB) are unavailable. 

I would wait and see if any other community experts or tealium contacts have additional alternatives to propose or we just have to live with the custom code you shared.

@kathleen_jo

Thanks

Abraham

[kathleen_jo]

HHHhhhmmm... perhaps @per_lundqvist or @thyngster can weigh in? 

Maybe even @dan_george or @adrian_browning? 

[pmeyerdk]

I actually don't have an issue with my own described approach.
The reason for writing here, was more to share my approach with others, and possibly get to know how other people prefer to do stuff like this.

Best regards,
Peter Meyer

[kathleen_jo]

Ah got it, @pmeyerdk! Thank you so much for sharing! Keep it coming!

[mitchellt]

I like this framework...  do you leave it in production code as well?  If so, then I can see it would speed debugging if an unexpected situation came up.  Thanks for posting your working concept @pmeyerdk!

[pmeyerdk · Accepted solution]

Thank you @mitchellt :-)

I wanted to share, to hopefully get to know how others did something like this themselves.

Yes, I do leave in production as well, even though I know, that everyone could enable the debug cookie and see it.

As you mention, it makes it a lot easier to debug unexpected issues, at the time they might occur.

Very simple, and does the job.