DevTools の新機能（Chrome 73）

Kayce Basques

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

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

ログポイント

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

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

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

    ログポイントの追加

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

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

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

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

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

    ログポイント式の入力

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

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

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

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

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

次に行が実行されると、DevTools によってログポイント式の結果が できます。

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

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

バグの報告や改善の提案については、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 ～ 21 に対応します。 67 は h1 { color: #317EFB; } に対応します。つまり、最初と最後のルールセットが使用され、 真ん中のものはそうではなかったのです。

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

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

    コマンド メニュー

    図 7. コマンド メニュー

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

    カバレッジを表示

    図 8. カバレッジを表示

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

    [カバレッジ] タブ

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

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

  4. [Export] エクスポート をクリックして、 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 の推奨事項を満たすことが不可能な場合 少なくとも AA の推奨事項を満たすようにしてください。

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

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

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

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

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

    コマンド メニュー

    図 16. コマンド メニュー

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

    [Sensors] タブ

    図 17. [Sensors] タブ

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

    [設定] の [位置情報] タブ

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

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

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

    カスタムの位置情報の追加

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

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

コードの折りたたみ

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

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

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

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

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

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

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

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

[メッセージ] タブ

[フレーム] タブの名前が [メッセージ] タブに変更されました。このタブは WebSocket 接続の検査時の [Network] パネル。

[メッセージ] タブ

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

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

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

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

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

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

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

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