コンソールデバッギング

ここでは、Javascriptとリコメンデーションにおけるデバッギングの問題について詳しく説明します。ここでは再発性のある問題について説明します。緊急度の高い問題については、サポートまでご連絡ください。ほとんどのケースでは、このデバッギングに関する説明は必要ないはずです。
ここでの詳しい説明は、GoogleのChromeブラウザからアクセスできる、Google Chrome Developer Tools向けに書いています。問題の検証を行う際には、必ずDeveloper Toolsを開いた状態でページを読み込むようにしてください。これまでにDeveloper Toolsを使ったことがない場合は、Chrome DevTools Overviewを参照してください。その他のブラウザでもツールを使って、同じようなデバッギングを行うことができます。

1. Diagnostics

To diagnose basic issues with the JavaScript SDK, execute $p("runDiagnostics") in your browser's web console. This should work if the snippet loading LiftIgniter has executed, and the load of our JavaScript file was successful.

2. Network panel（ネットワークパネル）

Network panelを使用して、あらゆるドメインに対して送られたリクエストをトラックすることができます。リクエストヘッダ、レスポンス、リクエストの処理時間を取得することができます。LiftIgniterに関連するリクエストは、すべてpetametrics.comのもとでやり取りされます。これらのリクエストだけを見る場合は、ネットワークパネル上部にある検索バーに、ページを読み込む前に"petametrics"と入力してください。

リクエストを送る先のサブドメインは3つあります:

cdn.petametrics.comは、我々の Javascript用サーバです。これは、お客様のHTMLのhead部にコピー＆ペーストしたJavascriptのスニペットによって読み込まれます。
query.petametrics.comは、ページ閲覧や、死活監視や、ウィジェットに関連して、表示や、可視（Visible）状態、クリックされるなどのイベントのアクティビティを受け取ります。また、Javascript SDKを通じて送るリコメンデーションのクエリも受け取ります。

この3つのサブドメインはSSL証明書を保持していて、HTTPSを使用してユーザがアクセスすると、HTTPS通信で読み込まれます。

ここでデバッギングにおいて重要ないくつかのオプションを説明します:

Preserve logオプションは、ページ間を移動してもリクエストに関する情報を保持します。リクエストヘッダと遅延時間の情報を保持しますが、他のページに移動するとレスポンスのデータは保持されません。これはデバッギングにおいては特に悪い影響はありません。
Disable cacheオプションは、すべてのページ読み込みにおいて強制的にすべてのリソースを再読込させます。一方で、オプションを外すことでリソースはブラウザのキャッシュから読みこれまれるようになります。これはJavascriptを取得する際においてのみ関係します。APIの通信とModelクエリは同一のものであることがないため、常にサーバと通信が行われます。

1427 — Sequence of petametrics.com events captured in the Chrome Network panel when visiting www.liftigniter.com

3. Applicationパネル（以前はResourcesパネルと呼ばれていました）

Applicationパネルには、LiftIgniterに関連する"Local Storage"と、"Cookies"の2つのセクションがあります。"Local Storage"は、閲覧またはクリックしたURLなどの情報をハッシュした形式でストアする際に使います。また、ページ間の移動の際に送る必要があるイベントをバックアップするために使います。Safariのプライベートブラウジングではこれは使えませんが、FirefoxとChromeでは使うことができます。

お客様のWebサイトがHTTPとHTTPSの両方を使って通信している場合は、CookieはHTTPとHTTPSの間で正常に共有されているはずです。ただし、ローカルストレージは別々に管理されています。

我々のCookieはすべて（クロスサイトリコメンデーションを有効にしている場合は、ここで使用するCookieを除く）ファーストパーティーCookieとしてお客さまのドメインのもとにストアされ、"Cookies"のセクションでアクセスできるようになっています。LiftIgniterのCookieは、すべて"_ig"で始まっているものです。

4. Elementsパネル

Elementsパネルは、表示されたWebページのHTMLを見ることができます。ここからHTMLとCSSを編集することで、その変更をテストすることもできます。Webページ上のエレメントを右クリックして"Inspect Element"を選択すると、そのエレメントに対するHTMLを見ることができます。

Elementsパネルは、お客様のWebページにLiftIgniterのリコメンデーションが正常に表示されているかを確認する際に活用できます。

5. Javascriptコンソールパネル

Javascriptコンソールパネルは、Javascript SDKの変数の値を確認したり、テストとして関数を実行する上で活用できます。関数は"$p"を使ってコールします。

このパネルでは、Javascriptのエラーやコンソールログをストアします。エラーは赤いフォントにピンクの背景色で表示します。これらはスクリプトの読み込みや、その他のJavascriptに関連するエラーを含みます。コンソルログは黒いフォントに白い背景色で表示します。

6. Emulator（エミュレータ）

Emulatorは、様々なデバイスのタイプや、ネットワーク速度（ネットワーク環境が悪い場合）などを再現して表示する機能です。これは、Webページのモバイルやタブレットでの表示を確認するために活用します。

Emulatorは、OS間の違いは再現しません。あくまでもWebサイトを表示するスクリーンサイズと、ユーザ環境のユーザエージェントを再現します。OSやデバイスごとのWebサイトの表示の詳細は、Emulatorでは確認ができないため、これらのテストはクロスブラウザのテスト用ツールを使用する必要があります。