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

DevTools の新機能（Chrome 65）

Kayce Basques

Chrome 65 では、DevTools に次の新機能が追加されます。

ローカルオーバーライド
新しいユーザー補助ツール
[変更] タブ
新しい SEO とパフォーマンスの監査
[パフォーマンス] パネルに複数の録画を表示
ワーカーと非同期コードを使用した信頼性の高いコードステッピング

以下のリリースノートをお読みいただくか、以下のリリースノートの動画をご覧ください。

注: お使いの Chrome のバージョンを chrome://version でご確認ください。これより前のバージョンを実行している場合、これらの機能はありません。それ以降のバージョンを実行している場合は、これらの機能が変更された可能性があります。Chrome は約 6 週間ごとに新しいメジャーバージョンに自動更新されます。

ローカルでオーバーライド

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

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

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

仕組み:

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

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

[ソース] パネルを開きます。
[オーバーライド] タブを開きます。

図 2. [オーバーライド] タブ
[オーバーライドを設定] をクリックします。
変更を保存するディレクトリを選択します。
ビューポートの上部で [Allow] をクリックし、ディレクトリに対する読み取りと書き込みのアクセス権を DevTools に付与します。
設定を変更します。

制限事項

DevTools では、[Elements] パネルの [DOM Tree] で行った変更は保存されません。代わりに [ソース] パネルで HTML を編集します。
[スタイル] ペインで CSS を編集する際に、その CSS のソースが HTML ファイルである場合、DevTools はその変更を保存しません。代わりに、[Sources] パネルで HTML ファイルを編集します。

ワークスペース。DevTools は、ネットワークリソースをローカルリポジトリに自動的にマッピングします。DevTools で変更を加えるたびに、その変更はローカルリポジトリにも保存されます。

[変更] タブ

新しい [Changes] タブを使用して、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] パネルには、ページ上のすべてのテキスト要素のコントラスト比が十分であるかを確認する自動ユーザー補助機能監査が用意されています。

[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 を渡すと、ページを改善するためのさまざまな方法に関する詳細なレポートを取得できます。使ってみる

その他の最新情報

新しい手動によるユーザー補助監査
WebP 監査を更新し、他の次世代の画像形式もよりインクルーシブに
ユーザー補助機能スコアの刷新
ユーザー補助の監査がページに適用されない場合、その監査はユーザー補助スコアにカウントされなくなります。
[パフォーマンス] がレポートの最上位セクションに

ワーカーと非同期コードを使用した信頼性の高いコードステッピング

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

スレッド間でメッセージを渡すコードへのステップ

スレッド間でメッセージを渡すコードにステップすると、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 に関連するその他のことについて話し合います。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。