Chrome 111 以降をご利用の方は、ブレークポイント サイドバーのデザインが変更されたことにお気づきのことと思います。Chrome 113 では、古いデザインは新しいサイドバーに完全に置き換えられます。再設計の目標は、以下によりブレークポイントのワークフローを改善することです。
設定されているすべてのブレークポイントの概要を把握しやすくなる。ブレークポイントを使用した一般的なユーザー ワークフローをより簡単にアクセスし、より直感的に操作できるようにしました。既存の便利なブレークポイント機能を表示。
この投稿は、ブレークポイントを使用したデバッグに精通していることを前提としています。ブレークポイントを初めて使用する場合は、ブレークポイントの概要で、ブレークポイントを使用してコードをデバッグする方法についてご確認ください。
では、このデザイン変更で追加された機能と、新しいサイドバーの使い方について見ていきましょう。なお、今回のデザイン変更では、新しい機能の追加ではなく、既存の機能をより直感的に使用しやすく、アクセスしやすくすることに重点を置いています。
例外で停止して、コードがエラーをスローする理由を調査する
コードで例外がスローされますか？ご安心ください。Chrome DevTools では、例外で一時停止して、例外がスローされたポイントで実行を停止できます。これにより、コードがエラーをスローする状況を調査し、より深く理解できます。サイドバーで対応するチェックボックスをオンにすると、キャッチされた例外、キャッチされていない例外、またはその両方で一時停止するかどうかを選択できます。
ブレークポイントを管理する: 関連するブレークポイント グループを開き、他のグループを閉じて関連する内容に集中する
ブレークポイントは複数のファイルに分散されている場合があります。ブレークポイント サイドバーには、ブレークポイントが属するファイルに応じてブレークポイントがグループ化されます。関連するブレークポイント グループを開き、残りのグループを閉じて、現在のデバッグ セッションに重要なブレークポイントにのみ集中します。
ブレークポイントの管理: コードにジャンプ、ブレークポイントの削除、ブレークポイントの有効化/無効化を 1 クリックで行う
ブレークポイント サイドバーを使用すると、一般的なタスクをワンクリックで実行できます。以下に、次の方法の概要を示します。
コードエディタでブレークポイントの場所に移動します。ファイル内の 1 つのブレークポイントまたはすべてのブレークポイントを削除します。ファイル内の 1 つのブレークポイントまたはすべてのブレークポイントを有効または無効にします。
すべてワンクリックで完了します。これらのオプションは、コンテキスト メニューからも利用できます。
ブレークポイントのコード スニペットをクリックして、ブレークポイントの位置に移動する
コードのどこにブレークポイントを設定したのかを確認して、その周辺のコードを確認したいですか？サイドバー内のブレークポイントのコード スニペットをクリックするだけで、コードエディタでコードの場所が開きます。
削除ボタンをクリックして、ファイル内の 1 つのブレークポイントまたはすべてのブレークポイントを削除する
ブレークポイントまたはブレークポイント グループにカーソルを合わせると、削除ボタンが表示されます。このボタンをクリックすると、ファイル内の 1 つまたはすべてのブレークポイントが削除されます。
ファイル内の 1 つまたはすべてのブレークポイントを無効にする
ブレークポイントの横にあるチェックボックスをオンまたはオフにして、ブレークポイントを有効または無効にします。
ファイル内のすべてのブレークポイントを有効または無効にするには、ブレークポイント グループにカーソルを合わせ、ファイル名の横に表示されるチェックボックスをオンまたはオフにします。
あまり知られていないブレークポイント機能（条件付きブレークポイントとログポイント）を使用する
ブレークポイントを編集してブレークポイント条件を編集する、またはログポイント ログを変更する
ブレークポイントにカーソルを合わせて、表示された [編集] ボタンをクリックして、ブレークポイントの条件またはログを編集します。ブレークポイントの種類とブレークポイントの詳細を変更するためのダイアログが開きます。
または、コードエディタでブレークポイントの行を選択し、Linux の場合は Control+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 動画にコメントを残してください。