DevTools の新機能（Chrome 65）

Kayce Basques

Chrome 65 の DevTools に追加される新機能は次のとおりです。

この記事を読み進めるか、または下にあるこのリリースノートのビデオ版をご覧ください。

ローカル オーバーライド

ローカル オーバーライドを使用すると、DevTools で変更を加え、ページの読み込み間でその変更を維持できます。以前は、DevTools で行った変更はページを再読み込みすると失われていました。ローカル オーバーライドは、いくつかの例外を除き、ほとんどのファイル形式で機能します。制限事項をご覧ください。

ローカル オーバーライドを使用して、ページの読み込み間で CSS の変更を保持する。

図 1. ローカル オーバーライドを使用してページ読み込み間で CSS の変更を保持する

仕組み:

  • DevTools が変更を保存するディレクトリを指定します。
  • DevTools で変更を加えると、変更されたファイルのコピーがディレクトリに保存されます。
  • ページを再読み込みすると、DevTools はネットワーク リソースではなく、ローカルの変更済みファイルを提供します。

ローカルのオーバーライドを設定するには:

  1. [ソース] パネルを開きます。

  2. [オーバーライド] タブを開きます。

    [オーバーライド] タブ

    図 2. [オーバーライド] タブ

  3. [オーバーライドの設定] をクリックします。

  4. 変更を保存するディレクトリを選択します。

  5. ビューポートの上部にある [許可] をクリックして、DevTools にディレクトリへの読み取り / 書き込みアクセス権を付与します。

  6. 変更を加えます。

制限事項

  • DevTools では、[Elements] パネルの [DOM Tree] で行った変更は保存されません。代わりに、[ソース] パネルで HTML を編集します。
  • [スタイル] ペインで CSS を編集し、その CSS のソースが HTML ファイルの場合、DevTools は変更を保存しません。代わりに、[ソース] パネルで HTML ファイルを編集します。
  • ワークスペース。DevTools は、ネットワーク リソースをローカル リポジトリに自動的にマッピングします。DevTools で変更を加えると、その変更はローカル リポジトリにも保存されます。

[変更] タブ

新しい [変更] タブを使用して、DevTools でローカルに行った変更を追跡できます。

[変更] タブ

図 3. [変更] タブ

新しいユーザー補助ツール

新しい [ユーザー補助] ペインを使用して要素のユーザー補助プロパティを検査し、[カラー選択ツール] でテキスト要素のコントラスト比を検査して、ロービジョンや色覚障がいのあるユーザーがアクセスできるようにします。

ユーザー補助ペイン

[要素] パネルの [ユーザー補助] ペインを使用して、現在選択されている要素のユーザー補助プロパティを調べます。

ユーザー補助ペイン

図 4. [Accessibility] ペインには、[Elements] パネルの [DOM Tree] で現在選択されている要素の ARIA 属性と計算プロパティ、およびユーザー補助ツリー内の位置が表示されます。

ラベル付けに関する Rob Dodson の A11ycast で、[ユーザー補助] ペインを確認できます。

カラー選択ツールのコントラスト比

カラー選択ツールに、テキスト要素のコントラスト比が表示されるようになりました。テキスト要素のコントラスト比を高めると、低視力の障がいを持つユーザーや色覚に障がいを持つユーザーがサイトをより使いやすくできます。コントラスト比がユーザー補助に与える影響について詳しくは、色とコントラストをご覧ください。

テキスト要素の色のコントラストを改善すると、すべてのユーザーがサイトを使いやすくなります。つまり、背景が白でテキストがグレーの場合、誰にとっても読みづらいものです。

ハイライト表示された H1 要素のコントラスト比を検査しています。

図 5. ハイライト表示された h1 要素のコントラスト比を検査する

図 5 の 4.61 の横にある 2 つのチェックマークは、この要素が推奨されるコントラスト比の強化（AAA）を満たしていることを意味します。チェックマークが 1 つだけの場合は、推奨される最小コントラスト比（AA）を満たしていることを意味します。

[もっと見る] もっと見る をクリックして、[コントラスト比] セクションを開きます。[色スペクトル] ボックスの白い線は、推奨されるコントラスト比を満たす色と満たさない色の境界を表しています。たとえば、図 6 のグレーは推奨事項を満たしているため、白い線の下のすべての色も推奨事項を満たしています。

展開された [コントラスト比] セクション。

図 6. [コントラスト比] セクションが開いています

[監査] パネルには、ページ上のすべてのテキスト要素に十分なコントラスト比があることを確認するための自動アクセス アクセシビリティ監査があります。

