DevTools の使い方を可能な限りスクショ付きで解説してみる

以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス

[shingo-sasaki-0529]

チャンクのサイズ比率を簡易的に確認できる機能とか、結構知らない使い方があってためになった。

[s15i]

“ 詳細 ”

[akulog]

使わないWeb従事者多すぎるんよ

[hatest]

でぶツールという名前なのに、使って改善するとページがスリム化する

[aquarickn]

はてブ民からの信頼度よ

[efcl]

Chrome DevToolsの使い方

[versatile]

でも chrome は売却されるんでしょう？

[gnt]

ありがてー

[cpw]

いつか使う

[yositosi]

みる

[rinrin900]

DevTools初歩編

[hirose504]

ありがたや

[pekee-nuee-nuee]

あーこれは即役に立ちそうなやつ

[yarumato]

“DevTools>Lighthouse　この状態で計測　このとき、新しいプロファイルを作るなど可能な限りChrome拡張が入ってない状態にする。Chrome拡張による処理も計測に含まれるから。Google側の現在のスコアの重みがわかる”

[toaruR]

知らない画面が多い＼(^o^)／

[mizchi]

書いた