DevTools Digest、2016 年 8 月

Kayce Basques

Kayce と申します。DevTools のテクニカル ライターとして、DevTools の最新情報をお伝えします。

[リソース] パネルが [アプリケーション] パネルに変更されました

Chrome 52 以降、[リソース] パネルは廃止されました。名前が [アプリケーション] パネルに変更されました。リソース パネルの以前の機能はすべて引き続き使用できます。また、プログレッシブ ウェブアプリのデバッグに役立つ新機能も多数追加されています。これで、サービス ワーカーのライフサイクルとキャッシュのタイミングに関する問題をデバッグする喜びを味わうことができます。

新しい機能について詳しくは、私自身が執筆した新しいガイド「プログレッシブ ウェブアプリをデバッグする」をご覧ください。

ChromeLens

クローム レンズ。

ChromeLens は、視覚障がいのあるユーザーがウェブサイトをより使いやすくするための優れた新しい拡張機能です。

追伸: Rob Dodson がアクセシビリティに関する新しい動画シリーズ「a11ycasts」をリリースしました。

Canary で利用可能になった新機能

Canary は現在 Chrome 54 です。今後この記事をご覧になる方は、Chrome 54 以降をご利用であれば、これらの機能をご利用いただけます。

カラー選択ツールは [ソース] パネルにあります。

[ソース] パネルのカラー選択ツール。

[ネットワーク] パネルの [リソース] ペインで右クリックすると、cURL リクエストの文字列をコピーして、すべてのリソースをダウンロードできます。

すべてを curl としてコピーします。

JavaScript は、コマンド メニューから無効にできます。これまでは、この設定は [設定] からのみ行えました。

JavaScript を無効にします。

console.warn() にスタック トレースが含まれるようになりました。

console.warn() のスタック トレース。

この最後の機能は数か月前にリリースされましたが、改めてご紹介したいと思います。JS プロファイル オプションを有効にしてタイムライン レコーディングを作成すると、[ソース] パネルに関数ごとの実行時間の分類が表示されます。

ソースパネルの関数の実行時間。

コミュニティからの新しいアイデア

今後の DevTools Near You に追加される可能性のある、コミュニティからの新しいアイデアをいくつかご紹介します。

  • @matthewcp: 増加するオブジェクトのシンプルなリストを表示することで、メモリリークのデバッグを高速化。
  • @jonathanbingram: キーボードの増減ショートカットを使用して font-weight 値を増減します。
  • @_bl4de: クッキーを編集する（これは長年のリクエストですが、改めて提案していただきありがとうございます）。@kdzwinel が PR を作成中という噂があります。
  • @kienzle_s: ネットワーク パネルのフィルタに OR フィルタを追加。

新しいアイデアをお持ちですか？ぜひお聞かせください。Twitter の @ChromeDevTools までご連絡ください。

修正が必要なドキュメントや説明が必要な機能がある場合は、ドキュメント リポジトリで問題を報告してください。

来月まで