Enhanced browser console debugging with Charles Proxy

This article demonstrates how to use Charles Proxy to obtain more advanced output from utag.DB.

By adding a rewrite setting to Charles Proxy, the regular errors from utag.DB will be displayed as browser level console warnings. This allows for the Warnings filter in the console to be used when filtering errors, warnings, and info output.

Prerequisites

Create rewrite rules from XML file

  1. Save the following XML as a file on your computer.

    Charles-utagdb-upgrade.xml

  2. Open Charles Rewrite Settings (Tools > Rewrite).

  3. Click Import (see image below).

  4. Select the file and click Open.

  5. Click Apply and OK to complete the import. Charles uTag DB Upgrade

  6. Refresh the browser window loading your site with Tealium. You should now be able to see the warnings output in the console as shown in the sample below.

Create rewrite rules manually

  1. Open Charles Proxy.

  2. From the menu, navigate to Tools > Rewrite.

  3. In the dialog, click the Add button on the left-hand side to add a new set. Title it uTag DB Upgrade.

  4. Under the Location section, click the Add button to add a location.

  5. Copy and paste the below code into the Path text field:

    /*/utag.js
    
  6. Leave the rest of the fields blank and click OK.

  7. Under the Type/Action section, click the Add button to add the first rewrite rule.

    1. In the Type dropdown, select Body.
    2. In the Where section, ensure Response is checked.
    3. In the Match and Replace sections, copy and paste the below code into the corresponding text fields.
      For the Match section, place in the Value field
      ;utag.o['
      
      For the Replace section, place in the Value field:
      ; utag.ut.typeOf = function(e) {return ({}).toString.call(e).match(/\s([a-zA-Z]+)/)[1].toLowerCase();}; utag.DB = function(a, b) {   var t;   if (utag.cfg.utagdb === false) {     return;   } else if (typeof utag.cfg.utagdb == "undefined") {     utag.db_log = [];     b = document.cookie + '';     utag.cfg.utagdb = ((b.indexOf('utagdb=true') >= 0) ? true : false);   }   if (utag.cfg.utagdb === true) {     var con = window.console;     if (utag.ut.typeOf(a) === "error") {       utag.db_log.push(a);       t = "";       if (a.stack && a.stack.split) {         t = a.stack.split("\n")[1].replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').replace(/^at\s/, "");       }       if (con) {         t = "utag - Error : " + t + " "+ a.message;         if (con.warn) {           con.warn(t);         } else if (con.log){           con.log(t);         }       }     } else {       t = (utag.ut.typeOf(a) == "object") ? utag.handler.C(a) : a;       utag.db_log.push(t);       if (con && con.log) con.log("utag - ", t);     }   } };utag.o['
      
    4. In the Replace section, ensure the Replace first option is selected.
    5. Your Rewrite Rule should look something like this:
      Rewrite rule
    6. Click the OK button to save the rule.
  8. Under the Type/Action section, click the Add button to add the second rewrite rule.

    1. In the Type dropdown, select Body.
    2. In the Where section, ensure Request is checked.
    3. In the Match and Replace sections, copy and paste the below code into the corresponding text fields.
      For the Match section, place in the Value field
      \}catch\((.*?)\)\{
      
      For the Replace section, place in the Value field
      }catch($1){utag.DB($1);
      
    4. In the Match section, ensure the Regex box is checked.
    5. In the Replace section, ensure the Replace first option is selected.
    6. Click the OK button to save the rule.
    7. Your Rewrite Rule should look something like this:
      Rewrite rule example
  9. The uTag DB Upgrade set with the two included rewrites should look like this when complete: uTag DB Upgrade

  10. Click Apply to apply the rewrite and then click OK to close the dialog.

  11. Refresh the browser window loading your site with Tealium. You should now be able to see the Warnings output in the console as shown in the sample below.

Output sample

Below is a sample of the enhanced output as shown in Google Chrome DevTools. You can see that instead of just showing as Info output, the error is showing as an expandable warning, which can be filtered by selecting the Warnings option in the dropdown next to the Filter input box.

Output sample

Was this page helpful?

This page was last updated: January 7, 2023