Enhanced Browser Console Debugging with Charles Proxy

[#1]

Overview

This article will show 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 a browser level console warnings. This allows for the Warnings filter in the console to be used when filtering errors, warnings, and info output.

• Overview
• Prerequisites
• Create Rewrite Rules from XML File
• Create Rewrite Rules Manually
• Output Sample

Prerequisites

• Charles Proxy Web Debugging Application installed on your computer.
• utag.DB output is enabled in the browser.

Create Rewrite Rules from XML File

1. Save the attached xml file titled Charles_uTagDB_Upgrade locally to your computer.
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.

   

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. Select Tools > Rewrite from the menu.
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.
   1. Copy and paste the below code into the Path text field:

      /*/utag.js

   2. Leave the rest of the fields blank and click OK.
5. 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:
      
   6. Click the OK button to save the rule.
6. 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:
      

7. The "uTag DB Upgrade" set with the two included rewrites should look like this when complete:

   

8. Click Apply to apply the rewrite and then click OK to close the dialog.
9. 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.