どうもイトサル（@itosaru）です。
・スクレイピングするにあたってHTMLの構造を確認したい
・CSSのデザイン調整を画面を見ながらやりたい
この記事ではこのようなお悩みを解決する“開発者ツール”について説明します。
開発者ツールとは
Google ChromeをはじめとするWEBブラウザに搭載されているツールのひとつです。
開発者ツールを使ってできることはたくさんあるのですが、メジャーなものを挙げると
- WEBページのDOM（HTMLのタグ構造やClassやid情報）が分かる
- 適用されているCSSが分かる
- Javascriptを書いて実行・デバッグできる
の3つですね。
他にも通信の内容が分かったり、UA（端末の識別情報）が分かったりなどいろいろな機能があります。
開発者ツールができてからWEB開発がほんとに楽になりました！
この開発者ツールは自分のWEBページを作るだけでなく、seleniumやBeautiful Soup4を使ってWEBページをスクレイピングする際に必須です。
開発者ツールの開き方
開発者ツールの開き方は2つあります。
今回はGoogle Chromeを例に説明します。
- 右クリックメニューの「検証」をクリックする
- F12キーを押下する
画面下にこのような画面が表示されたら開発者ツールが起動しています。
2つの開き方がありますが、右クリックの「検証」を使う機会のほうが多いです。
その理由は使い方の項目で説明します。
開発者ツールの閉じ方
開発者ツールを閉じる方法も2つです。
- 開発者ツール画面の[×]ボタンをクリックする
- 開発者ツールが表示している状態でF12キーを押下する
前者の[×]ボタンは画面右下に小さく表示されています。
このあとから実際に開発者ツールの使い方について説明していきます。
開発者ツールの使い方
開発者ツールを起動したら実際に使ってみましょう。
今回は上で紹介した
- WEBページのDOM（HTMLのタグ構造やClassやid情報）が分かる
- 適用されているCSSが分かる
- Javascriptを書いて実行・デバッグできる
この3つについて説明していきます。
DOM構造を確認する
例えばGoogleトップページのテキストボックスの構造を見てみたいとしましょう。
その場合はテキストボックスの上で右クリックメニューから「検証」を選択します。
すると該当の要素が選択された状態で開発者ツールが起動します。
開発者ツール上のDOMにマウスカーソルをあてることで、画面上のどの要素なのか色を付けて表示してくれます。
適用されているCSSを確認する
今回はテキストボックスの下にある[Google 検索]のCSSを確認してみましょう。
CSSを確認する場合も同様に確認したい要素の上で右クリックメニューの「検証」を選択します。
同じように該当のDOMが選択された状態で開発者ツールが起動します。そうしたら画面の右のほうを見てみましょう。
[Google 検索]のinputタグに付与された
class=”gNO89b”
のclassをセレクタにしたCSSが右のペインに表示されていることが確認できます。
そもそもclassって何？という方はこちらの記事をご覧ください。
しかもこの右のペインのCSSプロパティは追記や変更ができちゃいます！
試しに背景色をブルーに変更したのがこちらです。
CSSプロパティを変更しても大元のWEBページには一切変更は反映されません。
安心していじりまくってください（笑）
Javascriptを記述・実行する
最後に簡単なJavascriptの実行をしてみましょう。「Hello Developer Tool」というアラートを表示させてみます。
JSの記述についてはF12キー押下でも問題ありません。
開発者ツールを開いたら[Console]のタブをクリックします。
[Console]タブを開いたら実行したいJSを記述します。
alert(“Hello Developer Tool”);
記述したらEnterキーを押下します。
ちゃんとアラートが表示されましたね！
JSのほうも同じく追記や変更を行っても大元には一切影響がないのでご安心ください。
まとめ
今回はGoogle Chromeの開発者ツールの開き方、そして簡単な使い方について説明しました。
改めて開発者ツールでできることについておさらいしましょう。
- WEBページのDOM（HTMLのタグ構造やClassやid情報）が分かる
- 適用されているCSSが分かる
- Javascriptを書いて実行・デバッグできる
ほかにも開発者ツールでできることはたくさんあるので、また別の記事で説明していきたいと思います。
コメント