Chrome Canary では、この 1 か月間、多くの機能が追加されました。タイムラインの集計詳細で、サイトのパフォーマンスの問題の原因となっているサードパーティ スクリプトを確認する方法、新しいカラーパレットで一貫した色を選択する方法、カスタマイズ可能なネットワーク プロファイルを使用して会議用 WiFi をシミュレートする方法、新しいメインメニューと改善されたツールチップで DevTools UI を最大限に活用する方法について説明します。
パフォーマンスの問題の責めを明確化: タイムラインに詳細を集計
現在のウェブサイトでは、サードパーティのビーコン、アナリティクス、ソーシャル、フォント読み込み、広告サービスがますます増えており、過剰な場合もあります。これを回避し、問題を可視化するために、集計された詳細情報をタイムラインに導入します。
[集計の詳細] タブでは、コストの高い関数や呼び出しツリー全体に絞り込み、選択したデータをドメイン、サブドメイン、個別の URL 別に分類できます。たとえば、上記のページ読み込みのタイムラインでは、facebook.net や twitter.com などのドメインから送信されたサードパーティ スクリプトに遅延を簡単に関連付けることができます。
新しい専用のメインメニュー
メイン ツールバーを整理するため、引き出し、設定、ドッキング アイコンを新しい専用のメインメニューに移動しました。
特に、装着がはるかに簡単になりました。以前のアイコンを長押しする必要はなく、各ホルダーの位置に独自のアイコンが表示されます。
ドッキングに加えて、クイック アクセス ファイル検索、ショートカット、ヘルプ（新しいホームページに移動）が追加されました。
改善されたツールチップで DevTools を探す
DevTools には多くのボタンがありますが、そのすべてが自明であるとは限りません。システムネイティブのツールチップを、プラットフォームに応じたカスタム ツールチップに置き換えることで、アクションとそのショートカットを簡単に見つけられるようになりました。
新しいツールチップはより迅速に表示され、キーボード ショートカット（ある場合）が含まれています。
カスタム ネットワーク スロットリング プロファイルを作成する
ネットワーク スロットリングのデフォルト オプションがユースケースに制限がありすぎる場合や、「会議用 WiFi」オプションが必要な場合、または懐かしさに浸るために昔ながらの 「110 ボー」ラインをエミュレートしたい場合は、朗報があります。これらの操作を行えるよう、新たに [設定] パネルを追加しました。
自動、マテリアル、カスタムのカラーパレット
魔法の色を再現する場合でも、既存のカラーパレットを使用する場合でも、改良されたカラー選択ツールを使用すると、サイトに統一されたカラーパレットを選択できます。
パレットの横にある小さな切り替えアイコンをクリックすると、次のいずれかを選択できます。
- ページの色 - このパレットは、CSS で検出された色から自動生成されます。既存のサイトを拡張する場合に適しています。
- マテリアル デザイン - マテリアル デザイン パレットは、美しい色をすぐに使用できるため、新しいプロジェクトを開始する際に最適です。現在はすべての原色が用意されていますが、まもなくすべての色合いが追加されます。
- カスタム - 独自のプレイグラウンドです。新しい色を追加するには、選択ツールで新しい色を選択し、パレットの横にある「+」アイコンをクリックします。画像を並べ替えるにはドラッグし、右クリックすると、削除など、その他のオプションを表示できます。
ご意見をお聞かせください。また、カラーストーリーをさらに広げる方法について、ご意見をお寄せください。
その他の主な新機能
- fetch() API を使用して行われたリクエストがネットワーク パネルに表示されるようになりました
- パネルの自動レイアウトにより、DevTools のサイズを変更したときに、パネルが新しいスペースの制約に合わせて調整されます。
- 要素の検証とデバイスモードに、一連の新しいアイコンが追加されました。
- ノードがハイライト表示されている場合でも、DOM パネルの属性の色が変わります。（以前はすべて白色でした）。
- 非表示の要素（選択した DOM ノードで「h」を押すと有効になります）の左側にグレーの円が表示されます。DOM ブレークポイントの場合も同様に、青い円が表示されます。（これは、:hover などの要素の状態を強制するためにすでにあるオレンジ色のインジケーターに似ています）。
いつものように、Twitter または下記のコメント欄からご意見をお寄せください。バグは crbug.com/new に送信してください。
来月まで
Paul Bakaus と DevTools チーム