このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 73）

Kayce Basques

Chrome 73 の DevTools の新機能を紹介します。

これらのリリースノートの動画バージョン

ログポイント

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

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

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

図 1. ログポイントの追加
[ログポイントを追加] を選択します。[Breakpoint Editor] ポップアップが表示されます。

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

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

ヒント:変数（TodoApp など）からログアウトするときは、変数をオブジェクト（{TodoApp} など）でラップして、コンソールでその名前と値からログアウトします。この構文の詳細については、常にオブジェクトを記録するとオブジェクトプロパティ値の省略形をご覧ください。
Enter キーを押すか、[ブレークポイントエディタ] の外側をクリックして保存します。行番号の上部にあるオレンジ色のバッジは、ログポイントを表します。

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

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

コンソールのログポイント式の結果

図 5. コンソールのログポイント式の結果

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

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

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

ノードの検査

図 6. ノードの検査

ノードを検査するには:

[検証] をクリックします。

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

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

コードカバレッジデータを 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; } に対応します。つまり最初と最後のルールセットが使用され中央のルールセットは使用されませんでした

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

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

図 7. コマンドメニュー
「coverage」と入力し、[Show Coverage] を選択して Enter キーを押します。

図 8. カバレッジを表示

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

図 9. [カバレッジ] タブ
[再読み込み] をクリックします。DevTools でページが再読み込みされ、配送されたコード量に対するコード使用量が記録されます。
[エクスポート] をクリックして、データを JSON ファイルとしてエクスポートします。

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

バグを報告したり、改善を提案したりするには、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 をご覧ください。

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

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

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

図 16. コマンドメニュー
「sensors」と入力し、[センサーを表示] を選択して、Enter キーを押します。[センサー] タブが開きます。

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

図 18. [設定] の [位置情報] タブ
[ビジネス情報を追加] をクリックします。
場所の名前、緯度、経度を入力し、[追加] をクリックします。

図 19. カスタムの位置情報の追加

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

コードの折りたたみ

[Sources] パネルと [Network] パネルでコードの折りたたみがサポートされるようになりました。

54 ～ 65 行目が折りたたまれています。

図 20. 54 ～ 65 行目が折りたたまれています。

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

F1 キーを押して [設定] を開きます。
[Settings] > [Preferences] > [Sources] で、[Code folding] を有効にします。

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

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

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

[メッセージ] タブ

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

[メッセージ] タブ

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

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

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。