We've created a set of resources to help you ensure your site remains available and accessible to all during the COVID-19 situation.

DevTools（Chrome 65）の新

Powered by Google Translate

Chrome 65のDevToolsには次の新機能が含まれています。

以下のリリースノートを読んだり、ビデオ版をご覧ください。

ローカルオーバーライド

ローカルオーバーライドを使用すると、DevToolsで変更を加え、それらの変更をページ読み込み全体に保持できます。以前は、DevToolsで行った変更は、ページを再読み込みすると失われていました。 ローカルオーバーライドは、ほとんどのファイルタイプで動作しますが、いくつかの例外があります。 Limitations参照してください。

Persisting a CSS change across page loads with Local Overrides.
Figure 1. Persisting a CSS change across page loads with Local Overrides

使い方:

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

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

  1. ソースパネルを開きます。 1. 上書きタブを開きます。

    The Overrides tab
    Figure 2. The Overrides tab

  2. 設定の上書きをクリックします。 1.変更を保存するディレクトリを選択します。 1.ビューポートの上部で、許可をクリックしてDevToolsにディレクトリへの読み書きアクセスを許可します。 1.変更を加えます。

制限

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

[変更]タブ

DevToolsでローカルで行った変更を新しい変更タブで追跡します。

The Changes tab
Figure 3. The Changes tab

新しいアクセシビリティツール

新しいアクセシビリティペインを使用して、要素のアクセシビリティプロパティを検査し、カラーピッカーのテキスト要素のコントラスト比を調べて、低視力障害または色のあるユーザーがアクセシビリティにアクセスできるようにします - 欠陥の欠陥。

アクセシビリティペイン

Elements パネルの Accessibility ペインを使用して、現在選択されている要素のアクセシビリティプロパティを調べます。

The Accessibility pane shows the ARIA attributes and computed properties for the element that's currently selected in the DOM Tree of the Elements panel, as well as its position in the accessibility tree.
Figure 4. The Accessibility pane shows the ARIA attributes and computed properties for the element that's currently selected in the DOM Tree on the Elements panel, as well as its position in the accessibility tree

下のラベリングのRob DodsonのA11ycastをチェックして、アクセシビリティペインを実際に見てください。

カラーピッカーでのコントラスト比

Color Pickerはテキスト要素のコントラスト比を表示します。テキスト要素のコントラスト比を増やすと、視覚障害や色覚障害のあるユーザーがサイトにアクセスしやすくなります。コントラスト比がアクセシビリティにどのように影響するかについては、 Color and contrastを参照してください。

テキスト要素の色のコントラストを改善すると、 すべてのユーザーがサイトをより使いやすくすることができます。言い換えれば、テキストが白い背景で灰色である場合、誰にでも読むことは難しいです。

Inspecting the contrast ratio of the highlighted H1 element.
Figure 5. Inspecting the contrast ratio of the highlighted h1 element

**図5 では、 4.61 **の隣にある2つのチェックマークは、この要素がenhanced recommended contrast ratio (AAA)満たすことを意味します。チェックマークが1つしかない場合は、それがminimum recommended contrast ratio (AA)に会ったことを意味します。

もっと見るをクリックしてください！ コントラスト比セクションを拡大するにはShow MoreをShow Moreます。 ** Color Spectrum **ボックスの白い線は、推奨されるコントラスト比を満たす色と、そうでない色との境界を表します。例えば、 **図6 **は推奨を満たしています。つまり、白線の下のすべての色も推奨値を満たしています。

The expanded Contrast Ratio section.
Figure 6. The expanded Contrast Ratio section

監査パネルには、自動アクセシビリティ監査機能があります。 ページ上のすべてのテキスト要素は十分なコントラスト比を持っています。

参照Run Lighthouse in Chrome DevTools 、またはアクセス可能性をテストするために監査パネルを使用する方法については、下記のA11ycastを見ます。

新しい監査

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

新しいSEO監査

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

The new SEO category of audits.
Figure 7. The new SEO category of audits

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

Chrome 65には、多くの新しいパフォーマンス監査が付属しています。

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

その他の更新

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

Chrome 65はステップインへのアップデートをもたらします。スレッド間でメッセージを渡すコードにステップStep Into際のStep Intoボタン、および非同期コード。以前のステップ動作をしたい場合は、新しいステップを使用することができます！代わりにStepボタンを押します。

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

スレッド間でメッセージを渡すコードに入ると、DevToolsは各スレッドで何が起きたかを表示します。

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

Stepping into message-passing code in Chrome 65.
Figure 8. Stepping into message-passing code in Chrome 65

以前のバージョンのChromeでこのようなコードを使用した場合、**図9 **に示すように、Chromeはコードのメインスレッド側のみを表示しました。

Stepping into message-passing code in Chrome 63.
Figure 9. Stepping into message-passing code in Chrome 63

非同期コード{: #async }へのステップ

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

例えば、図10にに足を踏み入れる後setTimeout() 、デベロッパーツールは舞台裏で、その点に至るまでのすべてのコードを実行し、その後に渡された機能で一時停止しますsetTimeout() 。

Stepping into asynchronous code in Chrome 65.
Figure 10. Stepping into asynchronous code in Chrome 65

Chrome 63でこのようなコードを実行したとき、DevToolsは**図11 **に示すように、時系列的にコードを一時停止しました。

Stepping into asynchronous code in Chrome 63.
Figure 11. Stepping into asynchronous code in Chrome 63

パフォーマンスパネル{: #recordings }での複数録音

パフォーマンスパネルで、最大5つの録音を一時的に保存できます。 DevToolsウィンドウを閉じると、録画が削除されます。 パフォーマンスパネルを快適に使用するには、 Get Started with Analyzing Runtime Performanceを参照してください。

Selecting between multiple recordings in the Performance panel.
Figure 12. Selecting between multiple recordings in the Performance panel

ボーナス:Puppeteer 1.0 {: #puppeteer } 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();
})();

詳細は、 Quick Startを参照してください。

また、DevToolsを明示的に開いていなくても、Puppeteerを使用してブラウズ中にDevToolsの機能を公開することもできます。例についてはUsing DevTools Features Without Opening DevToolsを参照してください。

DevToolsチームからの要請:Canary {: #canary }検討する

MacまたはWindowsの場合は、 Chrome Canaryをデフォルトの開発ブラウザとして使用することを検討してください。 Canaryに残っている間に好きではないバグや変更を報告した場合、DevToolsチームはフィードバックを大幅に早く解決できます。

フィードバック

あなたがここに見られる機能や変化を議論する最も良い場所は、 google-chrome-developer-tools@googlegroups.com mailing listです。あなたが短時間であれば、 @ChromeDevToolsツイートすることもできます。 DevToolsでバグが発生したと確信できる場合は、WORDS1をごopen an issueください。

以前のすべてのDevToolsリリースノートへのリンクについては、 devtools-whatsnewタグを参照してください。

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!