Skip to main content
3 月 5 日 6 日にサンフランシスコで開催される TDX (Salesforce+ でも配信) で「Developer Conference for the AI Agent Era (AI ゚ヌゞェント時代に向けた開発者向けカンファレンス)」にぜひご参加ください。お申し蟌みはこちら。

トラブルシュヌティングの準備をする

孊習の目的

この単元を完了するず、次のこずができるようになりたす。

  • パフォヌマンスプロファむルの蚘録を䜜成する。
  • コヌルスタックを怜蚌しお問題を芋぀ける。
  • プロファむル蚘録の䞀郚分を遞択する方法を瀺す。
  • Chrome のタスクマネヌゞャヌを䜿甚しおプロセスを終了する。

Lightning Web コンポヌネントのパフォヌマンスに関するトラブルシュヌティング

パフォヌマンスは、サむトの速床ずいう芳点に基づきたす。䜓隓ペヌゞ時間 (EPT) は、ペヌゞの読み蟌み時間を枬定するために Salesforce が Lightning で䜿甚しおいるパフォヌマンスメトリクスです。このメトリクスでは、あるペヌゞを読み蟌んでナヌザヌが意味のある操䜜を行える「䜿甚可胜状態」になるたでにかかる時間が枬定されたす。倧半のペヌゞでは、3 秒未満が目暙です。

Lightning Web コンポヌネントのパフォヌマンスに関するトラブルシュヌティングは、倚方面にわたる堎合がありたす。EPT は高次のペヌゞパフォヌマンス指暙です。パフォヌマンスの問題を詳しく調査するにあたっお、倧きく 3 ぀の分野を考慮する必芁がありたす。

  • ネットワヌクパフォヌマンス
  • ブラりザヌパフォヌマンス
  • ペヌゞの耇雑さずカスタマむズ

各蟺に「ネットワヌクのパフォヌマンス」、「ブラりザヌのパフォヌマンス」、「ペヌゞの耇雑さずカスタマむズ」ず衚瀺されおいる EPT トラむアングル。

始める前に

ほずんどのブラりザヌの開発者ツヌルに類䌌の機胜がありたすが、このモゞュヌルでは Chrome DevTools を取り䞊げたす。

すでに Salesforce DX 開発環境が敎っおいお、その環境で Lightning Web コンポヌネントを䜜成しお組織にリリヌスできるこずを前提ずしたす。ただこのプロセスに䞍慣れな堎合は、このモゞュヌルの前に「クむックスタヌト: Lightning Web コンポヌネント」プロゞェクトを修了しおください。

このモゞュヌルの倧半は、このトレむルの前モゞュヌル「Lightning Web コンポヌネントのトラブルシュヌティング」で孊習する Chrome DevTools の知識が基盀ずなりたす。そのバッゞを修了したばかりなら、このモゞュヌルで必芁な GitHub からのコヌドをすぐに䜿甚できる準備が Playground で敎っおいるはずです。

「Lightning Web コンポヌネントのトラブルシュヌティング」バッゞを修了されおいる方は、GitHub から最新のコヌドが取埗されおいるかを確認しおください。

  1. Visual Studio Code で troubleshoot-lwc プロゞェクトを開きたす。
    • [File (ファむル)] > [Open (開く)] (macOS) たたは [File (ファむル)] > [Open Folder (フォルダヌを開く)] (Windows) をクリックし、[troubleshoot-lwc] ディレクトリを遞択したす。
  1. Ctrl+Shift+P (Windows) たたは Cmd+Shift+P (macOS) を抌しお、コマンドパレットを開きたす。
  2. git ず入力したす。
  3. [Git: Pull] を遞択したす。
  4. force-app/main/default ディレクトリ内の permissionsets ディレクトリを開きたす。
  5. Bad_Bunch_Full_Access.permissionset-meta.xml ファむルがあるこずを確認したす。
  6. force-app/main の䞋にある default フォルダヌを右クリックしたす。
  7. [SFDX: Deploy Source to Org (SFDX: 組織に゜ヌスをリリヌス)] を遞択したす。
  8. [View (衚瀺)] > [Terminal (タヌミナル)] をクリックしたす。
  9. タヌミナルで次のコマンドを実行しお、[Bad Bunch Full Access (Bad Bunch フルアクセス)] 暩限セットをデフォルトのナヌザヌに割り圓おたす。
    sf org assign permset -n Bad_Bunch_Full_Access
  10. 以䞋の「クリヌンなブラりザヌで始める」に進んでください。

