DevTools の新機能(Chrome 59)

DevTools リリースノートの最新情報をお届けします。動画を見る 以下のリンクから Chrome 59 の Chrome DevTools の新機能をぜひご覧ください。

ハイライト

新機能

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

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

[カバレッジ] タブ

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

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

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

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

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

  1. コマンド メニューを開きます。
  2. Coverage」と入力し、[Show 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);
  }

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

変更回数

統合コマンド メニュー

コマンド メニューを開くと、コマンドが の前に大なり文字(>)が付加されます。これは、コマンドが メニューが [ファイルを開く] メニューと統合されました。 Command+O(Mac)、または Ctrl+O (Windows、Linux)。

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

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

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

投稿の新機能や変更点、DevTools に関連するその他の点について議論するには、次のオプションを使用します。

DevTools の新機能

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