Chrome 111 以降をお使いの方は、ブレークポイントのサイドバーのデザインを変更しました。Chrome 113 では、以前のデザインが新しいサイドバーに完全に置き換えられます。今回の再設計の目標は、以下の方法でブレークポイントのワークフローを改善することでした。
設定されているすべてのブレークポイントの概要を確認 ブレークポイントにより、一般的なユーザー ワークフローがアクセスしやすくなり、より直感的になります。 既存の優れたブレークポイント機能を表示する。
この投稿は、ブレークポイントを使用したデバッグに精通していることを前提としています。ブレークポイントを使用したことがない場合は、ブレークポイントの概要をご覧になり、ブレークポイントを使用してコードをデバッグする方法を確認してください。
では、デザイン変更によって得られる機能と新しいサイドバーの活用方法を見ていきましょう。今回のデザイン変更では、新機能を追加することではなく、既存の機能をより直感的に利用できるようにし、アクセスを容易にすることに重点を置いています。
例外で一時停止して、コードがエラーをスローしている理由を調査する
コードが例外をスローしますか？ご安心ください。Chrome DevTools では、例外がスローされた時点で実行を停止するために、例外で一時停止できます。これにより、コードがエラーをスローする状況を調査し、理解を深めることができます。サイドバーの対応するチェックボックスをオンにして、キャッチされた例外、キャッチされなかった例外、またはその両方で一時停止するかどうかを選択できます。
ブレークポイントの管理: 関連するブレークポイント グループを開いたり、他のブレークポイントを折りたたんだりして、関連するものに焦点を当てることができます
ブレークポイントは複数のファイルに分散していることがあります。[Breakpoint] サイドバーでは、所属するファイルに応じてブレークポイントがグループ化されます。関連するブレークポイント グループを展開し、残りのブレークポイント グループを閉じると、現在のデバッグ セッションで重要なもののみに焦点を当てることができます。
ブレークポイントの管理: ワンクリックでコードへの移動、ブレークポイントの削除、有効化/無効化が可能
ブレークポイント サイドバーを使用すると、一般的なタスクをワンクリックで実行できます。ここでは、その方法の概要を説明します。
コードエディタでブレークポイントの位置に移動します。 ファイル内のブレークポイントを 1 つ削除するか、すべて削除します。 ファイル内の 1 つのブレークポイントまたはすべてのブレークポイントを有効または無効にします。
これらすべてをワンクリックでもちろん、これらのオプションはコンテキスト メニューからも使用できます。
ブレークポイントのコード スニペットをクリックして、ブレークポイントの位置にジャンプする
ブレークポイントを設定したコード内の場所を確認し、前後のコードを分析しますか？サイドバー内のブレークポイントのコード スニペットをクリックすると、コードエディタにコードの場所が表示されます。
削除ボタンをクリックして、ファイル内の 1 つのブレークポイント、またはすべてのブレークポイントを削除する
ブレークポイントまたはブレークポイント グループにカーソルを合わせると、削除ボタンが表示されます。このボタンは、クリック時にファイル内の単一またはすべてのブレークポイントを削除します。
ファイル内の単一またはすべてのブレークポイントを無効にする
ブレークポイントのチェックボックスをオンまたはオフにして、有効または無効にします。
ファイル内のすべてのブレークポイントを有効または無効にするには、ブレークポイント グループにカーソルを合わせ、ファイル名の横に表示されるチェックボックスをオンまたはオフにします。
条件付きブレークポイントとログポイントなど、あまり知られていないブレークポイント機能を利用する
ブレークポイントの条件を編集したり、ブレークポイントを編集してログポイント ログを変更したりする
ブレークポイントにカーソルを合わせ、表示される [編集] ボタンをクリックして、ブレークポイントの条件またはログを編集します。ブレークポイントの種類と詳細を変更するためのダイアログが開きます。
または、コードエディタでブレークポイントの行を選択し、Linux の場合は Ctrl+Alt+B、Mac の場合は Command+Alt+B キーを押して、ブレークポイントの編集ダイアログを開きます。
サイドバーのブレークポイントにカーソルを合わせると、条件またはログポイントのログを簡単に再確認することもできます。
おわりに
ブレークポイント サイドバーのデザイン変更の目的は、ブレークポイントを使用したデバッグを容易にすることでした。その中でも特に目指したのは、物事をより構造化し、アクセスしやすく理解しやすいものにすることです。これらの改善が、次回のデバッグ セッションでお役に立てば幸いです。
さらなる改善についてご提案がございましたら、バグを報告してお知らせください。
プレビュー チャネルをダウンロードする
Chrome Canary、Dev、Beta を既定の開発ブラウザとして使用することをご検討ください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが実際に体験する前にサイト上の問題を検出したりできます。
Chrome DevTools チームへのお問い合わせ
投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。
- crbug.com からご提案やフィードバックをお送りください。
- DevTools の問題を報告するには、DevTools でその他のオプション アイコン
> [ヘルプ] > [DevTools の問題を報告する] を選択します。 - @ChromeDevTools にツイートします。
- 「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。