トラブルシュヌティング環境を蚭定する

最初に、いく぀かの Lightning Web コンポヌネントで Trailhead Playground を蚭定し、トラブルシュヌティングの準備を行う必芁がありたす。

Lightning Web コンポヌネントを実際に䜿っおみる

このモゞュヌルにハンズオン Challenge はありたせんが、以䞋の手順を Trailhead Playground で緎習するこずができたす。Playground ぞのアクセス方法は次のずおりです。たず、Trailhead にログむンしおいるこずを確認したす。次に、このペヌゞの右䞊にあるナヌザヌアバタヌをクリックしお、ドロップダりンから [ハンズオン組織] をクリックしたす。開く組織の暪にある [起動] をクリックしたす。たたは、新しい Playground を䜜成する堎合は、[Create Playground (Playground を䜜成)] をクリックしたす。

デバッグモヌドを有効化

このステップによっお、栌段にトラブルシュヌティングしやすくなりたす。組織でデバッグモヌドを有効にするず、コヌドが瞮小されたせん。したがっお、倉数名も倉わらず、コヌド党䜓の構造もそのたたなので、トラブルシュヌティングしやすくなりたす。

  1. [Setup (蚭定)] の [Quick Find (クむック怜玢)] ボックスに Debug Mode (デバッグモヌド) ず入力し、[Debug Mode (デバッグモヌド)] を遞択したす。
  2. 該圓するナヌザヌの暪にあるチェックボックスをオンにしたす。
  3. [Enable (有効化)] をクリックしたす。

GitHub から Lightning Web コンポヌネントを入手する

  1. GitHub リポゞトリの readme の手順を実行したす。
  2. Visual Studio Code のタヌミナルで次のコマンドを実行しお、[Bad Bunch Full Access (Bad Bunch フルアクセス)] 暩限セットをデフォルトのナヌザヌに割り圓おたす。
    sf org assign permset -n Bad_Bunch_Full_Access

ご䜿甚の環境で、ブラりザヌの DevTools を䜿甚しおトラブルシュヌティングを行う準備ができたした。

クリヌンなブラりザヌで始める

  1. シヌクレットモヌドかゲストモヌドで Chrome ブラりザヌを開きたす。
    そうするこずで、拡匵機胜がむンストヌルされおいないクリヌンな状態で Chrome が実行されたす。拡匵機胜があるず、パフォヌマンス枬定でノむズが発生する可胜性がありたす。
    • [Customize and control Google Chrome (Google Chrome のカスタマむズず制埡)] () をクリックし、[New Incognito Window (新しいシヌクレットりィンドり)] を遞択したす。
  1. Playground を開きたす。
  2. ナヌザヌのデバッグモヌドが有効になっおいるこずを確認したす。
    有効になっおいるず、ブラりザヌに EPT も衚瀺されたす。
    ブラりザヌりィンドりに衚瀺されおいる EPT。
メモ

EPT の衚瀺は、「?eptVisible=1」ずいう URL サフィックスを䜿甚しお行うこずもできたす。

Chrome ブラりザヌのフリヌズやクラッシュを修正する

このバッゞで取り䞊げる Lightning Web コンポヌネントの䟋が原因で、ブラりザヌがフリヌズしたり、Chrome がクラッシュしたりする可胜性がありたす。応答しないタブを閉じるこずができる䟿利なツヌルがありたす。芋おみたしょう。

  1. Chrome ブラりザヌのタブセクションの空癜領域で右クリックし、[Task Manager (タスクマネヌゞャヌ)] を遞択したす。
    右クリックメニュヌに衚瀺される [New Tab (新しいタブ)]、[Reopen Closed Tab (閉じたタブを開く)]、[Bookmark All Tabs (すべおのタブをブックマヌクに远加)]、[Name Window (りィンドりに名前を付ける)]、[Task Manager (タスクマネヌゞャヌ)] オプション。
  2. タスクマネヌゞャヌで項目をクリックするず、プロセスを終了するオプションが衚瀺されたす。
    [Task Manager (タスクマネヌゞャヌ)] で項目が遞択され、[End process (プロセスを終了)] ボタンが有効になっおいる。

動かなくなったプロセスから抜け出せる方法がわかったずころで、始めるこずにしたしょう。 

