Chrome 111 以降をお使いの場合は、ブレークポイント サイドバーのデザインが変更されていることに気づかれたかもしれません。Chrome 113 では、新しいサイドバーが古いデザインに完全に置き換わります。今回の再設計の目的は、次の方法でブレークポイントのワークフローを改善 することです。
設定されているすべてのブレークポイントの概要をわかりやすく 表示する。 ブレークポイントを使用した一般的なユーザー ワークフローをより簡単にアクセス できるようにし、より直感的に 操作できるようにする。 既存の便利なブレークポイント機能をわかりやすく する。
この記事では、ブレークポイントを使用したデバッグに精通していることを前提としています。ブレークポイントを使用したことがない場合は、ブレークポイントの概要にアクセスして、ブレークポイントを使用してコードをデバッグする方法をご確認ください。
それでは、再設計によって何が提供されるのか、新しいサイドバーをどのように活用できるのかを見ていきましょう。なお、今回の再設計では、新機能の追加ではなく、既存の機能をより直感的に使用できるようにし、アクセスしやすくすることに重点を置いています。
例外で一時停止して、コードでエラーが発生する理由を調査する
コードで例外が発生しますか？ご心配なく。Chrome DevTools では、例外で一時停止して、例外がスローされた時点で実行を停止できます。これにより、コードでエラーが発生する状況を調査して、より深く理解できます。サイドバーの対応するチェックボックスをオンにすると、キャッチされた例外、キャッチされない例外、またはその両方で一時停止するかどうかを選択できます。
ブレークポイントを管理する: 関連するブレークポイント グループを展開し、他のグループを折りたたんで関連するグループに集中する
ブレークポイントは複数のファイルに分散している場合があります。ブレークポイント サイドバーでは、ブレークポイントが属するファイルごとにグループ化されます。関連するブレークポイント グループを展開し、残りのグループを折りたたむことで、現在のデバッグ セッションで重要なブレークポイントのみに集中できます。
ブレークポイントを管理する: ワンクリックでコードに移動、削除、ブレークポイントの有効化/無効化を行う
ブレークポイント サイドバーを使用すると、一般的なタスクをワンクリックで実行できます。以下に、実行できることの概要を示します。
コードエディタでブレークポイントの場所に移動する。 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 動画にコメントを残す。