Chrome 65のDevToolsには次の新機能が含まれています。
- Local Overrides
- New accessibility tools
- The Changes tab
- New SEO and performance audits
- Multiple recordings in the Performance panel
- Reliable code stepping with workers and asynchronous code
以下のリリースノートを読んだり、ビデオ版をご覧ください。
ローカルオーバーライド
ローカルオーバーライドを使用すると、DevToolsで変更を加え、それらの変更をページ読み込み全体に保持できます。以前は、DevToolsで行った変更は、ページを再読み込みすると失われていました。 ローカルオーバーライドは、ほとんどのファイルタイプで動作しますが、いくつかの例外があります。 Limitations参照してください。
使い方:
- DevToolsが変更を保存するディレクトリを指定します。 DevToolsを変更すると、DevToolsは変更されたファイルのコピーをディレクトリに保存します。 *ページをリロードすると、DevToolsはネットワークリソースではなくローカルの変更されたファイルを提供します。
ローカルオーバーライドを設定するには:
ソースパネルを開きます。 1. 上書きタブを開きます。
Figure 2. The Overrides tab 設定の上書きをクリックします。 1.変更を保存するディレクトリを選択します。 1.ビューポートの上部で、許可をクリックしてDevToolsにディレクトリへの読み書きアクセスを許可します。 1.変更を加えます。
制限
- DevToolsは、Elements パネルの DOM Tree の変更を保存しません。代わりにソースパネルでHTMLを編集してください。
- スタイルペインでCSSを編集し、そのCSSのソースがHTMLファイルの場合、DevToolsは変更を保存しません。代わりにソースパネルでHTMLファイルを編集してください。
関連機能
- Workspaces 。 DevToolsは自動的にネットワークリソースをローカルリポジトリにマップします。 DevToolsを変更すると、その変更もローカルリポジトリに保存されます。
[変更]タブ
DevToolsでローカルで行った変更を新しい変更タブで追跡します。
新しいアクセシビリティツール
新しいアクセシビリティペインを使用して、要素のアクセシビリティプロパティを検査し、カラーピッカーのテキスト要素のコントラスト比を調べて、低視力障害または色のあるユーザーがアクセシビリティにアクセスできるようにします - 欠陥の欠陥。
アクセシビリティペイン
Elements パネルの Accessibility ペインを使用して、現在選択されている要素のアクセシビリティプロパティを調べます。
下のラベリングのRob DodsonのA11ycastをチェックして、アクセシビリティペインを実際に見てください。
カラーピッカーでのコントラスト比
Color Pickerはテキスト要素のコントラスト比を表示します。テキスト要素のコントラスト比を増やすと、視覚障害や色覚障害のあるユーザーがサイトにアクセスしやすくなります。コントラスト比がアクセシビリティにどのように影響するかについては、 Color and contrastを参照してください。
テキスト要素の色のコントラストを改善すると、 すべてのユーザーがサイトをより使いやすくすることができます。言い換えれば、テキストが白い背景で灰色である場合、誰にでも読むことは難しいです。
h1 element
**図5 では、 4.61 **の隣にある2つのチェックマークは、この要素がenhanced recommended contrast ratio (AAA)満たすことを意味します。チェックマークが1つしかない場合は、それがminimum recommended contrast ratio (AA)に会ったことを意味します。
もっと見るをクリックしてください！ コントラスト比セクションを拡大するにはShow MoreをShow Moreます。 ** Color Spectrum **ボックスの白い線は、推奨されるコントラスト比を満たす色と、そうでない色との境界を表します。例えば、 **図6 **は推奨を満たしています。つまり、白線の下のすべての色も推奨値を満たしています。
関連機能
監査パネルには、自動アクセシビリティ監査機能があります。 ページ上のすべてのテキスト要素は十分なコントラスト比を持っています。
参照Run Lighthouse in Chrome DevTools 、またはアクセス可能性をテストするために監査パネルを使用する方法については、下記のA11ycastを見ます。
新しい監査
Chrome 65には、全く新しいカテゴリのSEO監査と多くの新しいパフォーマンス監査が付属しています。
新しいSEO監査
ページが新しい SEO カテゴリの各監査に合格するようにすることで、検索エンジンのランキングが向上する場合があります。
新しいパフォーマンス監査
Chrome 65には、多くの新しいパフォーマンス監査が付属しています。
- JavaScriptの起動時間が長い 静的資産に対する非効率なキャッシュポリシーを使用 *ページリダイレクトを避ける *ドキュメントはプラグインを使用します
- CSSの縮小
- JavaScriptを縮小する
その他の更新
- New, manual accessibility audits
- Updates to the WebP auditは他の次世代画像フォーマットをより包括的にする
- A rehaul of the accessibility score *アクセシビリティ監査がページに適用されない場合、その監査はアクセシビリティスコアにカウントされなくなります *パフォーマンスはレポートの一番上のセクションになりました
ワーカーと非同期コードによる信頼性の高いコードステッピング
Chrome 65はステップインへのアップデートをもたらします。スレッド間でメッセージを渡すコードにステップStep Into際のStep Intoボタン、および非同期コード。以前のステップ動作をしたい場合は、新しいステップを使用することができます！代わりにStepボタンを押します。
スレッド間でメッセージを渡すコードへのステップ
スレッド間でメッセージを渡すコードに入ると、DevToolsは各スレッドで何が起きたかを表示します。
たとえば、**図8 **のアプリは、メインスレッドとワーカースレッドの間にメッセージを渡します。メインスレッドでpostMessage()呼び出しを実行すると、 onmessageはワーカースレッドのonmessageハンドラで一時停止します。 onmessageハンドラ自体は、メインスレッドにメッセージを戻します。 そのへの呼び出しは、DevToolsをメインスレッドに戻します。
以前のバージョンのChromeでこのようなコードを使用した場合、**図9 **に示すように、Chromeはコードのメインスレッド側のみを表示しました。
非同期コード{: #async }へのステップ
非同期コードにステップインすると、DevToolsは最終的に実行される非同期コードで一時停止することを前提とします。
例えば、図10にに足を踏み入れる後setTimeout() 、デベロッパーツールは舞台裏で、その点に至るまでのすべてのコードを実行し、その後に渡された機能で一時停止しますsetTimeout() 。
Chrome 63でこのようなコードを実行したとき、DevToolsは**図11 **に示すように、時系列的にコードを一時停止しました。
パフォーマンスパネル{: #recordings }での複数録音
パフォーマンスパネルで、最大5つの録音を一時的に保存できます。 DevToolsウィンドウを閉じると、録画が削除されます。 パフォーマンスパネルを快適に使用するには、 Get Started with Analyzing Runtime Performanceを参照してください。
ボーナス: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タグを参照してください。
Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!