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

DevTools の新機能（Chrome 73）

Kayce Basques

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

リリースノートの動画版

ログポイント

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

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

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

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

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

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

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

図 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 ファイルとしてエクスポートします。

コードカバレッジは、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 をご覧ください。

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

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

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

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

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

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

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

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

コードの折りたたみ

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

54 ～ 65 行目が折りたたまれました

図 20. 54 ～ 65 行目が折りたたまれました

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

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

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

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

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

[メッセージ] タブ

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

[メッセージ] タブ

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

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

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

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

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

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

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