DevTools の新機能（Chrome 65）

Kayce Basques

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

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

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

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

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

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

仕組み:

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

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

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

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

    [オーバーライド] タブ

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

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

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

  5. ビューポートの上部で [Allow] をクリックし、DevTools に されます。

  6. 変更を加えます。

制限事項

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

[変更] タブ

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

[変更] タブ

図 3. [変更] タブ

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

要素のユーザー補助プロパティを調べるには、新しい [Accessibility] ペインを使用します。 カラー選択ツールでテキスト要素のコントラスト比を調べて、 ロービジョンまたは色覚に障がいを持つ方のみが利用できます。

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

[要素] パネルの [ユーザー補助機能] ペインでは、ユーザー補助機能のプロパティを調べることができます。 要素の現在の選択状態を表します。

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

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

[Accessibility] ペインの動作については、以下の Rob Dodson によるラベル付けに関する A11ycast をご覧ください。

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

カラー選択ツールにテキスト要素のコントラスト比が表示されるようになりました。コントラストを上げる の比率にすることで、ロービジョンの障がいのある方や、 色覚異常を発症しますコントラスト比について詳しくは、色とコントラストをご覧ください。 影響を与えることがあります。

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

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

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

図 5 で、4.61 の横にある 2 つのチェックマークは、この要素が拡張版 推奨コントラスト比（AAA）。チェックマークが 1 つしかない場合は、 推奨される最小コントラスト比（AA）。

[さらに表示] もっと見る をクリックして [コントラスト 比率のセクションで確認できます。[カラースペクトル] ボックスの白い線は、色の境界を表します。 満たしているものとそうでないものに分けて考えてみましょう。たとえば、このグラフのグレーの色は 図 6 は推奨事項を満たしています。つまり、白い線より下の色もすべて要件を満たしています おすすめします。

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

図 6. 開いた [コントラスト比] セクション

[監査] パネルには、すべてのテキスト要素が ページのコントラスト比が十分であることを確認します。

Chrome DevTools で Lighthouse を実行するまたは以下の A11ycast で、 [Audits] パネルでユーザー補助機能をテストします。

新しい監査

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

新しい SEO 監査

ページが新しい SEO カテゴリの各監査に合格していることを確認し、 向上します

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

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

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

Chrome 65 では、多数の新しいパフォーマンス監査も搭載されています。

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

パフォーマンスが重要Mynet のページ読み込み速度が 4 倍向上したことで、ユーザーの閲覧時間は 43% 増加 閲覧ページ数が 34% 増加、直帰率が 24% 低下、記事あたりの収益が 25% 増加 ページビュー数。詳細

ヒント:ページの読み込みパフォーマンスを改善したいけれど、どこから始めればよいかわからない場合は、 [Audits] パネルを試します。URL を指定すると、さまざまな詳細レポートが いくつかご紹介します使ってみる

その他の最新情報

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

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 でこのようなコードを入力すると、時間順で DevTools がコード内で一時停止しました。 実行されたことがわかります（図 11 を参照）。

非同期コードの手順（Chrome 63）

図 11. 非同期コードの手順（Chrome 63）

パフォーマンス パネルでの複数の録画

[パフォーマンス] パネルで、一時的に最大 5 つの録音を保存できるようになりました。録音内容は次のとおりです。 削除されます。ランタイム分析のスタートガイドをご覧ください。 パフォーマンス: [パフォーマンス] パネルに慣れることができます。

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

図 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 動画にコメントを残してください。

DevTools の新機能

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