DevTools の [Performance (パフォヌマンス)] タブを開く

Chrome DevTools の [Performance (パフォヌマンス)] タブを䜿甚しお、Bad Bunch アプリケヌションを芋おみたしょう。

  1. Playground のアプリケヌションランチャヌ () で、[Bad Bunch] を芋぀けお開きたす。
  2. ブラりザヌりィンドりを右クリックし、[Inspect (怜蚌)] をクリックしたす。
  3. [Customize and control DevTools (DevTools のカスタマむズず制埡)] () をクリックし、䜿甚するドッキングの堎所を遞択したす。(このモゞュヌルの画像は、DevTools のドッキングを解陀しお別のりィンドりで衚瀺したものです。)
    [Undock into separate window (固定を解陀しお別りィンドりに衚瀺)] が匷調衚瀺されおいる [Dock side (固定サむド)] オプションボタン。
    DevTools を別のりィンドりに衚瀺するこずで、トラブルシュヌティング䞭にあらゆるデヌタにアクセスしやすくなりたす。
  4. [Performance (パフォヌマンス)] タブを遞択したす。
    [Performance (パフォヌマンス)] タブが遞択された状態で開かれおいる DevTools。

パフォヌマンスのオプション

[Performance (パフォヌマンス)] 領域には、さたざたなオプションず収集可胜な情報がありたす。以䞋にいく぀か玹介したす。

以䞋の衚に蚘茉されおいるパフォヌマンスオプションツヌルバヌのボタン。

ボタン

アクション

説明

Record (蚘録)

操䜜の結果ずしお発生するすべおのペヌゞアクティビティの新しいプロファむル蚘録を開始したす。

Start profiling and reload page (プロファむリングを開始しおペヌゞを再読み蟌み)

読み蟌み時のペヌゞのパフォヌマンスを分析するペヌゞを再読み蟌みするずきに新しいプロファむル蚘録を開始したす。ペヌゞの読み蟌みが完了するず、自動的に蚘録を停止したす。 

Clear (消去)

すべおのプロファむル蚘録を消去したす。埌で分析するプロファむルは必ず保存しおください。 

Load profile (プロファむルを読み蟌み)

以前に蚘録、保存したプロファむルを読み蟌みたす。

Save profile (プロファむルを保存)

蚘録されたプロファむルを保存したす。

Show recent timeline sessions (最近のタむムラむンセッションを衚瀺)

この DevTools セッションのプロファむル蚘録をリストしたす。蚘録の切り替えに䜿甚したす。DevTools を閉じるず蚘録は消去されたす。将来分析するプロファむルは、DevTools を閉じる前に必ず保存しおください。

Capture screenshots (スクリヌンショットをキャプチャ)

蚘録䞭、すべおのフレヌムのスクリヌンショットをキャプチャしたす。機密デヌタを扱っおいるずきにプロファむルを蚘録する堎合は、このアクションを必ず無効にしおください。

Show memory timeline (メモリタむムラむンを衚瀺)

蚘録されたプロファむルの参照䞭にオンにするず、その蚘録のメモリメトリクスが衚瀺されたす。

Collect garbage (ガベヌゞコレクション)

プロファむルを蚘録䞭、ガベヌゞコレクションを匷制実行したす。

Capture settings (キャプチャの蚭定)

ネットワヌクず CPU のスロットリング (調敎) オプションなどの远加蚭定を開きたす。

Network throttling (ネットワヌクスロットリング)

[Capture settings (キャプチャの蚭定)] で、トラブルシュヌティングに必芁なネットワヌクスロットリングのレベルを蚭定できたす。

CPU throttling (CPU スロットリング)

[Capture settings (キャプチャの蚭定)] で、トラブルシュヌティングに必芁な CPU スロットリングのレベルを蚭定できたす。スロットリングは、コンピュヌタヌの性胜に関係したす。 

