DevTools の最新情報
最初のニュースは少しメタです これが今回のアップデートです時々、少なくとも月に 1 回は Chrome DevTools の現状について 報道の新たな最新情報をお伝えします
Chrome Canary に新たに加わった新機能についてお話しします冒険好きな方には こちらの投稿がおすすめです最新の機能やバグ修正に加えて、各投稿の最後に「コミュニティのハートビート」セクションを設けています。このセクションでは、ユーザーの皆さんからのすばらしい貢献に焦点を当てています。
それでは、実際のニュースを詳しく見ていきましょう。
DevTools の新機能
ネットワークとタイムラインにフィルム ストリップ形式のスクリーンショットを表示
わずか 1 週間前に、重要な新機能をテストから外しました。[ネットワーク] タブと [タイムライン] タブの両方でページのスクリーンショットをキャプチャする機能です。
[Network] パネルで、小さなカメラアイコンをクリックしてフレームのキャプチャを有効にしてから、ページを再読み込みしてキャプチャをトリガーします。WebPageTest などの他のツールでキャプチャしたスクリーンショットを除き、現時点では実際にペイントで生成されたフレームのみを表示しています。
フレームの 1 つをダブルクリックするとズームビューが表示され（次に左右の矢印を使用して移動します）、フレームにカーソルを合わせると、パネルとタイムライン全体に線が表示され、フレームがキャプチャされたタイミングを正確に可視化して、読み込みシーケンスに関連付けることができます。これにより、ウェブフォントのレンダリング ブロックなど、読み込みに関する一般的な問題のデバッグがはるかに容易になります。
タイムライン パネルで上部のツールバーの [スクリーンショット] チェックボックスをオンまたはオフにすることで、スクリーンショットのキャプチャを有効にできます。Network パネルとは動作が少し異なります。この例では、実際のペイントに関係なく、タイムラインの他の行と相関する線形タイムスケールでスクリーンショットをドロップできるように、可能な限り頻繁にキャプチャします。ダブルクリックしてプレビューを表示するのではなく、カーソルを合わせたときに拡大されたフレームが表示されます。
この 2 つは、機能と UX の点で両者が一致しないため、crbug.com/new のチケットまたは @ChromeDevTools へのツイートを通じて、ぜひこの機能をお試しいただき、フィードバックをお寄せください。
[Network] パネルのネットワーク スロットリング
Device Mode の導入時に追加された機能であるネットワーク スロットリングは、ネットワーク パネルのツールバーに 2 つ目のホームが表示されるため、1 か所でネットワークの最適化に集中できます。
この新しいホームはただの鏡です。デバイスをレスポンシブにする場合、接続不良のシミュレーションが依然として非常に重要であるため、デバイスモードでも引き続き利用できます。
終日仕事でインターネット接続が切れたのに、ネットワーク スロットリングを無効にするのを忘れていたことに気づいた人はいませんか？ネットワーク スロットリングが有効になっている場合、[ネットワーク] パネルのタブに警告アイコンが表示されるようになりました。
さまざまな情報
- ネットワークのタイムラインに表示されるおかしな円は嫌いですか？私たちも、これは、（新しいフィルム ストリップの）フレームがキャプチャされた時点です。カーソルを合わせると線で表示されます。
- デバイスモードでデバイスを切り替えても画面の向きが保持
コミュニティのハートビート
Chrome DevTools の最新版
Bret Little がリリースした簡単なチュートリアル コースでは、DevTools の基本的な機能だけでなく、詳細なヒントとコツも多数紹介しています。役立つ情報だけでなく DevTools のドキュメントが増えても問題は生じません
DevTools IDE...？
DevTools の愛好家であるウェブ デベロッパーである Kenneth Auchenberg は、概念実証用のスタンドアロンの DevTools アプリを数か月前に開発しました。彼のブログ投稿は今週、再びハッカーに関するニュースになりました。
DevTools を本格的な IDE にすることは面白いアイデアです。チームメンバーの多くが以前に思い浮かべたものですが、大きな割合のプロジェクトでもあります。
ご意見をお聞かせください DevTools IDE は夢のような状態でしょうか。それともうまくいくでしょうか。どのように表示されますか？ぜひコメント欄でお知らせください。
ご参加をお待ちしております
Paul Bakaus、DevTools チーム