2.デベロッパーツールのメリットとデメリット

目次

メリット

• HTML、CSSの打ちミスやどこでエラーが起きているかを早く見つけられるようになる
• CSSをリアルタイムで確認しながら入力するので作業時間が劇的に短くなる
• ブロック要素、インライン要素といった要素がよくわからなかったものが理解できるようになる
• どのCSSスタイルが優先されてかかっているかわかる
• 動的に生成されている要素に対してCSSを確認したりCSSをかけることができるようになる
• jQueryのデバッグができるようになる＆早く作業できるようになる
• ファイルの読込にどのくらい時間がかかっているのか、またエラーとなっているファイルを簡単に見つけられる
• html, cssに対して恐怖心が薄らいでいく
• 多少の崩れでは動じなくなる！

デメリット

• 最初に画面の見方など少しだけ新しいことを覚えないといけない
• html, cssの基本がわかっていないとちょっと厳しいので多少は知識が必要
• デベロッパーツールを全画面表示でみていると周りから驚かれる

明らかにデメリットよりメリットの方が大きいです。

もしデベロッパーツールがなかったら

制作の時間が規模に寄って2,3倍かわってくると思います。それ以上かもしれません。
デバッグとかデベロッパーツール無しだと正直きついですね。目視でバグ発見しなければいけないとか結構キツイです。。。

なぜデベロッパーツールが必要なのか

人間なのでどうしてもミスはあります。スペルミスやケアレスミスなど。
そこをデベロッパーツール等で確認すると一発で発見できるメリットがあります。
いまデベロッパーツールがなくなったらかなり痛いです。

「ラクをしたくない人は不向き」とまでは言わないですが、それくらい効率良くラクに作業できるようになりました。
例えば1000行あるCSSファイルでどこかにエラーが起きているとして、それを目で見て確認していく方法と、デベロッパーツールでエラー箇所を指し示してくれるのでは段違いです。

それくらいオススメです！

デベロッパーツールの良さが伝わったところで、実際にデベロッパーツールを触ってみましょう。

この記事を書いた人

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。