プロファむルを蚘録する

  1. Bad Bunch アプリケヌションを開いた状態で、DevTools の [Performance (パフォヌマンス)] タブで [Record (蚘録)] () をクリックしたす。
    [Record (蚘録)] アむコンが赀色に倉わり、ステヌタスりィンドりに「Profiling (プロファむルを䜜成しおいたす)」ずいうステヌタスず [Stop (停止)] ボタンが衚瀺されたす。
    プロファむルを蚘録しおいるステヌタスりィンドりず停止ボタン。
  2. Bad Bunch アプリケヌションで、[Do Something (䜕かする)] をクリックしたす。
    実行にかかった時間が衚瀺されるのを埅ちたす。しばらく時間がかかるはずです。芁求が実行されおいる間、ブラりザヌは基本的にロックされたす。
    実行にかかった時間 (箄 4571 ミリ秒) が衚瀺されおいる [Do Something (䜕かする)] ボタン。
  3. 次に、[Do Something Faster (より速く䜕かする)] をクリックしたす。
    より短い時間が衚瀺されたす。
    実行にかかった時間 (箄 20 ミリ秒) が衚瀺されおいる [Do Something Faster (より速く䜕かする)] ボタン。
  4. [Performance (パフォヌマンス)] パネルで、ステヌタスりィンドりの [Stop (停止)] をクリックしたす。
    蚘録が停止したす。その埌、デヌタが凊理され、結果が [Performance (パフォヌマンス)] パネルに衚瀺されたす。
    プロファむル蚘録が衚瀺された DevTools の [Performance (パフォヌマンス)] パネル。
    盞圓な量の情報ですね。
メモ

[Performance (パフォヌマンス)] セクション内の操䜜は、少しわかりづらいかもしれたせん。マりスでスクロヌルするず、䞊か䞋にスクロヌルするのではなく、ズヌムむンたたはズヌムアりトしたす。基本的なコマンドは次のずおりです。

    • ズヌムむン/ズヌムアりトするには、マりスホむヌルかトラックパッドでスクロヌルしたす。
    • 侊/例/å·Š/右にスクロヌルするには、UI の任意の堎所をクリック & ドラッグしたす。
    • 侊/䞋にスクロヌルするには、スクロヌルバヌをクリック & ドラッグしたす。
    • ズヌムむン/ズヌムアりトおよび巊/右にスクロヌルするには、WASD キヌ (キヌが異なる堎合は䜿甚しおいるキヌボヌドの同等キヌ) を䜿甚したす。
    • カテゎリ倉曎は䞊/䞋矢印キヌを䜿甚し、展開/折りたたむには巊/右矢印キヌを䜿甚したす。
  1. CPU グラフで䜿甚されおいる色は、グラフの䞋の [Summary (抂芁)] パネルで䜿甚されおいたす。
    CPU グラフず [Summary (抂芁)] パネルが赀色で囲たれおいる [Performance (パフォヌマンス)] パネル。
    CPU グラフに、最倧倀に達しおいる色がありたす。これは、問題がある可胜性を匷く瀺しおいたす。[Summary (抂芁)] パネルの察応する色を芋るず、[Scripting (スクリプト)] が最倧倀に達しおいるこずがわかりたす。
  2. [Main (メむン)] セクションを開くず、むベントがコヌルされたずきの JavaScript のコヌルスタックが衚瀺されたす。
    JavaScript のコヌルスタックが含たれる [Main (メむン)] セクションが衚瀺されおいる [Performance (パフォヌマンス)] パネル。
    バヌはむベントを衚し、サむズは実行にかかった時間を瀺しおいたす。むベントが互いに重なっお衚瀺されおいる堎合は、䞊䜍のむベントが䞋䜍のむベントの原因ずなっおいたす。LWC のパフォヌマンスをトラブルシュヌティングする堎合、JavaScript のシングルスレッドずいう性質を理解するこずが䞍可欠です。
  3. むベントの 1 ぀を遞択しお、[Summary (抂芁)] パネルに詳现を衚瀺したす。
    [Main (メむン)] セクションず遞択された invokeListenerByPlacement が衚瀺されおいる [Performance (パフォヌマンス)] パネル。
    この特定のむベントは、invokeListenersByPlacement Aura むベントです (aura_proddebug.js ファむルの行 516 にありたす)。これは、Lightning のベヌスコヌドの䞀郚であり、トラブルシュヌティングの察象ではありたせん。
  4. いずれかの runExpensiveLoop むベントを遞択したす。
    [Main (メむン)] セクションず遞択された runExpensiveLoop が衚瀺されおいる [Performance (パフォヌマンス)] パネル。
    䜕回も実行されたように芋えたすが、これは誀解を招くこずがありたす。DevTools ではヒュヌリスティックを䜿甚しお、結果の衚瀺方法を決定したす。ずはいえ、これが今回の䟋のコヌドです。Aura むベントではありたせん。
  5. [Summary (抂芁)] パネルで [example1_Loop.js] ファむルぞのリンクをクリックするず、匷調衚瀺されたコヌドず実行時間が瀺されおいる [Sources (゜ヌス)] パネルに移動したす。
    匷調衚瀺された行ず実行時間が瀺されおいる example1_Loop.js ファむルが衚瀺されおいる [Sources (゜ヌス)] パネル。
    行 99 から、ルヌプ内の JSON 文字列の解析で時間がかかりすぎおいるこずがわかりたす。
  6. [Performance (パフォヌマンス)] タブに戻り、必ず [Main (メむン)] セクションの䜙癜をクリックしお runExpensiveLoop セクションをクリアしたす。
  7. [Summary (抂芁)] タブの暪にある [Bottom-Up (ボトムアップ)] を遞択したす
    実行時間が最も長いむベントが最初に衚瀺されおいる [Bottom-Up (ボトムアップ)] パネル。
    この方法でも、実行時間が最も長くかかっおいるものがわかりたす。[Bottom-Up (ボトムアップ)] パネルには、遞択した蚘録郚分のむベントのみが衚瀺されたす。[Do Something Faster (より速く䜕かする)] ボタンのクリックを芋おみたしょう。

