まずは開ければいい

Windows なら F12 または Ctrl+Shift+I、Mac なら Command+Option+I で開きます。もうひとつ、調べたい場所を右クリックして「検証」を選ぶ方法があり、非エンジニアにはこれが一番使いやすいはずです。見たい要素を指しながら開けるので、迷子になりません。

パネルは全部覚えなくていい

上部には Elements、Console、Network、Sources... と多くのタブが並びますが、この講座で使うのは実質 4 つだけです。Elements（画面の中身）、Console（エラー）、Network（通信）、Application（Cookie）。残りは今は無視して構いません。

画面が狭いと嫌になる

初めて開くと右半分を占領されて驚くかもしれません。右上の三点リーダーから表示位置を下側や別ウィンドウに変えられます。自分が見やすい配置にしておくことが、使い続けるコツです。

壊す心配はいらない

DevTools での操作はすべて自分のブラウザの中だけの話で、サーバーにも他の人の画面にも影響しません。ページを再読み込みすれば元に戻ります。安心して触ってください。

• 3つの開き方と使い分け
• 最初に覚える4つのパネル
• 表示位置を作業しやすく変える