Audits パネルを使用してユーザー補助をテストする方法については、Chrome DevTools で Lighthouse を実行するをご覧ください。または、以下の A11ycast をご覧ください。

新しい監査

Chrome 65 には、SEO 監査の新しいカテゴリと、多くの新しいパフォーマンス 監査が導入されています。

新しい SEO 監査

ページが新しい SEO カテゴリの各監査に合格すると、検索エンジンのランキングが向上する可能性があります。

監査の新しい SEO カテゴリ。

図 7. 新しい SEO カテゴリの監査

新しいパフォーマンス監査

Chrome 65 には、多くの新しいパフォーマンス監査も導入されています。

  • JavaScript の起動時間が長い
  • 静的アセットで非効率的なキャッシュ ポリシーを使用している
  • ページ リダイレクトを回避する
  • ドキュメントでプラグインを使用しています
  • CSS を縮小する
  • JavaScript を縮小する

パフォーマンスは重要です。Mynet はページの読み込み速度を 4 倍に改善した結果、ユーザーのサイト滞在時間が 43% 長くなり、ページの閲覧回数は 34% 増加しました。また、直帰率は 24% 低下し、記事のページビューあたりの収益は 25% 増加しました。詳細

ヒント: ページの読み込みパフォーマンスを改善したいが、何から始めればよいかわからない場合は、[監査] パネルをお試しください。URL を指定すると、そのページを改善するためのさまざまな方法に関する詳細なレポートが生成されます。使ってみる

その他の最新情報

ワーカーと非同期コードによる信頼性の高いコード ステップ

Chrome 65 では、スレッド間でメッセージを渡すコードと非同期コードにステップインする際の [ステップイン] ステップイン ボタンが更新されました。以前のステップ動作が必要な場合は、代わりに新しい [ステップ] ステップ ボタンを使用できます。

スレッド間でメッセージを渡すコードにステップインする

スレッド間でメッセージを渡すコードにステップインすると、各スレッドで何が起こるかが DevTools に表示されるようになります。

たとえば、図 8 のアプリは、メインスレッドとワーカー スレッドの間でメッセージを渡します。メインスレッドの postMessage() 呼び出しにステップインすると、DevTools はワーカー スレッドの onmessage ハンドラで停止します。onmessage ハンドラ自体がメインスレッドにメッセージを返します。その呼び出しにステップインすると、DevTools がメインスレッドで停止します。

Chrome 65 でメッセージ パッシング コードにステップインする。

図 8. Chrome 65 でのメッセージ パッシング コードへのステップイン

以前のバージョンの Chrome でこのようなコードにステップインすると、図 9 に示すように、コードのメインのスレッド側のみが表示されていました。

Chrome 63 でメッセージ パスコードにステップインする。

図 9. Chrome 63 でのメッセージ パッシング コードへのステップイン

非同期コードへのステップイン

非同期コードにステップインするときに、最終的に実行される非同期コードで一時停止することを前提とするように DevTools が変更されました。

たとえば、図 10 では、setTimeout() にステップインした後、DevTools は、そのポイントに至るまでのすべてのコードをバックグラウンドで実行し、setTimeout() に渡された関数で停止します。

Chrome 65 での非同期コードへのステップイン。

図 10. Chrome 65 での非同期コードへのステップイン

Chrome 63 でこのようなコードにステップインすると、図 11 に示すように、コードが時系列で実行されるときに DevTools が一時停止しました。

Chrome 63 での非同期コードへのステップイン。

図 11. Chrome 63 での非同期コードへのステップイン

パフォーマンス パネルに複数の録画が表示される

[パフォーマンス] パネルで、最大 5 件の録音を一時的に保存できるようになりました。録画は、DevTools ウィンドウを閉じると削除されます。[パフォーマンス] パネルを使いこなすには、ランタイム パフォーマンスの分析を始めるをご覧ください。

[パフォーマンス] パネルで複数の録画から選択する。

図 12. [パフォーマンス] パネルで複数の録音を選択する

ボーナス: Puppeteer 1.0 で DevTools アクションを自動化する

Chrome DevTools チームが管理するブラウザ自動化ツールである Puppeteer のバージョン 1.0 のサポートが終了しました。Puppeteer を使用すると、スクリーンショットのキャプチャなど、これまで DevTools でしか行えなかった多くのタスクを自動化できます。

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

また、PDF の生成など、一般に役立つ多くの自動化タスク用の API も用意されています。

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

詳しくは、クイック スタートをご覧ください。

Puppeteer を使用して、DevTools を明示的に開かずに、ブラウジング中に DevTools 機能を公開することもできます。例については、DevTools を開かずに DevTools の機能を使用をご覧ください。

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。