大正義ディベロッパーツールを使う場面はここ!


どうも、こんにちは。
友太郎(@yutarou_sakai)です。

僕たちの味方ディベロッパーツールの使う場面を紹介します。

便利便利と言われていますが、まだ触ったことがない方はいまいち便利さがピンとこないと思います。
必要性を感じられなかったら、あまり勉強する気に慣れませんよね、、、。

そのため今回は、初心者の方に向けて「ディベロッパーツールを使うとこんなに便利だよ!」ということをお伝えしたいと思います。

ディベロッパーツールの使い方

ディベロッパーツールの使い方は、とても有益なサイトがあるので、そちらでサクッと勉強してくださいm(__)m

>>新米Webデザイナーがこれだけは抑えておきたいデベロッパーツールの使い方

まぁディベロッパーツールの開き方と、見るべき箇所だけチェックできればOKです!

ディベロッパーツールを使う時

  • エラーを調べる
  • 今の状況を把握する
  • 良いコードを盗む

ディベロッパーツールを使うタイミングは上記3つです。

もちろんそれ以外の使い方をしてもOKですが、今回は頻度の高い3つだけご紹介させていただきます。

この3つだけでも、かなり便利であることが分かるかと思いますよ!

エラーを調べる

エラーはそこに書いている

ほとんどエラーは、エディタもしくはディベロッパーツールが表示してくれます。

エラーはそこに書いている

ディベロッパーツールを開き、赤い×ボタンをクリックするとエラーが出ている内容が表示されます。

英語ですがGoogle翻訳にコピペすればOKですし、エラー文をそのままググれば答えが出てきたりします。

エラーで進まない人ほどディベロッパーツールを見ないので、「あれ?」と思ったら開いて見ましょう。

今の状況を把握する

邪魔しているのは何だ

CSSでコーディングしていると、なぜか要素が真ん中にこなかったり、変な動きをすることがあります。

そんな時はディベロッパーツールを使って何が起きているか把握すれば、簡単に解決できることが多いです。

邪魔しているのは何だ

marginとpaddingが悪さしてることって多いのですが、見た目には何も分かりません。

ディベロッパーツールでしっかりと可視化することにより、直すべき所がすぐに分かってとても便利です。

良いコードを盗む

どんなコードも丸裸

サイトを見ている時に「ここの表現はどうやっているのだろう?」と思ったらディベロッパーツールを開いて確認してみましょう。

自分の知らないHTML/CSSの使い方をしていたら勉強の機会ですし、クラス名の付け方やタグの使い方を見ることができます。

独学で勉強しているなら他人のコードを見ることができないように感じますが、実は学習素材は近くにゴロゴロ転がっています。

実際に使いまくって慣れよう!

ディベロッパーツールの便利さが分かったら、とりあえず使いまくってみましょう。

頭で理解したつもりでも案外分かっていないですし、ツールなので使わないと意味がありません。

無料でこんなに便利なツールを使えることに感謝しつつ、使えるものは自分のためにどんどん使っていきましょう!