DevTools の最新情報を随時お届け
この投稿の最初のニュース項目はメタ情報です。これがアップデートそのものです。不定期に、少なくとも月に 1 回、Chrome DevTools の最新情報をまとめます。
新機能とは、Chrome Canary に追加されたばかりの新機能です。安定版の Chrome をご利用の場合は、そちらでも問題ありません。冒険したいとお考えの方には この投稿がおすすめです。最新の機能やバグ修正に加えて、各投稿の最後にあるコミュニティ ハートビート セクションもご覧になり、皆様のご協力に感謝申し上げます。
それでは、実際のニュースを見ていきましょう。
DevTools の新機能
[ネットワーク] と [タイムライン] のフィルム ストリップのようなスクリーンショット
先週、ネットワーク タブとタイムライン タブの両方でページのスクリーンショットをキャプチャできる重要な新機能を試験運用から正式リリースしました。
[ネットワーク パネル] で小さなカメラアイコンをクリックしてフレームのキャプチャを有効にしてから、ページを再読み込みしてキャプチャをトリガーします。現在のところ、WebPageTest などの他のツールでキャプチャしたスクリーンショット以外は、実際にペイントから生成されたフレームのみが表示されます。
フレームのいずれかをダブルクリックするとズーム表示になり（左矢印キーと右矢印キーで移動できます）、フレームの上にカーソルを合わせると、パネルとタイムラインに線が表示され、フレームがキャプチャされた正確な時刻を可視化できるため、読み込みシーケンスと関連付けることができます。これにより、レンダリング ブロック ウェブフォントなどの一般的な読み込みの問題のデバッグが大幅に簡素化されます。
タイムライン パネルで、上部のツールバーの [スクリーンショット] チェックボックスをオンにすると、スクリーンショットのキャプチャを有効にできます。ネットワーク パネルとは動作が少し異なります。この場合、実際のペイントに関係なく、できるだけ頻繁にキャプチャして、タイムラインの他の行と相関するリニアなタイムスケールにスクリーンショットをドロップできるようにします。ダブルクリックしてプレビューを表示する必要はなく、カーソルを合わせると拡大したフレームが表示されます。
この 2 つの機能は機能と UX の点で若干異なるため、ぜひこの機能をお試しいただき、crbug.com/new のチケットまたは @ChromeDevTools のツイートでフィードバックをお寄せください。
ネットワーク パネルの [ネットワーク スロットリング]
デバイスモードの導入時に追加された機能であるネットワーク スロットリングが、ネットワーク パネルのツールバーに追加されました。これにより、ネットワークの最適化を 1 か所で行うことができます。
この新しいホームは単なるミラーです。デバイスモード以外でも引き続き使用できます。サイトをレスポンシブにするために、接続不良をシミュレートすることは引き続き重要です。
長い勤務時間の後にインターネット接続が切れた ネットワークスロットリングを無効にするのを 忘れてしまったことに気づいた人はいませんかネットワーク スロットリングが有効な場合、[ネットワーク] パネルのタブに警告アイコンが表示されるようになりました。
その他の情報
- ネットワーク タイムラインに表示される奇妙な円が嫌いだった方も多いのではないでしょうか？私たちも同じです。これらは、（新しいフィルム ストリップ内の）フレームがキャプチャされた時点です。ホバーすると線として表示されるようになりました。
- デバイスを切り替える際にデバイスモードで向きを保持するようになりました
コミュニティのハートビート
Chrome DevTools で詳細を確認する
Bret Little がリリースしたこの優れたチュートリアル コースでは、DevTools の基本機能のほか、多くの詳細なヒントとコツを学ぶことができます。役立つ情報が満載です。DevTools のドキュメントをさらに読んでみましょう。
DevTools IDE って何？
ウェブ デベロッパーで DevTools の愛好家である Kenneth Auchenberg 氏は、数か月前にプロトタイプ版のスタンドアロン DevTools アプリを開発しました。そのブログ投稿が、今週、何らかの理由で（ハッカーの）ニュースになりました。
DevTools を本格的な IDE にすることは楽しいアイデアであり、Google の多くのチームメンバーが以前から夢見ていたことですが、壮大なプロジェクトでもあります。
どう思いますか？DevTools IDE は夢物語ですか？それとも実現可能でしょうか？どのようになるべきですか？ぜひコメント欄でお知らせください。
ご参加をお待ちしております
Paul Bakaus と DevTools チーム