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

DevTools の新機能（Chrome 59）

Kayce Basques

DevTools リリースノートのパート 2 へようこそ。Chrome 59 の Chrome DevTools の新機能については、以下の動画または続きをお読みください。

特長

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

新しい機能と特長

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

新しい [カバレッジ] タブでは、使用されていない CSS コードや JavaScript コードを確認できます。ページの読み込み時や実行時には、使用されたコードの量と読み込まれた量がタブに表示されます。必要なコードのみを配布することで、ページのサイズを小さくできます。

[カバレッジ] タブ

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

[Sources] パネルに表示されるコードカバレッジの内訳

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

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

[カバレッジ] タブを開くには:

コマンドメニューを開きます。
「Coverage」と入力して [一致率を表示] を選択します。

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

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

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

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

ブロックリクエスト 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);
  }

デバッグのスキルを高めたい場合は、以下の新しいドキュメントをご確認ください。

変更回数

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

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

デフォルトの開発ブラウザとして 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 動画にコメントを残してください。