こんにちは、Kayce です。DevTools のテクニカル ライターです。ここでは DevTools の最新状況について説明します。
[Resources] パネルが [Application] パネルになりました
Chrome 52 では、[リソース] パネルは廃止されました。[Application] パネルに名前が変更されました。[リソース] パネルの古い機能はすべて引き続きご利用いただけます。また、プログレッシブ ウェブアプリのデバッグに役立つ新機能も多数あります。Service Worker のライフサイクルとキャッシュのタイミングに関する問題をデバッグして、ぜひ体験してください。
新機能の詳細については、デベロッパーが作成した新しいガイド「プログレッシブ ウェブアプリのデバッグ」をご覧ください。
ChromeLens
ChromeLens は、視覚障がいのあるユーザーがウェブサイトにアクセスしやすくするための優れた新しい拡張機能です。
追伸 Rob Dodson は、ユーザー補助に関する新しい動画シリーズ a11ycasts を開始しました。
Canary 版の新機能
Canary は現在 Chrome 54 です。Chrome 54 以降では これらの機能を使用できます
カラー選択ツールは [Sources] パネルにあります。
[ネットワーク] パネルの [リソース] ペインを右クリックし、cURL リクエストの文字列をコピーして、すべてのリソースをダウンロードできます。
JavaScript はコマンド メニューから無効にできます。以前は [設定]からのみ利用可能でした
console.warn() にスタック トレースが含まれるようになりました。
この最後の機能は数か月前から登場していますが、もう一つ取り上げておきましょう。JS プロファイル オプションを有効にしてタイムライン記録を作成すると、[Sources] パネルで実行時間の関数ごとの内訳を確認できます。
コミュニティからの新しいアイデア
ここでは、コミュニティから寄せられた、今後の DevTools に搭載される可能性のあるいくつかの新しいアイデアをご紹介します。
- @matthewcp: 増加しているオブジェクトのシンプルなリストを表示することで、メモリリークのデバッグを高速化します。
- @jonathanbingram: キーボード ショートカットを使用して
font-weightの値を増減します。 - @_bl4de: Cookie を編集します（実際には長期間のリクエストですが、再度リクエストしていただきありがとうございます）。@kdzwinel には PR があると言われています。
- @kienzle_s: [Network] パネルのフィルタに OR フィルタを追加します。
新しいアイデアがあるときは、ぜひお聞かせください。ぜひ Twitter（@ChromeDevTools）でお知らせください。
修正が必要なドキュメントや説明が必要な機能がありましたら、お気軽にドキュメント リポジトリでイシューを作成してください。
来月まで！