DevTools の新機能（Chrome 59）

Kayce Basques

DevTools リリースノートの最新情報をお届けします。Chrome 59 の Chrome DevTools の新機能については、以下の動画をご覧ください。

ハイライト

新機能

CSS と JS のコード カバレッジ

新しい [カバレッジ] タブで、使用されていない CSS コードと JS コードを探します。ページを読み込むか実行すると、このタブに、使用されたコードの量と読み込まれたコードの量が表示されます。必要なコードのみを送信することで、ページのサイズを削減できます。

[カバレッジ] タブ

URL をクリックすると、[ソース] パネルにそのファイルが表示され、実行されたコード行の詳細が表示されます。

[ソース] パネルのコードカバレッジの内訳

コードの各行は色分けされています。

  • 緑色は、そのコード行が実行されたことを示します。
  • 赤色は、実行されなかったことを示します。
  • 上記のスクリーンショットの 3 行目など、コードの行が赤と緑の両方になっている場合、その行の一部のコードのみが実行されたことを意味します。たとえば、var b = (a > 0) ? a : 0 などの三項演算子は、赤と緑の両方の色で表示されます。

[一致率] タブを開くには:

  1. コマンド メニューを開きます。
  2. 「Coverage」と入力し、[Show Coverage] を選択します。

ページ全体のスクリーンショット

ページの上部から下部までスクリーンショットを撮る方法については、以下の動画をご覧ください。

リクエストをブロックする

特定のスクリプト、スタイルシート、その他のリソースが使用できない場合にページがどのように動作するかを確認したい場合は、[ネットワーク] パネルでリクエストを右クリックし、[リクエスト URL をブロック] を選択します。ドロワーに新しい [リクエストのブロック] タブがポップアップ表示されます。このタブでは、ブロックされたリクエストを管理できます。

ブロック リクエストの URL

非同期 await をステップ オーバーする

これまで、次のようなスニペットのようなコードをステップ実行するのは面倒でした。test() の途中で 1 行ステップオーバーすると、setInterval() コードによって中断されます。これで、test() などの非同期コードをステップ実行すると、DevTools は最初の行から最後の行まで一貫してステップ実行します。

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

追伸: デバッグスキルをレベルアップしたい場合は、以下の新しいドキュメントをご覧ください。

変更

統合コマンド メニュー

コマンド メニューを開くと、コマンドの先頭に「より大きい」文字（>）が付加されていることがわかります。これは、コマンド メニューが [Open File] メニュー（Command+O（Mac）、Control+O（Windows、Linux））と統合されたためです。

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

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

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

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

DevTools の新機能

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