Salesforce B2C CommerceのSFRAデバック方法・ログ出力方法

※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

この記事では以前紹介した[デプロイ方法: Salesforce B2C CommerceのSFRA開発環境セットアップ＆デプロイ方法](https://qiita.com/syunyama/items/21c71ac9c49b332e126d)
でデプロイしたコードをデバック方法とログの出力方法を紹介します！

# デプロイしたコードの確認
[Salesforce B2C CommerceのSFRA開発環境セットアップ＆デプロイ方法](https://qiita.com/syunyama/items/21c71ac9c49b332e126d) で `sample_cartridge` という名前のカートリッジをデプロイして適用しましたが、まずはその内容を復習しましょう！

`sample_cartridge/controllers/Hello.js`というファイルの中に下記のようなコードを作成しました。

```js
'use strict';

var server = require('server');
var Logger = require('dw/system/Logger');

server.get('Start', function (req, res, next) {

    var logger = Logger.getLogger("TEST_FilePrefix", "TEST_Category");
    logger.error("プロブレム: {0}", "問題！！");

    res.print('<h1>Hello World</h1>');
    next();

});

module.exports = server.exports();
```


その結果、[`https://{B2C Commerceのホスト}/on/demandware.store/Sites-{サイト名}-Site/ja_JP/Hello-Start`](https://zzjs-021.sandbox.us02.dx.commercecloud.salesforce.com/on/demandware.store/Sites-RefArch-Site/ja_JP/Hello-Start)  に遷移すると、「Hello World」が表示されていることを確認できました。

今回はこのコードを利用してデバック&ログ出力します！

![スクリーンショット 2021-11-01 19.45.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/36cc56ae-a5e4-6484-73b9-00ec2701c98f.png)




# デバッグ方法

## 手順概要

1. Visual Studio Codeの設定
2. デバックの実行



## 前提

* [Salesforce B2C CommerceのSFRA開発環境セットアップ＆デプロイ方法](https://qiita.com/syunyama/items/21c71ac9c49b332e126d) の内容が完了している。



## 手順詳細

### 1. Visual Studio Codeの設定

* 左ナビのRun & Debugアイコンをクリックし、表示されたページ内の「create a launch.json file」をクリックし、デバックするカートリッジがあるワークスペース(今回はsample)を選択
![スクリーンショット 2021-11-01 18.13.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/406fddd1-d431-7a17-9a14-6d865c7af643.png)




* さらに「Edge: Launch」を選択
![スクリーンショット 2021-11-01 18.13.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/1ecc5308-bc03-8ce6-ead9-ff39df44ebbf.png)




* ワークスペース内の `.vscode/launch.json` にファイルが生成されるので、下記の内容に修正

```json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "prophet",
            "request": "launch",
            "name": "Attach to Sandbox"
        }
    ]
}
```



![スクリーンショット 2021-11-01 18.15.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/e17f8e1d-5998-26c9-c5f8-684db66b1fc1.png)




### 2. デバックの実行

* デバッグしたい行の左をクリックし、ブレークポイントを設定する
![スクリーンショット 2021-11-01 18.16.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/60a19e95-4c44-6092-4455-fc2fac7bae81.png)





* 左ナビのRun & Debugアイコンをクリックし、表示されたページ内の上部から「Attach to Sandbox」(launch.json内のname)を選択
![スクリーンショット 2021-11-01 18.16.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/3982d37d-a84f-4cad-45b6-593e24dbe517.png)




* 選択したボックス横にあるスタートボタンをクリックし、でバックモードにする
![スクリーンショット 2021-11-01 18.17.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/197655ad-c030-e297-362d-6a758656353a.png)





* ブラウザで [`https://{B2C Commerceのホスト}/on/demandware.store/Sites-{サイト名}-Site/ja_JP/Hello-Start`](https://zzjs-021.sandbox.us02.dx.commercecloud.salesforce.com/on/demandware.store/Sites-RefArch-Site/ja_JP/Hello-Start)  に遷移するとブレークポイントに止まります。さらにその時点の変数を左の項目の「VARIABLES」から確認できます。デバッグモードを終了したい場合は停止アイコンをクリックしてください。
![スクリーンショット 2021-11-01 18.20.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/fc41d37f-7d39-9573-610c-206e2bd10ddc.png)






# ログの出力・確認方法



## 手順概要

1. (必要な場合)ログカテゴリの設定
2. コードの追加
3. Request Logでのログの確認
4. ログファイルの確認



## 前提

* [Salesforce B2C CommerceのSFRA開発環境セットアップ＆デプロイ方法](https://qiita.com/syunyama/items/21c71ac9c49b332e126d) の内容が完了している。



## 手順詳細

### 1. (必要な場合)ログカテゴリの設定

ログカテゴリを設定して、カテゴリごとにログレベルの設定が可能です。
カテゴリ設定をしなくてもログ出力は可能ですが、rootのログレベルになります。


* Business Managerの　`管理　＞　オペレーション　＞　カスタムログ設定`　に遷移し、カスタムログフィルターに任意のカテゴリ名を設定（今回は`TEST_Category`）
* ログファイルの設定で出力するログレベルにチェックを入れる（デフォルトで全部入っているので、おそらく入れる必要はないですが、ここがチェックされていないと出力されないので注意）
![スクリーンショット 2021-11-04 15.35.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/9bde463e-3fca-61d8-24db-aae29e932b1a.png)


### 2. コードの追加

出力にはLoggerクラスを利用します。Loggerクラスの詳細については[こちら](https://documentation.b2c.commercecloud.salesforce.com/DOC1/topic/com.demandware.dochelp/DWAPI/scriptapi/html/api/class_dw_system_Logger.html?resultof=%22%4c%6f%67%67%65%72%22%20%22%6c%6f%67%67%65%72%22%20)をご覧ください。

[デプロイしたコードの確認](#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%97%E3%81%9F%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E7%A2%BA%E8%AA%8D)　で確認したコードの中にあった3つの行をそれぞれ紹介します



* `var Logger = require('dw/system/Logger');`

    Loggerクラスをインポートしています。

* `var logger = Logger.getLogger("TEST_FilePrefix", "TEST_Category");`

    ファイル出力時にプリフィックスとなる文字列(`TEST_FilePrefix`)とログカテゴリ(`TEST_Category`)を指定し、オブジェクトを取得しています。

* `logger.error("プロブレム: {0}", "問題！！");`

    errorメソッドを利用してERRORログレベルで出力しています。さらにこのメソッドでは文字列をメッセージに埋め込むことも可能です。その他のログレベルを出力するためのメソッドは[こちら](https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp?topic=%2Fcom.demandware.dochelp%2FDWAPI%2Fscriptapi%2Fhtml%2Fapi%2Fclass_dw_system_Log.html)のMethod Summaryをご覧ください。




### 3. Request Logでのログの確認



* Business Manager上部の「Toolkit」をクリックして、Toolkitを表示
![スクリーンショット 2021-11-04 15.56.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/92ef0763-38b4-5f86-3d68-dbce7dba6d32.png)



* Toolkit画面の右上にあるリクエストログアイコンをクリックし、リクエストログ画面を表示
![スクリーンショット 2021-11-04 15.56.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/5e2644fc-472f-6e2f-3c20-75b8eced75cc.png)



* リクエストログ画面の左上にある検索ボックスから出力された文字列を検索し、ログが正しく出力されていることを確認（今回は `プロブレム: 問題！！`という文字列を検索）
![スクリーンショット 2021-11-04 15.57.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/936d57c6-fba5-6ab6-8fa1-28eb5dd40b70.png)




### 4. ログファイルの確認

出力された文字列はリクエストログ画面以外にも、出力ファイルから確認もできますし、そのファイルのダウンロードも可能です。


* Business Managerで　`管理 ＞ サイトの開発 ＞ 開発セットアップ`　に遷移し、「フォルダーブラウザー」タブを選択。
* コード内で指定したファイルプリフィックスで検索する
![スクリーンショット 2021-11-04 16.20.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/72675ad8-4f49-61b7-66bc-5c867851ee59.png)