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

プログラミング独学ロードマップ

公開日 2020/5/7 最終更新日 2020/11/6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

邪魔しているのは何だ

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

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

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

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

どんなコードも丸裸

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

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

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

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

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

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

タグ