【tips】検証画面の活用

検証画面を使おう！

検証画面とは

検証画面とは，ブラウザに表示されているアプリケーションに対して構造の確認や JavaScript の様子の確認などができるツールである．

検証ツールを使いこなすと，飛躍的に開発がしやすくなるッ．．！

主な機能

• HTML の構造の把握．
• 適用されている CSS の確認，CSS を記述しての反映（保存はされない）．
• JavaScript の実行結果の確認．
• ブラウザに保存されているデータの確認．
• ブラウザ - サーバ間通信の確認（接続サーバ，転送データなど）

使い方

まずは HTML 要素や適用されている CSS を確認してみよう！

注意点とコツ

検証画面上で CSS を追加・編集しても保存はされないので注意！

下記の流れがオススメ！

• 適当に CSS を記述する．
• 検証画面で CSS を確認し，良さそうな値に調整する．
• いい感じになったらエディタに戻ってコード追記 → 保存！