Chromeのデベロッパーツール(検証機能)の使い方！開発者モードで編集！

Google Chromeのデベロッパーツール（検証機能）は、Google Chromeに組み込んだWebサイトを作成する際に使用する作成、記述したプログラムに誤りがないか検証できるデバッグツールのセットを指します。プログラム作成にバグ（誤り）はつきものです。

Google Chromeのデベロッパーツールを利用してバグを見つけて直すことでクオリティの高いWebサイトを作成することができます。デベロッパーツールは、開発者モードで利用可能です。

デベロッパーツールでは、正式にコーディングする前に記述コードに問題がないかを確認したり、問題が起きたときなど、開発者モードで検証ツールを使います。そのため、「いつ使う？」というよりは「常に使う」ツールです。

開発者は問題が発生した、しないに関わらず、コードの挙動を確認します。正式にコーディングをする前にコードの記述方法が複数あれば、挙動を確認してその中で一番パフォーマンスの良いコードを選択するのは開発者として当然と言えます。

デベロッパーツールは、開発者がコーディング完成までの間の手間を省いて簡単にコードの挙動を確認できるのが大きな特徴です。経験豊富な開発者でもデベロッパーツールは必要なツールです。特にコードを使い始めたばかりの方は、常に確認した方が良いでしょう。

Google Chromeのデベロッパーツールでは、さまざまな機能が用意されていてできることは沢山あります。

Google Chromeのデベロッパーツールでは、実ファイルの記述を変えずに開発者がデベロッパーツール上で記述を変えて表示を確認できます。確認した結果、変更したものが良ければ実ファイルの記述を変更します。

以下の画像を例に表示のテスト方法を説明します。

表示を変更したい箇所を選択して右クリックすると表示されるコンテキストメニューから、"検証"をクリックます。

変更したい箇所をダブルクリックすると編集できます。

ここでは、「Chromeをダウングレードする方法！自動更新を止めるには？」から「Chromeをダウングレードする方法！自動更新を止めるには？」に変更しています。

Google Chromeブラウザの内容が変更した内容に変更され、その内容を確認できます。

今回は、表示のテストを行っているだけなので、タイトルを変更したWebページを更新すると元のタイトルに戻ります。

Webサイト確認時にレイアウトが崩れた等、問題となった箇所にデベロッパーツールの検証機能を使うと、該当箇所に記述されているコードのHTMLやCSSを一度に確認できます。またレイアウト表示が崩れているときは、CSSのコードのテストや新たにHTMLを追加するときのテストといった使い方もできます。

Webサイトを構築しているとき、気に入ったサイトのコードを参考に見たいときは、デベロッパーツールの検証機能で他サイトのコードを確認することができます。Webサイト構築の学習を始めたばかりの人は経験者が作成したコードを見て学ぶといった使い方もできます。

デベロッパーツールには、PC以外のモバイルやタブレット画面での表示確認ができる「デバイスモード」があります。レスポンシブ対応のWebサイト構築時、想定している端末の画面サイズの表示デザインを確認をする使い方ができます。

デベロッパーツールのConsole機能は、どこで、どのようなエラーが発生しているのかを確認できます。Console機能は、Javascript/jQueryのデバッグ時にもよく使います。