初心者向け!Chromeデベロッパーツールの使い方

パソコン おすすめアイテム・ツール

最近、牛山くんは順調にプログラミングの勉強をしているようです。

牛山くん
牛山くん

『デベロッパーツール』というものがあるらしいですね

猫田さん
猫田さん

聞いたことないなー

CANIT先生
CANIT先生

おやおや? 牛山くんはデベロッパーツールを知っているのに、猫田さんは知らない……これはまずいんじゃないですか?

猫田さん
猫田さん

明らかにまずいねー。じゃあ、今日はデベロッパーツールを学びましょう

牛山くん
牛山くん

いいですね! ちょうど僕も復習したかったんですよ

CANIT先生
CANIT先生

わかりました。では、今回の講義はデベロッパーツールを学んでいきましょうか

デベロッパーツールは普段Webサイトを見るときは使いません。でもWEB開発者の多くが利用をしています。CSSやJavaScriptが上手く反映されないときに使ったり、他のサイトのソースコードを覗いたり、使い方はさまざまです。そんな便利なデベロッパーツールをプログラミング初心者向けにわかりやすく紹介します。

デベロッパーツールはGoogleChrome

パソコン
CANIT先生
CANIT先生

デベロッパーツールはGoogleにあります。標準装備されているので、誰でも無料で使えます

猫田さん
猫田さん

なんと! 無料ツールでしたか

デベロッパーツールはデバッグツールでWebサイトのHTML構成や表示スピード、通信状況などを確認できます。特別なツールやプログラムを使わずブラウザのみで手軽に利用できるので、多くのエンジニアがWebサービスの開発やテスト、デザインのチェックを行うときに頻繁に使っています。

牛山くん
牛山くん

デベロッパーツールを使うメリットを教えてください

CANIT先生
CANIT先生

簡単にいうと、作業効率が上がります。また、上手に利用すれば、より理想に近いサービスを作ることもできますよ

Web制作する人には必須のツールで、「開発者ツール」「要素の検証」「検証ツール」とも呼ばれます。なお、検証ツールは「Google Chrome」だけでなく「Firefox」「Microsoft Edge」「Safari」などの他のブラウザにも搭載されています。

デベロッパーツールを使ってできること4選

パソコン
CANIT先生
CANIT先生

続いて、デベロッパーツールを使えばできることを具体的に紹介します

デベロッパーツールでできること①:Webページの編集テスト

CANIT先生
CANIT先生

一度作ったサイトをリニューアルしたいときってありますよね。そんなときに作業工程を圧倒的に短縮できるんですよ

本来、サイト変更のためにはテキストエディタをはじめとしたさまざまなツールを開く必要があります。とくに変更後のデザインが決まっていないときは、ブラウザとテキストエディタを頻繁に行き来しなければいけません。しかし、デベロッパーツールを使えばブラウザ上だけで編集テストできます。その後はテキストエディタで変更箇所を書き換えれば、サイトのリニューアルも終わりです。

デベロッパーツールでできること②:他のサイトのコードチェック

CANIT先生
CANIT先生

他のサイトがどのように作られているのか……デベロッパーツールを使えばわかってしまいます。他のサイトのコードが丸わかりになってしまうんですよ

猫田さん
猫田さん

勝手に人のサイトのコードを見るのかー やらしいなー

CANIT先生
CANIT先生

そんなことないですよ(笑) 気に入ったサイトがあったらコードを覗いてお手本にするのはいい勉強になります

とくにプログラミング学習を始めたばかりの人は、経験者のコードから学ぶことが多いです。好きなサイトを積極的にデベロッパーツールをあててみることをお勧めします。
デベロッパー
CANIT先生
CANIT先生

ちなみにこちらは、プログラミング学習サイトでおなじみのドットインストールのトップ画面です

牛山くん
牛山くん

ズラッと書かれているコードを研究すれば、たしかに勉強になりそうですね

