Charles Proxyを使用したエンリッチメントされたブラウザコンソールデバッグ

Charles Proxyに書き換え構成を追加することで、utag.DBからの通常のエラーがブラウザレベルのコンソール警告として表示されます。これにより、エラー、警告、情報出力をフィルタリングする際にコンソールの警告フィルタを使用できます。

前提条件

• お使いのコンピュータにCharles Proxy Web Debugging Applicationがインストールされていること。
• ブラウザでutag.DB outputが有効になっていること。

XMLファイルから書き換えルールを作成する

1. 以下のXMLをコンピュータのファイルとして保存します。
   

   Charles-utagdb-upgrade.xml

   ```xml
   <?xml version='1.0' encoding='UTF-8' ?>
   <?charles serialisation-version='2.0' ?>
   <rewriteSet-array>
     <rewriteSet>
       <active>true</active>
       <name>uTag DB Upgrade</name>
       <hosts>
         <locationPatterns>
           <locationMatch>
             <location>
               <path>/*/utag.js</path>
             </location>
             <enabled>true</enabled>
           </locationMatch>
         </locationPatterns>
       </hosts>
       <rules>
         <rewriteRule>
           <active>true</active>
           <ruleType>7</ruleType>
           <matchValue>;utag.o[&apos;</matchValue>
           <matchHeaderRegex>false</matchHeaderRegex>
           <matchValueRegex>false</matchValueRegex>
           <matchRequest>false</matchRequest>
           <matchResponse>true</matchResponse>
           <newValue>; 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 == &quot;undefined&quot;) {     utag.db_log = [];     b = document.cookie + &apos;&apos;;     utag.cfg.utagdb = ((b.indexOf(&apos;utagdb=true&apos;) &gt;= 0) ? true : false);   }   if (utag.cfg.utagdb === true) {     var con = window.console;     if (utag.ut.typeOf(a) === &quot;error&quot;) {       utag.db_log.push(a);       t = &quot;&quot;;       if (a.stack &amp;&amp; a.stack.split) {         t = a.stack.split(&quot;\n&quot;)[1].replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, &apos;&apos;).replace(/^at\s/, &quot;&quot;);       }       if (con) {         t = &quot;utag - Error : &quot; + t + &quot; &quot;+ a.message;         if (con.warn) {           con.warn(t);         } else if (con.log){           con.log(t);         }       }     } else {       t = (utag.ut.typeOf(a) == &quot;object&quot;) ? utag.handler.C(a) : a;       utag.db_log.push(t);       if (con &amp;&amp; con.log) con.log(&quot;utag - &quot;, t);     }   } };utag.o[&apos;  </newValue>
           <newHeaderRegex>false</newHeaderRegex>
           <newValueRegex>false</newValueRegex>
           <matchWholeValue>false</matchWholeValue>
           <caseSensitive>false</caseSensitive>
           <replaceType>1</replaceType>
         </rewriteRule>
         <rewriteRule>
           <active>true</active>
           <ruleType>7</ruleType>
           <matchValue>\}catch\((.*?)\)\{</matchValue>
           <matchHeaderRegex>false</matchHeaderRegex>
           <matchValueRegex>false</matchValueRegex>
           <matchRequest>true</matchRequest>
           <matchResponse>false</matchResponse>
           <newValue>}catch($1){utag.DB($1);</newValue>
           <newHeaderRegex>false</newHeaderRegex>
           <newValueRegex>false</newValueRegex>
           <matchWholeValue>false</matchWholeValue>
           <caseSensitive>false</caseSensitive>
           <replaceType>1</replaceType>
         </rewriteRule>
       </rules>
     </rewriteSet>
   </rewriteSet-array>
   ```
   

2. Charles Rewrite Settings (ツール > 書き換え)を開きます。

3. インポートをクリックします（下の画像を参照）。

4. ファイルを選択し、開くをクリックします。

5. 適用とOKをクリックしてインポートを完了します。

   

6. Tealiumをロードしているブラウザウィンドウを更新します。これで、コンソールに警告の出力が表示されるようになります。下のサンプルを参照してください。

手動で書き換えルールを作成する

1. Charles Proxyを開きます。

2. メニューからツール > 書き換えに移動します。

3. ダイアログで、左側の追加ボタンをクリックして新しいセットを追加します。タイトルはuTag DB Upgradeとします。

4. ロケーションセクションで、追加ボタンをクリックしてロケーションを追加します。

5. 下記のコードをパステキストフィールドにコピー＆ペーストします：

   /*/utag.js
   

6. 他のフィールドは空白のままにし、OKをクリックします。

7. タイプ/アクションセクションで、追加ボタンをクリックして最初の書き換えルールを追加します。

   1. タイプドロップダウンでボディを選択します。
   2. 場所セクションで、レスポンスがチェックされていることを確認します。
   3. マッチと置換セクションで、下記のコードを対応するテキストフィールドにコピー＆ペーストします。
      マッチセクションの値フィールドに以下を配置します

      ;utag.o['
      

      置換セクションの値フィールドに以下を配置します：

      ; 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. 置換セクションで、最初に置換オプションが選択されていることを確認します。
   5. あなたの書き換えルールは次のようになるはずです：
      

      

   6. ルールを保存するためにOKボタンをクリックします。

8. タイプ/アクションセクションで、追加ボタンをクリックして2つ目の書き換えルールを追加します。

   1. タイプドロップダウンでボディを選択します。
   2. 場所セクションで、リクエストがチェックされていることを確認します。
   3. マッチと置換セクションで、下記のコードを対応するテキストフィールドにコピー＆ペーストします。
      マッチセクションの値フィールドに以下を配置します

      \}catch\((.*?)\)\{
      

      置換セクションの値フィールドに以下を配置します

      }catch($1){utag.DB($1);
      

   4. マッチセクションで、正規表現ボックスがチェックされていることを確認します。
   5. 置換セクションで、最初に置換オプションが選択されていることを確認します。
   6. ルールを保存するためにOKボタンをクリックします。
   7. あなたの書き換えルールは次のようになるはずです：
      

      

9. 完成したときに、2つの書き換えが含まれるuTag DB Upgradeセットは次のようになります：

   

10. 書き換えを適用するために適用をクリックし、ダイアログを閉じるためにOKをクリックします。

11. Tealiumをロードしているブラウザウィンドウを更新します。これで、コンソールに警告の出力が表示されるようになります。下のサンプルを参照してください。

出力サンプル

以下は、Google Chrome DevToolsで表示されるエンリッチメントされた出力のサンプルです。情報出力として表示されるだけでなく、エラーが展開可能な警告として表示され、フィルタ入力ボックスの隣のドロップダウンで警告オプションを選択することでフィルタリングできます。