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

DevTools の新機能（Chrome 59）

Kayce Basques

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

ハイライト

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

新しい機能と特長

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

新しい [一致率] タブで、使用されていない CSS や JS コードを探すことができます。ページの読み込みまたは実行の際に、使用されたコードの量と読み込まれた量がタブに表示されます。必要なコードのみを配布することで、ページのサイズを小さくできます。

[カバレッジ] タブ

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

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

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

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

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

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

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

以下の動画では、ページの上部から下部までスクリーンショットを撮影する方法を説明しています。

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

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

ブロックリクエスト URL

async await のステップオーバー

これまで、以下のスニペットのようなコードをステップ実行しようとすることは頭痛の種でした。test() の途中で行を踏み出すと、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）または Ctrl+O（Windows、Linux）です。

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

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

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

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

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