デベロッパーツールでできること③:デバイスごとのサイズ表示チェック

CANIT先生
CANIT先生

スマホとパソコンでは、サイトのデザインが変わってしまうことも多いです。そんなときにデベロッパーツールを使うと、各デバイスごとのサイトデザインが確認できます

デベロッパー
CANIT先生
CANIT先生

ドットインストールのサイトを例にしますが上がスマートフォンで見たときの画面、下がパソコンで見たときの画面です

デベロッパー
牛山くん
牛山くん

サイトの見た目が大きく変わっていますね。でも、デザインそのものは崩れていません

これは非常に重宝する機能です。レスポンシブ対応のサイトを制作するときに画面サイズ/モバイルタイプ(タブレットタイプ)に応じたデザインの確認は欠かせません。

デベロッパーツールでできること④:エラー発生原因の確認

CANIT先生
CANIT先生

デベロッパーツールはエラーの確認にも使えます

「console」機能を使えば、どこでどのようなエラーが発生しているのかを表示してくれるので、JavaScriptを試したりする際にもよく使います。下部の「>」箇所がエディタのようになっているので、自由にJavaScriptコードを試してみると良いでしょう。

デベロッパーツールの起動方法

フリーランス
CANIT先生
CANIT先生

続いてデベロッパーツールの起動方法です。とても簡単なのですぐに覚えられますよ

  1. サイト上でコードを調べたい部分を右クリック
  2. 表示されるメニューの中にある、“検証”をクリック
  3. 下部もしくは右側にデベロッパーツールの画面が開きます。

ショートカットキーの場合は、【F12】キー、【Win:Ctrl+Shift+I Mac:Command + Option + I)】を押すことで起動します。

デベロッパー
CANIT先生
CANIT先生

いちばん下の「検証」がデベロッパーツールへの入り口です

表示位置の変更

デベロッパーツールの表示位置が気に入らないときは変更しましょう。以下の方法で変更できます。

  1. デベロッパーツールの右上にあるハンバーガーメニューボタンを押す
  2. 表示位置の変更ボタンで好きな表示位置を選ぶ
デベロッパー

Dock side」と書かれている部分が表示箇所を変える設定です。右側に表示されるのがデフォルトですが、下に表示してみましょう。

デベロッパー

これまで画面右側にあったコードが下に移動したのがわかりますね。

デベロッパーツールを使う際の注意点

パソコン
猫田さん
猫田さん

すごいツールなのはわかったけど、こういうのにはたいていデメリットもあるんだよなー

CANIT先生
CANIT先生

デメリットではありませんが注意点はあるので、教えておきますね

①:デベロッパーツールは全て英語表記

デベロッパー

上の画像のようにメニューなども含めてデベロッパーツールの項目は全て英語で書かれています。慣れないうちは苦労するかもしれません。でも、プログラミングは基本的に英語表記ですから、ぜひ慣れてください。慣れてくればデベロッパーツールの凄さがどんどんわかりますよ。

②:編集中の再読み込みには注意

ツール上で編集テストをしているときは再読込を押さないようにしましょう。万が一更新してしまうと今まで編集した部分は消えてしまいます。

また、ツールで編集しても、実際のWebサイトは変更されません。テキストエディタなどで元のデータを書き換えてはじめてWebサイトに反映されます。

初心者向けデベロッパーツールの使い方:まとめ

google
CANIT先生
CANIT先生

というわけで、今回はデベロッパーツールを紹介しました

牛山くん
牛山くん

いい復習になりました。ありがとうございます

猫田さん
猫田さん

わたしは初めて知ったことばかりだけど、こんなすごいのが無料で使えるんだね

CANIT先生
CANIT先生

今日は初心者向けにかいつまんだ解説しかしていませんが、知れば知るほど便利ですごいツールですよ。どんどん触って慣れていきましょう。とくにデベロッパーツールを使った他のサイトの研究は、プログラミング初心者におすすめです

タイトルとURLをコピーしました