# トラブルシューティング用のHARファイルの作成 TD Consoleインターフェースの使用やパーミッションに関する問題など、トラブルシューティングが困難な問題が発生した場合、TDサポートチームにHTTP Archive（HAR）ファイルを提供することが非常に有用です。HARファイルは、ウェブブラウザとサイトとのやり取りをログに記録したJSON形式のアーカイブファイルです。これらのファイルの一般的な拡張子は.**har**で、問題に関してサポートに送信するメールにこれらのファイルを添付できます。 HARファイルの作成方法は以下の通りです： * [Chrome（またはChromiumベースのブラウザ）でHARファイルを作成する](#creating-an-har-file-in-chrome-or-chromium-based-browsers) * [FirefoxでHARファイルを作成する](#creating-an-har-file-in-firefox) * [SafariでHARファイルを作成する](#creating-an-har-file-in-safari) * [EdgeでHARファイルを作成する](#creating-an-har-file-in-edge) # Chrome（またはChromiumベースのブラウザ）でHARファイルを作成する 1. Chromeブラウザで、記録したいページに移動します。 2. **カスタマイズ > その他のツール > デベロッパーツール**を選択します。 ![](/assets/chromdevelopertools.a45212983c7f2f61e3c2db481835b07dde63bb5a25a2e149eafb3688b09694ab.4a935a35.png) 3. **Network**タブを選択します。 4. **Preserve log**チェックボックスを選択します。 5. **Stop recording network log**ボタンを選択します。 ![](/assets/chromestoprec.dbb7475990ed367905b18d3adbd8f2387c4417c43cdba85700953086f86f6e3a.4a935a35.png) 6. **Clear**ボタンを選択して現在のログをクリアします。 7. **Record network log**ボタンを選択して記録を開始します。 8. ページを更新してから、発生した問題を再現するタスクを実行します。 9. 問題が再現された後、**Export HAR**ボタンを選択します。 10. ファイルを保存する場所を指定し、**Save**を選択します。 HARファイルが保存されます。TDサポートへのメールにHARファイルのコピーを添付してください。 以下は、HARファイルがどのように見えるかの部分的な例です： Chrome HARファイルの例 ```json { "log": { "version": "1.2", "creator": { "name": "WebInspector", "version": "537.36" }, "pages": [ { "startedDateTime": "2022-11-15T21:00:49.383Z", "id": "page_1", "title": "https://console.treasuredata.com/app/integrations/catalog", "pageTimings": { "onContentLoad": 1184.9240000010468, "onLoad": 1231.1599999957252 } } ], "entries": [ { "_initiator": { "type": "script", "stack": { "callFrames": [ { "functionName": "", "scriptId": "86", "url": "https://console.treasuredata.com/app/assets/releases/e6c1a7a13/js/vendors-node_modules_sentry_webpack-plugin_src_sentry-webpack_module_js-node_modules_sentry_c-d72b7c.97b93a73ceda881466c9.js", "lineNumber": 1, "columnNumber": 110359 }, . . . . ``` # FirefoxでHARファイルを作成する 1. Firefoxブラウザで、記録したいページに移動します。 2. **メニュー > その他のツール > ウェブ開発ツール**を選択します。 ![](/assets/firefoxwebdevelopertools.94367effd6f8f7be895f1c2c67c0aaa4c7c77e3c8d88df4085bcbec792c2e5e3.4a935a35.png) 3. **Network**タブを選択します。 4. **Network Settings > Persist Logs**を選択します。 ツールは自動的に記録を開始します。 ![](/assets/firefoxpersistlogs.ec9adf187f3967d49a4ff14af1658f620f170a1586820ab07c40b91fc5a81542.4a935a35.png) 5. ページを更新してから、発生した問題を再現するタスクを実行します。 6. 問題が再現された後、**Network Settings > Save All As HAR**を選択します。 ![](/assets/firefoxsaveashar.abfeafd528d4549dfe9cd3714f31239dc7ec01d0c3e3cf7ff41dd591c7faad77.4a935a35.png) 7. ファイルを保存する場所を指定し、**Save**を選択します。 HARファイルが保存されます。TDサポートへのメールにHARファイルのコピーを添付してください。 以下は、HARファイルがどのように見えるかの部分的な例です： Firefox HARファイルの例 ```json { "log": { "version": "1.2", "creator": { "name": "Firefox", "version": "98.0" }, "browser": { "name": "Firefox", "version": "98.0" }, "pages": [ { "startedDateTime": "2022-11-15T13:46:28.496-08:00", "id": "page_1", "title": "Loading...", "pageTimings": { "onContentLoad": 453, "onLoad": 2990 } } ], "entries": [ { "pageref": "page_1", "startedDateTime": "2022-11-15T13:46:28.496-08:00", "request": { "bodySize": 0, "method": "GET", "url": "https://console.treasuredata.com/app/assets/releases/2b6a3c36c/fonts/nunito-latin-400.aeb21c64a21841c44124.woff2", "httpVersion": "HTTP/2", "headers": [ { "name": "Host", "value": "console.treasuredata.com" }, { "name": "User-Agent", "value": "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" }, . . . . ``` # SafariでHARファイルを作成する 1. Safariブラウザで、記録したいページに移動します。 2. **Safari > 環境設定**を選択します。 ![](/assets/safaripref.f656d87d21bcac6891f6ebc1eb27fb31902dec56302d5d42a10afdf9df3aa6d4.4a935a35.png) 3. **詳細**タブを選択します。 4. **メニューバーに"開発"メニューを表示**チェックボックスを選択します。 ![](/assets/safarishowdevmenu.d2318dea2f65b2140f910a595165c149eae036e0667687519cb2c3e31806f9b1.4a935a35.png) 5. 環境設定を閉じます。 6. **開発 > Webインスペクタを表示**を選択します。 ![](/assets/safarishowwebinspector.7863033df0f5c736b43a996e8be4cd03522c5e7f55c8ca6567540c4545c9275d.4a935a35.png) Webインスペクタペインが表示されます。 7. **その他のフィルタオプション > Preserve Log**を選択します。 ![](/assets/safaripreservelog.0363b008c9625087c3accf70cf25a34c3a096920860f2a1884ad8ccb906695cb.4a935a35.png) 8. ページを更新してから、発生した問題を再現するタスクを実行します。 9. 問題が再現された後、**Export**を選択します。 ![](/assets/safariharexport.34df425d2eada651340d3a28b560fb010af5a5d9db4929bbead4f2ba62a4bdd0.4a935a35.png) 10. ファイルを保存する場所を指定し、**Save**を選択します。 HARファイルが保存されます。TDサポートへのメールにHARファイルのコピーを添付してください。 以下は、HARファイルがどのように見えるかの部分的な例です： Safari HARファイルの例 ```json { "log": { "version": "1.2", "creator": { "name": "WebKit Web Inspector", "version": "1.0" }, "pages": [ { "startedDateTime": "2022-11-15T22:21:34.299Z", "id": "page_0", "title": "https://console.treasuredata.com/app/integrations/catalog", "pageTimings": { "onContentLoad": 141321.06368899986, "onLoad": 141321.22318600887 } } ], "entries": [ { "pageref": "page_0", "startedDateTime": "2022-11-15T22:20:02.214Z", "time": 230.6818735523848, "request": { "method": "GET", "url": "https://console.treasuredata.com/app/index.md", "httpVersion": "HTTP/2", "cookies": [ { "name": "_td_global", "value": "d9c63b54-1747-42d6-9fab-4e73e107a0c9" }, { "name": "XSRF-TOKEN-PRODUCTION", "value": "0dvE6MUbbR6%2FTFbj456esUp22pQeZigfplhQA6L7POKt5BNGb3LyqKdKJB53okMFobyI%2BsvVBZCaPhPSEflhaw%3D%3D" }, { "name": "tdid_production", "value": "NVE3MTc%3D%0A" }, . . . . ``` # EdgeでHARファイルを作成する 1. Edgeブラウザで、記録したいページに移動します。 2. **設定 > その他のツール > 開発者ツール**を選択します。 ![](/assets/edgedevtools.fbaded8cfa66963f816aa8f754821a9fb4a32f118717de711f1a971b2fc55ca0.4a935a35.png) 3. 開発者ツールペインで、**Network**タブを選択します。 4. **Preserve log**チェックボックスを選択します。 5. ボタンが赤色の場合、**Stop recording**ボタンを選択します。 ![](/assets/edgestoprec.aead4c6cd19201f7f9aea70aa84048119a53fabdcb057851406d369948989a85.4a935a35.png) 6. **Record network log**ボタンを選択します。 ![](/assets/edgerec.eb046a7f16b791ce1f68f11b56636f43dc6bbf4f56aff93b789dff2702639411.4a935a35.png) 7. ページを更新してから、発生した問題を再現するタスクを実行します。 8. 問題が再現された後、**Stop recording**ボタンを選択します。 ![](/assets/edgestop.669133efa8fd1281277eb5b636ba2abcb4525df79a4755e4564051f4f22b1e07.4a935a35.png) 9. **Export HAR**を選択します。 ![](/assets/edgeexporthar.e852b93897f44d73b2e6dab76cab63309485f5517d0695ebb4e8352fa11b7650.4a935a35.png) 10. ファイルを保存する場所を指定し、**Save**を選択します。 HARファイルが保存されます。TDサポートへのメールにHARファイルのコピーを添付してください。 以下は、HARファイルがどのように見えるかの部分的な例です： Edge HARファイルの例 ```json { "log": { "version": "1.2", "creator": { "name": "WebInspector", "version": "537.36" }, "pages": [], "entries": [ { "_initiator": { "type": "script", "stack": { "callFrames": [ { "functionName": "", "scriptId": "111", "url": "https://console.treasuredata.com/app/assets/releases/2b6a3c36c/js/main-bde52cb3.cb1f0d77897ff34fa00d.js", "lineNumber": 0, "columnNumber": 94531 }, { "functionName": "", "scriptId": "93", "url": "https://console.treasuredata.com/app/assets/releases/2b6a3c36c/js/main-07c6e912.664482a141b27fd0aad3.js", "lineNumber": 0, "columnNumber": 242572 }, { "functionName": "l", "scriptId": "66", "url": "https://console.treasuredata.com/app/assets/releases/2b6a3c36c/js/vendors-node_modules_react_index_js-node_modules_react_jsx-runtime_js-node_modules_redux-logg-46bbaa.744486f4f0ac7ec4b567.js", "lineNumber": 0, "columnNumber": 15426 }, ```