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 は変更を保存しません。代わりに、[Sources] パネルで HTML ファイルを編集します。
  • ワークスペース。DevTools は、ネットワーク リソースをローカル リポジトリに自動的にマッピングします。DevTools で変更を加えると、その変更はローカル リポジトリにも保存されます。

[変更] タブ

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

[変更] タブ

図 3. [変更] タブ

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

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

ユーザー補助ペイン

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

ユーザー補助ペイン

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

[Accessibility] ペインの動作については、以下の 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 の新機能シリーズで取り上げられたすべての内容のリスト。