仮想デバイスビルドを使用したコンポーネントのデバッグ

コンポーネントをデバッグするには、デスクトップブラウザを仮想デバイスで実行されている Salesforce モバイルアプリケーションに接続します。その後、Safari (iOS) または Chrome (Android) の開発者ツールを使用して、HTML マークアップを表示および操作します。次に、JavaScript コードをステップスルーして、コンソールのロギングおよびエラーメッセージを確認します。

コンポーネントの Web ベースのコードはデバッグできますが、モバイルアプリケーションのプラットフォームネイティブコードはデバッグできません。

Salesforce モバイルアプリケーションの仮想デバイスビルドでは、シミュレーションされた広範な Android および iOS デバイスでモバイル Lightning Web コンポーネントをプレビューできます。シミュレーションされたデバイスにビルドをインストールするには、「Salesforce モバイルアプリケーションでのコンポーネントのプレビュー」を参照してください。

iOS で実行されているコンポーネントを検証するには、Safari Web インスペクタを使用します。

Safari の開発者ツール (Web インスペクタを含む) を有効にする手順は、次のとおりです。

  1. デスクトップ開発マシンで、Safari ブラウザを開きます。
  2. [Safari] | [環境設定…] を選択します。
  3. [詳細] を選択します。
  4. [メニューバーに “開発” メニューを表示] を有効にします。

Safari 開発者ツールは、[開発] メニューにあり、前のステップを元に戻して無効にするまで有効になっています。

モバイルコンポーネントをデバッグするには、仮想デバイスで実行されている Salesforce モバイルアプリケーションに Safari のデスクトップインスタンスを接続します。

  1. デスクトップ開発マシンで、[Safari] | [開発] | [シミュレータ — device — version] を選択します。device はシミュレーションされたハードウェアで、version はハードウェアにインストールされたオペレーティングシステムです。たとえば、[シミュレータ — iPhone 11 Pro — iOS 13.3 (17C45)] のようになります。
  2. [JSContexts の Web インスペクタを自動的に表示] を選択します。

シミュレーションされたデバイスでコンポーネントを操作すると、新しい Web インスペクタウィンドウが開きます。Web インスペクタを使用してコンポーネントをデバッグします。デバッグの方法は、デスクトップの Safari で直接実行されている場合とほぼ同じです。

Safari Web インスペクタの使用についての詳細は、webkit.org/web-inspector/enabling-web-inspector/ を参照してください。

Android で実行されているコンポーネントをデバッグするには、Chrome DevTools を使用します。まず、エミュレートされたデバイスで開発者モードを有効にします。

  1. エミュレートされた Android デバイスで、[設定] | [デバイス情報] を開きます。
  2. ビルド番号までスクロールダウンします。開発者モードを有効にするには、ビルド番号を 7 回クリックします。「これでデベロッパーになりました!」というメッセージが表示されます。
  3. ホーム画面に戻り、Salesforce モバイルアプリケーションを開きます。コンポーネントが表示されているページに移動します。

モバイルコンポーネントをデバッグするには、仮想デバイスで実行されている Salesforce モバイルアプリケーションに Google Chrome のデスクトップインスタンスを接続します。

  1. デスクトップ開発マシンの Chrome のロケーションバーに chrome://inspect/#devices という URL を入力します。
  2. 「Android SDK built for x86_64 #EMULATOR-5554」のような名前で使用可能なリモートデバッグ対象のリストが表示されます。
  3. エミュレートされた有効なデバイスの項目を見つけます。[Remote Target (リモートターゲット)] 項目で、[inspect (調査)] をクリックします。

Chrome でリモートデバッグウィンドウが開きます。左側には Android エミュレータの現在の Web ビュー (モバイルコンポーネントが保持されているページ) があります。右側には Chrome DevTools があり、これを使用してデスクトップの Chrome で実行されているかのようにコンポーネントをデバッグできます。

Chrome DevTools の使用についての詳細は、developers.google.com/web/tools/chrome-devtools/remote-debugging を参照してください。

関連トピック