こんにちは、エンジニアにょけん（@nyoken_box）です。
こんな疑問に答えます。
- Chromeデベロッパーツールの概要
- 「Elements」パネルの使い方
Chromeのデベロッパーツールは「デバッグ」に使う！
Google Chromeのデベロッパーツールは、「デバッグ」に使います。
「デバッグ」とは、開発しているプログラムがうまく動かない場合に、バグ（プログラムの欠陥）の原因を特定して取り除くこと。
で、エンジニアにとって一番苦行なのが、実はこのデバッグなんですよ。
「うまくいくと思って動かしたら謎のエラーが出て意気消沈…」なんて経験が、あなたにもありませんか？
デベロッパーツールによる効率的なデバッグ方法を知ることで、こうした苦痛な時間を軽減できます。
ぜひ、マスターしていきましょう。
デベロッパーツールはCSSを手軽に操作できる上、スマホからの見え方も確認できるため、画面デザインの作業効率化ツールとしても活用できます。
Chromeデベロッパーツールの起動方法と機能概要
起動は以下のコマンドでできます。
- Windows→【F12】
- Mac→【Command】＋【Option】＋【I】
※右クリックメニューの「検証」からも起動できます。
例として、Yahooニュースのトップページでデベロッパーツールを開いてみました。
下の方に、謎の画面がドーンと出てきましたかね？
以下①②③の番号に沿って、ボタンの概要を説明します。
①解析ボタン…マウスでカーソルを合わせた項目を解析します
例：ボタンを押した上で、画面中央の野球選手の画像にカーソルを合わせると…
↑こんな感じで、HTML内でどんな要素として存在しているかを表してくれます。
②レスポンシブボタン…スマホ・タブレットでの表示を確認できます
こんな感じですね。
③各種パネル…プログラムの詳細をチェックできます
※本記事では、超重要な「Elements」パネルの使い方をご紹介しますね
デベロッパーツール「Elements」パネルの使い方
デベロッパーツールで最も使うのが、「Elements」パネル。
これさえ押さえときゃ基本OK
「Elements」パネルでは、HTMLタグの要素や、CSSのスタイルをチェックできます。
画面内のHTMLとCSSの関係をカンタンにチェックできるため、WEBエンジニアにとっては神のような機能なんですね。
例として、画面上部の「Yahoo! JAPAN」というリンクを検証してみましょう。
検証手順①：解析ボタンをクリック
検証手順②：Yahoo! JAPAN!にカーソルを合わせてクリック
検証手順③：「Yahoo! JAPAN!」に対応するHTMLとCSSが表示されるのでチェックする
超カンタンでしょ？
しかし、これだけではない。
なんと、このままHTMLタグやCSSの内容を変更して確認できるんです。
試しに、「Yahoo! JAPAN」という文字を、「やほー! JAPAN」（ナイツリスペクト）に変更して、色も緑にしてみましょう。
検証手順④：HTMLとCSSを変更
リンクに対するCSSを変更したので、他のリンクもちゃんと緑色になっていますね。
このように、見た目を確認しながら修正作業などができるので、非常に便利です。
というのも、WEBプログラムって修正が非常にメンドくさいんですよね。
- サーバーからプログラムを停止
- 修正
- 再度プログラムをサーバにアップロード
- ブラウザで対象ページを読み込む
- 確認する
普通はこれらの手順が必要なんですが、これを「Elements」パネル内で完結できるんですよ。
スッゲェ助かります。
簡易的な確認なので、開発中のオリジナルファイルには変更が反映されません。
Chromeデベロッパーツールでデバッグしよう！
デベロッパーツールでは、画面の見え方を確認しながらデバッグができることがわかっていただけましたでしょうか？
ぜひ、利用して効率的に開発してみましょう。
- デベロッパーツールはデバッグに使う！
- 起動はWindows→【F12】、Mac→【Command】＋【Option】＋【I】
- 「Elements」パネルでHTML・CSSの検証可能
Twitterフォローしてね！！！
有益な無益をつぶやくよ↓↓↓
にょけん
コメント