DevTools の新機能（Chrome 73）

Kayce Basques

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

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

ログポイント

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

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

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

   

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

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

   

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

3. [ブレークポイント エディタ] で、コンソールに記録する式を入力します。

   

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

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

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

   

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

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

図 5. コンソールに表示された Logpoint 式の結果

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

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

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

図 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 をご覧ください。

[メッセージ] タブ

[フレーム] タブの名前が [メッセージ] タブに変更されました。このタブは、ウェブ ソケット接続を検査している場合にのみ、[ネットワーク] パネルで使用できます。

図 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 の新機能シリーズで取り上げられたすべての内容の一覧。