DevTools の新機能（Chrome 73）

Kayce Basques

Chrome 73 の DevTools の新機能は次のとおりです。

このリリースノートの動画版

ログポイント

ログポイントを使用すると、console.log() の呼び出しでコードを煩雑化することなく、コンソールにメッセージを記録できます。

ログポイントを追加するには:

1. ログポイントを追加する行番号を右クリックします。

   

   図 1. ログポイントの追加

2. [ログポイントを追加] を選択します。ブレークポイント エディタがポップアップ表示されます。

   

   図 2. ブレークポイント エディタ

3. [Breakpoint Editor] で、コンソールに記録する式を入力します。

   

   図 3. ログポイント式の入力

   ヒント:変数（TodoApp など）をログアウトする場合は、変数をオブジェクト（{TodoApp} など）でラップして、コンソールでその名前と値をログアウトします。この構文の詳細については、オブジェクトを常にロギングするとオブジェクト プロパティ値の省略形をご覧ください。

4. Enter キーを押すか、ブレークポイント エディタの外側をクリックして保存します。行番号の上に表示されるオレンジ色のバッチは、ログポイントを表します。

   

   図 4. 行 174 のオレンジ色のログポイント バッジ

次回この行が実行されると、DevTools はログポイント式の結果をコンソールに記録します。

図 5. コンソールでの Logpoint 式の結果

バグの報告や改善案の提案については、Chromium の問題 #700519 をご覧ください。

検証モードの詳細なツールチップ

ノードを検査するときに、DevTools に拡張されたツールチップが表示され、フォントサイズ、フォント色、コントラスト比、ボックスモデルの寸法など、一般的に重要な情報が表示されるようになります。

図 6. ノードの検査

ノードを検査するには:

1. [詳細を確認] をクリックします。

   ヒント: [検査] にカーソルを合わせると、キーボード ショートカットが表示されます。

2. ビューポートでノードにカーソルを合わせます。

コードカバレッジ データをエクスポートする

コードカバレッジ データを JSON ファイルとしてエクスポートできるようになりました。JSON は次のようになります。

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url は、DevTools が分析した CSS ファイルまたは JavaScript ファイルの URL です。ranges は、使用されたコードの部分を記述します。start は、使用された範囲の開始オフセットです。end は終了オフセットです。text はファイルの全文です。

上記の例では、範囲 0 ～ 21 は body { margin: 1em; } に対応し、45 ～ 67 の範囲は h1 { color: #317EFB; } に対応します。つまり、最初のルールセットと最後のルールセットは使用され、中央のルールセットは使用されませんでした。

ページの読み込み時に使用されているコードの量を分析し、データをエクスポートするには:

1. Ctrl+Shift+P キーまたは Command+Shift+P キー（Mac）を押して、コマンド メニューを開きます。

   

   図 7. コマンド メニュー

2. 「coverage」と入力し、[Show Coverage] を選択して Enter キーを押します。

   

   図 8. カバレッジを表示

   [カバレッジ] タブが開きます。

   

   図 9. [カバレッジ] タブ

3. [再読み込み] をクリックします。DevTools はページを再読み込みし、出荷されたコードと比較して使用されているコードの量を記録します。

4. [エクスポート] をクリックして、データを JSON ファイルとしてエクスポートします。

コードカバレッジは、DevTools チームが管理するブラウザ自動化ツールである Puppeteer でも利用できます。カバレッジをご覧ください。

バグを報告したり、改善を提案したりするには、Chromium の問題 #717195 をご覧ください。

キーボードでコンソールを操作する

キーボードを使用してコンソールを操作できるようになりました。次に例を示します。

Shift+Tab キーを押すと、最後のメッセージ（または評価された式の結果）にフォーカスが移動します。メッセージにリンクが含まれている場合は、最後のリンクが最初にハイライト表示されます。Enter キーを押すと、リンクが新しいタブで開きます。左矢印キーを押すと、メッセージ全体がハイライト表示されます（図 13 を参照）。

図 11. リンクをフォーカスする

上矢印キーを押すと、次のリンクにフォーカスが移動します。

図 12. 別のリンクにフォーカスする

もう一度 ↑ キーを押すと、メッセージ全体がフォーカスされます。

図 13. メッセージ全体にフォーカスする

右矢印キーを押すと、折りたたまれたスタック トレース（またはオブジェクト、配列など）が展開されます。

図 14. 折りたたまれたスタック トレースを展開する

← キーを押すと、開いたメールまたは検索結果が閉じます。

バグの報告や改善案については、Chromium の問題 #865674 をご覧ください。

カラー選択ツールの AAA コントラスト比線

カラー選択ツールに 2 つ目の線が表示され、AAA コントラスト比の推奨事項を満たす色が示されます。AA 行は Chrome 65 以降に追加されています。

図 15. AA ライン（上）と AAA ライン（下）

2 つの線の間の色は、AA の推奨事項を満たしているものの、AAA の推奨事項を満たしていない色を表します。ある色が AAA の推奨を満たしている場合、その色の同じ側にある色も推奨を満たします。たとえば、図 15 では、下の線より下の線は AAA であり、上の線より上の線は AA の推奨事項すら満たしていません。

ヒント: 一般に、AAA の推奨事項を満たすテキストの量を増やすと、ページの読みやすさを改善できます。なんらかの理由で AAA の推奨事項を満たせない場合は、少なくとも AA の推奨事項を満たすようにしてください。

この機能にアクセスする方法については、カラー選択ツールのコントラスト比をご覧ください。

バグの報告や改善案については、Chromium の問題 #879856 をご覧ください。

カスタムの位置情報のオーバーライドを保存する

[センサー] タブで、カスタムの位置情報のオーバーライドを保存できるようになりました。

1. Ctrl+Shift+P キーまたは Command+Shift+P キー（Mac）を押して、コマンド メニューを開きます。

   

   図 16. コマンド メニュー

2. 「sensors」と入力し、[センサーを表示] を選択して、Enter キーを押します。[センサー] タブが開きます。

   

   図 17. [センサー] タブ

3. [位置情報] で [管理] をクリックします。[設定] > [位置情報] が開きます。

   

   図 18. [設定] の [位置情報] タブ

4. [ビジネス拠点を追加] をクリックします。

5. 場所の名前、緯度、経度を入力して、[追加] をクリックします。

   

   図 19。カスタムの位置情報を追加する

バグの報告や改善の提案については、Chromium の問題 #649657 をご覧ください。

コードの折りたたみ

[ソース] パネルと [ネットワーク] パネルでコードの折りたたみをサポートするようになりました。

図 20。54 ～ 65 行が統合されました

コードの折りたたみを有効にするには:

1. F1 キーを押して [設定] を開きます。
2. [設定] > [設定] > [ソース] で、[コード折りたたみ] を有効にします。

コードブロックを折りたたむには:

1. ブロックが開始される行番号にカーソルを合わせます。
2. [Fold] をクリックします。

バグの報告や改善案の提案については、Chromium の問題 #328431 をご覧ください。

メッセージタブ

[フレーム] タブの名前が [メッセージ] タブに変更されました。このタブは、[ネットワーク] パネルで WebSocket 接続の確認時にのみ使用できます。

図 21。[メッセージ] タブ

バグを報告したり、改善を提案したりするには、Chromium の問題 #802182 をご覧ください。

プレビュー チャネルをダウンロードする

デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta を使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも早くサイトの問題を見つけることもできます。

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、更新、その他のトピックについて話し合います。

• フィードバックや機能リクエストは crbug.com から送信してください。
• DevTools で more_vert [その他] > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。