DevTools の最新情報
この投稿の最初のニュースは少しメタです。この更新自体です。不定期に、少なくとも月に 1 回、Chrome DevTools の最新情報をまとめます。
新機能とは、Chrome Canary に追加されたばかりの新機能です。安定版の Chrome をお使いの場合は、そちらでも問題ありません。冒険心があり、最新情報を常に把握したい場合は、これらの投稿がおすすめです。最新の機能とバグ修正に加えて、各投稿の最後に [コミュニティのハートビート] セクションがあり、Google の大切なユーザーの皆様が貢献した素晴らしい成果をハイライトしています。
それでは、実際のニュースを見ていきましょう。
DevTools の新機能
[ネットワーク] と [タイムライン] のフィルム ストリップのようなスクリーンショット
先週、ネットワーク タブとタイムライン タブの両方でページのスクリーンショットをキャプチャできる重要な新機能を試験運用から正式リリースしました。
[ネットワーク パネル] で小さなカメラアイコンをクリックしてフレームのキャプチャを有効にし、ページを再読み込みしてキャプチャをトリガーします。現在のところ、WebPageTest などの他のツールでキャプチャしたスクリーンショット以外は、実際にペイントから生成されたフレームのみが表示されます。
フレームのいずれかをダブルクリックするとズーム表示になり（左矢印と右矢印を使用して移動できます）、フレームの上にカーソルを合わせると、パネルとタイムラインに線が表示され、フレームがキャプチャされた正確な時刻を可視化できるため、読み込みシーケンスと関連付けることができます。これにより、レンダリング ブロックするウェブフォントなどの一般的な読み込みの問題のデバッグが大幅に簡素化されます。
タイムライン パネルで、上部のツールバーの [スクリーンショット] チェックボックスをオンにすると、スクリーンショットのキャプチャを有効にできます。ネットワーク パネルとは動作が少し異なります。この場合、実際のペイントに関係なく、できるだけ頻繁にキャプチャして、タイムラインの他の行と相関するリニアなタイムスケールにスクリーンショットをドロップできるようにします。ダブルクリックしてプレビューを表示する必要はなく、カーソルを合わせると拡大したフレームが表示されます。
機能と 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 チーム