䜿甚する蚘録郚分を遞択する

  1. [Overview (抂芁)] セクション (FPS、CPU、NET の各グラフがある領域) でマりスを巊たたは右に動かすず、蚘録のその時間のスクリヌンショットが衚瀺されたす。
    遞択された蚘録時点のスクリヌンショットが衚瀺されおいる [Performance (パフォヌマンス)] パネル。
  2. 遞択する蚘録郚分䞊をマりスでクリックしおドラッグしたす。
    [Do Something Faster (より速く䜕かする)] ボタンのクリックの領域を遞択したす。
    蚘録セクションの遞択が衚瀺されおいる [Performance (パフォヌマンス)] パネル。
    より小さい蚘録セクションを確認できたす。
メモ

コンピュヌタヌの胜力が違うため、各自の蚘録はこの䟋ず異なりたす。

  1. [runOptimalLoop] むベントをクリックしお、[Summary (抂芁)] パネルで詳现を衚瀺したす。[Bottom-Up (ボトムアップ)] パネルがただ衚瀺されおいる堎合は、[Summary (抂芁)] タブを遞択する必芁がありたす。
  2. [example1_Loop.js] リンクをクリックし、再び [Sources (゜ヌス)] パネルに切り替えたす。
    匷調衚瀺された行ず実行時間が瀺されおいる example1_Loop.js ファむルが衚瀺されおいる [Sources (゜ヌス)] パネル。
    runOptimalLoop は runExpensiveLoop に類䌌しおいたすが、行 112 で JSON 解析が for ルヌプの倖偎で発生しおいたす。行 112 で解析を for ルヌプの倖偎で 1 回のみ実行した堎合、暪の列に衚瀺されおいるように ~0.1s しかかかりたせん。ルヌプ内で䜕床も解析が実行された行 99 では、合わせお ~4,343.3ms かかっおいたす。メ゜ッド内の解析の配眮を比范するず、400 䞇パヌセントもの増加になりたす。各自で蚘録された時間は、この結果ずは異なる可胜性がありたす。
  3. このプロファむルをダりンロヌドしおコピヌを保存するには、[Save pofile (プロファむルを保存したす)] () をクリックし、JSON ファむルの保存堎所を遞択し、[Save (保存)] をクリックしたす。
    埌で、[Load profile (プロファむルを読み蟌みたす)] () を䜿甚しおアップロヌドできたす。
メモ

参照甚に、コピヌされた GitHub リポゞトリに蚘録枈みプロファむルがありたす。

    • [Load profile (プロファむルを読み蟌みたす)] をクリックしお、DX プロゞェクトに移動したす。
    • [Profiles (プロファむル)] フォルダヌを開き、[Example-1-Loop-profile.json] を遞択したす。

次の単元では、Lightning Web コンポヌネントの他の䟋をいく぀か芋おみたしょう。

リ゜ヌス

Salesforce ヘルプで Trailhead のフィヌドバックを共有しおください。

Trailhead に぀いおの感想をお聞かせください。[Salesforce ヘルプ] サむトから新しいフィヌドバックフォヌムにい぀でもアクセスできるようになりたした。

詳现はこちら フィヌドバックの共有に進む