Help us understand the problem. What is going on with this article?

簡単なブラウザの開発者ツールの説明(Chrome)

More than 3 years have passed since last update.

この記事の目的

css,JSでデバッグしたりってどうやってるのかっていうのを個人的な備忘録的なものとして書いて、
「もっとこうした方が便利だぜ!」とかツッコミが欲しくて記事にしてみる

開発者ツール

htmlの要素についての情報や、jsのコンソールとか使えるすごいやつ
これが無いとフロントエンド開発なんて辛くてやってられないぜって感じな位のもの
ブラウザのここらへんのメニューにある
スクリーンショット_2017-06-26_2_41_12.png

要素の検証

検証したい要素を開発者ツールのElementsタブに表示されているコードをクリックするか、要素選択モード(画像に示されてる左上のやつクリックするとなる)にして、実際の画面の要素クリックして選択する

スクリーンショット_2017-06-26_2_41_37.png

スタイルビュー

cssの検証する時に役立つ

  • 要素についてるcssの一覧
  • 擬似クラスをつける
  • 最終的にどういうcssが適用されているのか スクリーンショット_2017-06-26_2_42_43.png

というのを見ることができる

プロパティを無効にしたり、編集できる

スクリーンショット_2017-06-26_4_03_45.png
スクリーンショット_2017-06-26_4_20_50.png

表示が崩れたりしてしまったら、要素についてる関係ありそうなcssをつけたり外したりする事で原因を探って
特定したら、cssファイルを編集する
それぞれのcssには書かれてるファイルも表示されるので便利

色変えたりするってのを試してみたい時に、わざわざcssファイルを一度開いて書き換えて保存するって手間がなくなる、便利

JavaScriptイベントリスナー

要素についてるJSのイベントが一覧される
スクリーンショット_2017-06-26_3_41_18.png

右の方にある「site.js:3」をクリックすると実際のファイルの該当箇所に飛べる。便利
スクリーンショット_2017-06-26_3_41_27.png

ブレイクポイント

DOMの変更や、JSの処理が起こった時、特定のところで処理を一時的に止めることができる便利な機能
DOMでもJSでもブレイクポイントで止まってる時にコンソールやウィンドウで色々と状態見れる
スクリーンショット 2017-06-26 4.38.13.png

紹介する以外にも色々あるらしいけど私が使ってるのは以下の2つ

DOM

スクリーンショット 2017-06-26 4.26.42.png

  • Subtree Modified: 要素の子要素に変更があった時
  • Node Removed: 要素が削除された時
  • Attribute Modified: 要素のスタイルに変更があった時

っていう感じに止められるので、JSで変更があるはず無いので起こったりしたらここにブレイク仕込んで処理追ってみたりする

JS

スクリーンショット_2017-06-26_4_27_13.png

sourceタブで止めたい行をクリックするとそこで止まるようにできる。
言うまでもなく、特定の行で状態を調べたい時に使う

コンソール

JSで仕込んどいたconsole系のものとかが出力される
console.logやらconsole.errorやらまあ色々
エラーが出たときもここに出てくるのでデバッグする時にかなり重要。
そうでないときもエラーが出てないかとか確認しておく。

出力について

スクリーンショット_2017-06-26_3_41_272.png

エラー

スクリーンショット 2017-06-26 4.41.56.png

存在しない物を参照しようとしたりしてエラーが出て処理が中断したりするときにはこんな感じに警告マークや赤い背景とともにエラー内容を表示してくれる。
これが出てるって言うことはここから先の処理は全く行われてないので出てたら大体速攻直すべき。

ブレイクポイント中について

先述の通り、ブレイクポイントしかけて止まっている最中にコンソールでコマンドを打つと止まっている時点の状態で実行できる。

スクリーンショット 2017-06-26 4.51.42.png

例えばさっきのエラーが出てたところにブレイクポイントをしかけて、コンソールでエラーが出ているオブジェクトを表示してみると、「lengthが0なのに配列番号1を参照しようとしてた」ということがわかる

まとめ

開発者ツールが無かったらデバッグ無理
開発者ツールを使いこなして幸せにフロントエンド開発しよう…
そして、もっといい方法があったら私に教えてください、お願いします

あまり私は活用できていないから、今回は紹介してないけど、ネットワーク監視とかも開発者ツールでできる。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away