【プログラミング】ディベロッパーツールの感覚的使い方!便利!

ディベロッパーツール 初心者

こんにちは、なっちる先生(@nacchi_jagariko)です。

大学中退後、プログラミング完全未経験から就職し、絶賛リモートワーク中のものです。

 

いきなりですが、Web系の開発では必須の「ディベロッパーツール」使ってますか?

こういう画面ですね↓

普段、何気なく見ているHPは、すべてコードでできているので、ディベロッパーツールを開くだけで、内部構造がみれます。

かっこいいデザインを真似することもできるよ!

今回は、そんな「ディベロッパーツール」の使い方を紹介します〜。

以下のような人向けです。

ディベロッパーツールって何?

どうやって使うの??

では、参りましょう〜。

 

スポンサーリンク

 ディベロッパーツールでできること

具体的にディベロッパーツールでできることを挙げると、、、

  • デザインのデモができる
  • 他のサイトのデザインを参考にできる
  • エラーを確認できる
  • レスポンシブサイトの検証ができる
  • jsのコンソールが確認ができる

です。

もっと深く学べばいろいろとできるのですが、実際使う用途としては先ほど挙げたもので十分です。(そのくらいしか使わない)

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

それでは、ディベロッパーツールの使い方について、わかりやすく動画を交えて説明していきます〜。

音声入ってないから安心してね

ディベロッパーツールの出し方

HPの画面上で、右クリック(タッチバッドを2本指でタッチ)したらメニューが出てきます。メニューから「検証」を選択するとディベロッパーツールがでてきます。

ディベロッパーツールの位置は「右の縦3点」から変えることができます。

こんな感じですね↓

※調べたい要素の上で右クリックするとその要素の情報がすぐわかります。

デザインの検証方法

一番左のクリックマークをクリックして、調べたい要素をクリックすることで、その要素の情報が出てきます。

右側の「Computed」でその要素に適用されているcss一覧を見ることができます。

「Styles」のところで実際にcssのコードを変えて、デザインの試行錯誤ができます。

こんな感じです↓

いろいろ遊んでみてください〜

エラー確認方法

Elementsの横の「Console」からエラーやアラートが確認できます。

上の画像の場合、

エラーに

GET file:///Users/user/Downloads/project/top.css net::ERR_FILE_NOT_FOUND

と出ていますが、こちらはtop.cssというファイルが見つかりませんという意味で、cssの取り込みのコードが正しくないために出てきます。

レスポンシブサイトの検証方法

クリックマークの隣の画面マークのところをクリックすることで、レスポンシブの検証ができます。

他にも、スマートフォンサイズ(iPhoneやGalaxyなど)の画面で見たときの検証もできます。

こんな感じですね↓

倍率も変えられるよ!

jsのコンソール確認方法

javascriptを使う開発で、console.log();を使わないことはないですよね。

そんなときディベロッパーツールはなくてはならないツールになります。

例えば、こちらのコードを書いていたとき、

ディベロッパーツールでは以下のように表示されます。

「Console」にきちんと要素が吐き出されていますね。

 おまけ:キャッシュクリア方法

現役エンジニアでもキャッシュクリアの方法を知らない人を見かけたりしますので、多少は有益な情報になると思います。

キャッシュクリアとは

画像やcssを変えたのに、画面が変わらないってことを経験したことありませんか?

あるある!

そういう現象が起こってしまうのは、古い画像やcssの情報(キャッシュ)が残ってしまっていているからなのです。

そんな問題を解決するために、キャッシュをクリアして、新しい情報に更新する行為がキャッシュクリアというものです。

キャッシュクリアの方法は簡単です。

ディベロッパーツールを開いたまま、リロードマークを長押しすると、「キャッシュの消去とハード再読み込み」が出てくるのでそちらをクリックするだけです。

これで反映されていないようだったら、自分のコードが悪いよ!

 まとめ

ディベロッパーツールを使うと圧倒的に作業効率が上がるので、うまく使いこなしてスパッとHP制作等してしまいましょう〜!

以上でなっちる先生の授業を終わります〜。

 

ディベロッパーツールで素敵なプログラミングライフを!

 

スポンサーリンク
初心者
スポンサーリンク
なっちる先生をフォローする
なっちる先生
タイトルとURLをコピーしました