このページは 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. [オーバーライド] タブ
[Setup Overrides] をクリックします。
変更内容を保存するディレクトリを選択します。
ビューポートの上部で [許可] をクリックし、DevTools にディレクトリへの読み取りと書き込みのアクセス権を付与します。
設定を変更します。

制限事項

DevTools では、[要素] パネルの [DOM ツリー] に加えた変更は保存されません。代わりに、[ソース] パネルで HTML を編集します。
[スタイル] ペインで CSS を編集した場合、その CSS のソースが HTML ファイルである場合、DevTools はその変更を保存しません。代わりに、[ソース] パネルで HTML ファイルを編集してください。

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

[変更] タブ

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

[変更] タブ

図 3. [変更] タブ

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

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

[ユーザー補助機能] ペイン

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

以下のラベル付けに関する Rob Dodson の A11ycast で、[Accessibility] ペインの実際の動作を確認してください。

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

カラー選択ツールにテキスト要素のコントラスト比が表示されるようになりました。テキスト要素のコントラスト比を上げると、ロービジョンや色覚に障がいのあるユーザーがサイトにアクセスしやすくなります。コントラスト比がユーザー補助に与える影響について詳しくは、色とコントラストをご覧ください。

テキスト要素の色のコントラストを上げると、あらゆるユーザーにとって使いやすいサイトになります。つまり、テキストがグレーで背景が白の場合、誰も読むのが難しくなります。

ハイライト表示された H1 要素のコントラスト比を調べます。

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

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

さらに表示アイコンをクリックして [コントラスト比] セクションを展開します。[Color Spectrum] ボックスの白い線は、推奨されるコントラスト比を満たす色とそうでない色の境界を表します。たとえば、図 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 を入力すると、そのページを改善するためのさまざまな方法に関する詳細なレポートが出力されます。使ってみる

その他の最新情報

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

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

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

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

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

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

メッセージ受け渡しコードの設定（Chrome 65）

図 8. メッセージ受け渡しコードの設定（Chrome 65）

以前のバージョンの Chrome でこのようなコードにアクセスすると、図 9 に示すように、Chrome にはコードのメインスレッド側しか表示されていませんでした。

メッセージ受け渡しコードの設定（Chrome 63）。

図 9. メッセージ受け渡しコードの設定（Chrome 63）

非同期コードにステップする

非同期コードにステップインする際、DevTools は最終的に実行される非同期コードで一時停止することを想定するようになりました。

たとえば、図 10 では、setTimeout() にステップ移動した後、それまでのコードがバックグラウンドで実行され、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 の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。