DevTools の新機能（Chrome 73）

Kayce Basques

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

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

ログポイント

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

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

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

    ログポイントの追加

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

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

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

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

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

    ログポイント式の入力

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

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

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

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

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

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

コンソールでの Logpoint 式の結果

図 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 以降に追加されています。

AA ライン（上）と AAA ライン（下）

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

コードの折りたたみ

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

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

図 2054 ～ 65 行が統合されました

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

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

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

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

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

メッセージタブ

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

[メッセージ] タブ

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

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

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

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

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

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

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。