TrailheadにまとめられているLightning Web コンポーネント開発のトラブルシューティングを試してみました。Google ChromeブラウザのDevToolsを使ってLightning Web コンポーネントのJavascriptデバッグについての話です。
Lightning Web Component Troubleshooting | Salesforce Trailhead
作業用のSalesforce組織を用意
Trailheadのハンズオン組織を作成します。
作成処理が完了したらハンズオン組織にログインします。ブラウザはGoogle Chromeで開きます。ついでにパスワードリセットしてユーザIDとパスワードをメモしておきます。
Salesforce組織のデバッグモードを有効化
設定のクイック検索で「Debug Mode」(デバッグモード)して有効化の画面にアクセスします。対象ユーザを指定してONにする感じです。
Lightning Web セキュリティをオフにする
設定の「Session Settings」(セッション設定)のページにアクセスしてLightning Web Security をオフにします。ブレークポイントを使用するための一時的な回避策とのことで基本はオンで開発環境等で一時的にオフにするという用途となります。
キャッシュを空にしてハード リセットを実行する
Lighting Web セキュリティのオフを確実に有効にするには、ブラウザのハード リセットとともにブラウザのキャッシュをクリアする必要があるとのことです。
1.ブラウザ ウィンドウ内で右クリックし、[検証]を選択します。
2.右クリックして、 「キャッシュを空にしてハード リセット」リロードを選択します。
Salesforce側の準備はひとまずこれでOKでした。
GitHubからサンプルプロジェクトを取得
git clone コマンドを使ってGithubリポジトリからサンプルプロジェクトを取得します。
手順の詳細はREAME.mdに記載されています。
ワークスペースに必要なコード一式をダウンロードできたら準備OK。
次がややこしかったのですが、GitHubリポジトリのソースコード一式はSalesforceDXプロジェクトの構成の一部のファイルしかありません。そのためそのままではVSCode開発では使えませんでした。なのでダウンロードしたファイルは次の手順で使えるようにします。
VSCodeの機能でプロジェクトを作成を実行
「マニフェストから作成」ではなく通常の「プロジェクトを作成」を選択。次の選択肢は標準を選びます。
プロジェクト名はGitHubリポジトリと同じく「troubleshoot-lwc」を入力。
プロジェクト作成フォルダは git clone でダウンロードしたコード一式と同じ階層です。
フォルダ名が同じことで上書きするかの確認メッセージが表示されます。
上書きすると、GitHubリポジトリのソースコード一式はそのままで、SalesforceDXプロジェクトの構成に必要な他のファイルが追加されます。
ここまでできたら一度VSCodeを再起動しておきます。再起動したタイミングでVSCodeのSalesforce Extensionsの初期処理が正常に動作します。
Salesforce組織と接続
続いてVSCodeのターミナルからSalesforceCLIコマンドを使って認証操作を実行します。
% sf org login -d -a troubleshoot-lwc -b chrome
ログイン画面が表示されるのでユーザIDとパスワードを入力して認証を完了します。これでVSCodeのSalesforceDXプロジェクトとハンズオン組織が接続された状態になりました。
VSCodeの組織が未接続となっているところを、接続した情報に切り替えます。
ソースコード一式をハンズオン組織にデプロイ
次のデプロイコマンドを使ってGitHubから取得したコード一式をデプロイします。
% sf project deploy start -o troubleshoot-lwc
こんな感じでデプロイできます。
権限セットの割り当て
次のコマンドでハンズオン組織の管理者ユーザに権限セットを割り当てます。これで必要な権限が付与されている状態となります。
% sf org assign permset -n Solutions_Full_Access -o troubleshoot-lwc
Solutionsアプリケーションにアクセス
ハンズオン組織のアプリケーションランチャーからSolutionsアプリケーションにアクセスします。正常に表示できれば準備完了です。
Chromeで開発者コンソールを開く
次の手順で開発者コンソールを開きます。
メニューから[Google Chrome のカスタマイズと制御] ( ) |をクリックします。その他のツール | 開発者ツールで「ソース」を選択します。
F12またはCtrl+Shift+I (Windows) またはCmd+Option+I (macOS)を押します。
開発者コンソールの見方はTrailheadの画像がわかりやすいです。
DevTools の場所を変更する
カスタム フォーマッタを有効にする
無視リストを使用する
カスタムフォーマッタの設定とか多少デザインに違いがありましたが、おそらくバージョンの違いとかPCの画面幅の違いとかだと思います。
DevToolsでLightning Web コンポーネントを見つける
Sourcesタブを選択。「Page」→「lightning/n」→「 modules/c」→「display.js」という感じで追っていきます。
内容は変換されていますが、display.jsがLightning Web コンポーネントです。
cmd + f で検索ボックスを出して「class Display」という感じで検索するとコードがヒットします。
正確には自分の環境では初回はヒットしませんでした。ただ、「Command」+「Shift」+「R」のキーでリフレッシュして再描画したところヒットされるようになりました。
ここの重要なポイントとしては「コードはコンパイルされますが、縮小されないため、変数名は変更されないことに注意してください。」とのことです。
開発者コンソールでLightning Web コンポーネントを見つける方法は上記のとおりです。この機能を使ってデバッグできる感じです。
ブレークポイントでデバッグ対応
まずは「handleIncrement(event)」の処理を検索で見つけます。
そのすぐ下。「const operand = event.detail;」の処理にブレークポイントを配置します。
Solutionsアプリケーションの「+ 1」ボタンをクリックします。するとブレークポイントで処理が一時停止していることを確認できます。
コンソールの右側にあるアイコンで処理を1行ずつ進めたり戻したりができます。
正確な情報はこちら。
とりあえず「→・」で1処理ずつ動かしてみるとイメージしやすそうです。
便利機能
条件付きコード行ブレークポイント
ブレークポイントの管理
デバッグして処理を修正してみる
「handleAugmentorChange」を検索してブレークポイントを設置。また右側のWatchのところの「+」アイコンをクリック。event.target.valueを指定します。
Solutionsアプリケーションの画面操作でControl Optionの2をクリック。すると処理が動いて、ブレークポイントで一時停止。Watchの変数にも値に2がセットされていることをチェックできます。
Watchに「this.augmentor」の変数を追加します。値が1となっていることを確認できます。
「ステップ」(→・) をクリックしてこの行を実行し、次の行に進みます。ブレークポイントを含む行の後で以下の説明に対応する DevTools 画面実行が一時停止され、Watch に次のことが表示されます。
event.target.value: "2" this.augmentor: "2"
・・・とありましたが、自分の環境では正しく2とは設定されませんでした。操作手順か方法が間違っているのかも。
このあたりでちょっとめんどうになったので後は雰囲気で。この処理がやりたいこととしては、「this.augmentor」には"2"のように文字列ではなく、数値をいれるように修正するのが目的のようです。
最後は無理やりやってしまいましたが、ブレークポイントを使ったデバッグ処理の使い方を覚えるにはちょうど学習コンテンツとなっていました。
