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

DevTools の新機能（Chrome 59）

Kayce Basques

DevTools リリースノートの新しい回へようこそ。以下の動画をご覧になるか、この記事をお読みになって、Chrome 59 の Chrome DevTools の新機能をご確認ください。

ハイライト

CSS と JS のコードカバレッジ。新しい [カバレッジ] タブで、使用されていない CSS と JS を見つけます。
ページ全体のスクリーンショット。ビューポートの上部から下部まで、ページ全体のスクリーンショットを撮ります。
リクエストをブロックする。[ネットワーク] パネルで個々のリクエストを手動で無効にします。
async await をステップオーバー。非同期関数を予測どおりにステップ実行します。
統合コマンドメニュー。新しく統合されたコマンドメニューからコマンドを実行し、ファイルを開きます。

新機能

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

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

[カバレッジ] タブ

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

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

各行のコードは次のように色分けされます。

緑色の実線は、そのコード行が実行されたことを示します。
赤色の実線は、実行されなかったことを意味します。
上のスクリーンショットの 3 行目のように、赤と緑の両方のコード行は、その行の一部のコードのみが実行されたことを意味します。たとえば、var b = (a > 0) ? a : 0 のような三項式は赤と緑の両方で色付けされます。

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

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

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

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

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

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

ブロックリクエストの URL

async 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);
  }

追伸: デバッグのスキルを向上させたいですか？次の新しいドキュメントをご覧ください。

変更点

コマンドメニューを開くと、コマンドの先頭に大なり記号（>）が付いていることがわかります。これは、コマンドメニューが [ファイルを開く] メニュー（Command+O（Mac）、または Control+O（Windows、Linux））と統合されたためです。

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

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