DevTools の新機能（Chrome 59）

Kayce Basques

DevTools リリースノートのパート 2 へようこそ。動画を見る 以下のリンクから、Chrome 59 の Chrome DevTools の新機能をぜひご覧ください。

ハイライト

新機能

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

新しい [カバレッジ] タブでは、使用されていない CSS コードや JavaScript コードを確認できます。データを読み込んだり このタブでは、以前使用されたコードの量と、 確認できます。コードを配布するだけでページのサイズを縮小できる 提供します

[カバレッジ] タブ

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

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

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

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

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

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

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

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

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

特定のスクリプト、スタイルシート、クエリが実行されたときのページの動作を どうすればよいでしょうか。[Network] でリクエストを右クリックします。 [Block Request 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 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。