Chromeデベロッパーツールの機能と使い方【初心者向け】

Chromeというブラウザには、デベロッパーツールというGoogleが提供しているツールが存在します。ですが、Web知識の無い方など、このデベロッパーツールを使いなれていない方もいらっしゃるのではないでしょうか。

今回はそんなChromeのデベロッパーツールの機能と使い方について初心者向けに解説していきたいと思います。それではさっそく、Googleのデベロッパツールとはなんなのか、解説していきたいと思います。

Chromeというブラウザに用意されたこのデベロッパーツールは、Webページ開発者向けの機能です。Webページやブログなどは、HTMLやCSS、JAVASCRIPTなどでコーディングされています。

このコーディング内容をChromeのデベロッパーツールを用いて検証し、問題があれば元データを編集するというのがこのデベロッパーツールの主な機能の使い方となります。開いたWebページのHTMLコードを編集できるのも特徴の一つです。

Chromeのデベロッパーツールの場合、自分のWebページだけでなく他のWebページのコードもチェック可能です。どのようなコードで作られているのか、別の開発者がコードの書き方をチェックするということにも使われています。

Webページでは、JAVASCRIPTなどを使ってWebページに動きをつけることができます。そういった新機能をChromeブラウザのデベロッパーツールであれば検証できるのです。

Chromeブラウザのデベロッパーツールでは、Webページのコードをテストすることも可能です。筆者もHTMLやCSS、JAVASCRIPTのコードが問題なく機能しているか検証する為、よくテストしています。

Chromeブラウザのデベロッパーツールであれば、HTMLやCSSの表示崩れなどの原因をHTMLの要素からCSSの内容をチェック・テストできる為、非常に便利です。コードの打ち間違いなどは起きてしまいがちなミスなので、開発者としてもテストは欠かせません。

このように、ChromeのデベロッパーツールによるWebページのテストは非常に重要な作業となってきます。

前述しましたが、Chromeのデベロッパーツールでコードを検証するというのは、HTMLの編集に役立ちます。表示崩れなどは、HTML要素の中のCSSに問題があるケースがほとんどな為、何が問題なのかをHTMLの要素から探って編集していくのです。

このChromeのデベロッパーツールでは、表示されたWebページをその場で編集することができます。Webページの正確な形を用意する為にも、編集や検証作業は開発者にとって非常に大切です。

このChromeのデベロッパーツールは、開発者を目指すのであればぜひ知っておいて欲しい機能ですね。

それではさっそく、Googleのデベロッパツールの使い方・起動の仕方について確認していきたいと思います。Chromeのデベロッパーツールを起動したい場合、まずはChromeでチェックしたいWebページを開いてみてください。

その後、Webページの画面上で右クリックしてみてください。調べたい部分が決まっているようでしたら、その箇所を右クリックするとたどり着くのが早いでしょう。

ChromeからWebページを開いて右クリックするとメニューが表示されます。一番下に「検証」という項目がありますので、この「項目」を選択してみてください。

「項目」を選択すると、ChromeのWebページの他に新しくデベロッパーツールのページが開かれます。

これがChromeのWebページからデベロッパーツールを起動する方法となります。このデベロッパーツールは「Elements」というタブがデフォルトになっています。

ここから「Console」や「Sources」、「Network」、「Performance」、「Memory」、「Application」、「Security」、「Audits」など様々なタブを活用してWebページの検証を行うことになります。

Chromeのデベロッパーツールはショートカットを使って起動することも可能です。Macの場合は「⌘」+「Opt」+「I」で起動できます。Windowsの場合は「F12」で起動可能です。

それでは続いて、GoogleのブラウザChromeのデベロッパツールからHTMLやCSSを検証・編集する方法について解説していきたいと思います。    

まずは前述した方法でChromeのデベロッパーツールを開いてみてください。その後、見たい部分のコードを表示します。Chromeでデベロッパーツールを開いた場合、通常は「Elements」のタブが開かれます。

このデベロッパーツールの機能として、そのままコードの上にマウスを持っていけば、そのコードがどの部分か画面に色付けされる仕組みとなっています。ですが、さらに楽にコードを判断する方法もあります。

その方法とは、Chromeのデベロッパーツールの左上に注目してみてください。矢印の付いたマークが表示されているかと思います。

この項目をクリックすれば、「要素の選択モード」にデベロッパーツールが切り替えられます。すると、マウスをWebページの上に乗せるだけで、その要素がWebページ上で色付きます。

さらに「Elements」タブのページ内のソースも色付くので、非常に見やすくなるでしょう。

Chromeのデベロッパーツールの画面の見方・使い方としては、「Elements」タブの場合左側にHTMLコードが表示される仕組みになっています。表示されたHTMLのコードを選択すればそのコードの部分が青く表示されます。

さらに、キーボードの「↑」や「↓」で一行ずつHTMLコードの選択を移動させることも可能です。

Chromeのデベロッパーツールでは、HTMLを展開することも可能です。Chromeのデベロッパーツールでは各要素のボックスは基本閉じられていますが、コードの頭に表示されている「▼」マークをクリックすることでHTMLが展開されます。

キーボードの「↑」や「↓」ではHTMLの展開はできない為、HTMLを展開したい場合はマウスから「▼」をクリックする必要があります。

CSSをデベロッパーツールで見たい場合の使い方についてですが、「Elements」タブの右側にCSSが表示されています。左側に表示されたHTMLコードをクリックすると、該当の要素に指定されているCSSが全て表示される仕組みとなっています。

要素やクラスなど、様々な箇所でCSSは用いられていますので、開発者はこのデベロッパーツールを用いて検証・編集・テストを行っていくのです。特にCSSはWebページの画面の位置ずれなどが起きないよう徹底して検証していく必要があります。

CSSではColorという色指定が可能となっています。基本的にカラーコードを挿入することになると思いますが、Chromeのデベロッパーツールではカラーピッカーを表示させることも可能となっています。

カラーピッカーとは、画面上から色を指定できるパレットのようなツールです。マウスで自由に動かしながら色をチェックすることが可能ですので、使いやすさもばっちりですね。

このカラーピッカーから好きな色を指定するというやり方で、簡単に色の修正が可能な為、ChromeのデベロッパーツールではCSSのチェックもよく行われています。

また、ChromeのデベロッパーツールではCSSのプロパティも追加可能となっています。CSSのプロパティを新しく追加したい場合、要素のカッコ内の一番下の行もしくは一番したのプロパティの「;」の部分をクリックしてみてください。

新しいプロパティを入力するボックスが表示されますので、Colorやwidthなど、好きなプロパティを入力してみましょう。入力したデータは開いているWebページにそのまま反映される形になっています。

このように、ChromeのデベロッパーツールではCSSのテストを簡単に行うことができるので、様々な人達がこのデベロッパーツールを利用するようになってきました。

CSSを見る際は画面右側を見るようにと前述していますが、画面右側にも複数のタブが存在します。「Styles」や「Computed」、「Event Listeners」、「DOM Breakpoints」、「Properties」、「Accessibility」のことですね。

普段はStylesタブからCSSのチェックを行います。Computedでは、選択中のHTML要素で最終的に使用されているCSSの値の一覧を確認することが可能です。それぞれどの要素でCSSが適用されているかも一覧として表示されますので、非常に便利です。

さらに、Computed内のCSSスタイルの値をクリックすれば、指定したCSSの場所(Styles)へ移動してくれます。Webページ開発者であっても、どこに記載したかまでは把握しきれないこともありますので、この点も非常に便利ですね。

続いては、Googleのデベロッパツールのタブの使い方について触れていきたいと思います。

Elementsは前述したHTMLやCSSなどの検証・編集・テストなどを行う為の機能として用いられています。

Elementsタブでは、DOM(Document Object Model)の状態をリアルタイムにてチェックできる為、JAVASCRIPTなど動的な操作などの検証も可能です。

ConsoleタブはJAVASCRIPT実行時のエラーや関数によって出力されたログ、Webページ読み込みの際発生するネットワークエラーなどが表示される仕組みになっています。console.log()やconsole.error()などの関数が利用される場所ですね。

開発者としては、JAVASCRIPTが正常に機能しているかをテストする必要がある為、このConsoleタブはとても重要な部分ですね。

続いてNetworkタブですが、このタブでは表示するWebページからのHTTPリクエストの種類などが確認できます。各データに対するサイズもチェックできる為、どのデータが原因でWebページが重くなっているかなども確認可能です。

開発者としては、ここの使い方も理解しておくとよいかと思います。

Sourcesタブは、Webページを表示する為に読み込んでいるファイルをチェックすることができます。

それぞれのファイルをここでチェックでき、さらにJAVASCRIPTのソースコードに対してブレークポイントを指定することも可能なのでテストを検討している方が利用することになるでしょう。

変数の値などチェックしつつ実行できるので開発者としては中級者向けのシステムとなっています。

Applicationタブでは、ApplicationやStorageの管理が可能となっています。ここではCookieやSessionなどのデータも確認することができます。

さて、今回はChromeデベロッパーツールの機能と使い方を初心者向けに解説してみました。いかがだったでしょうか。Chromeのデベロッパーツールは、Webページ開発者向けの検証ツールです。

一度開いたHTMLページをその場で編集できますし、JAVASCRIPTが正常に動作しているかのテストも可能です。Webページの開発者にとって、編集やテストは必須作業ですから、Chromeのデベロッパーツールは、非常に大切なツールとなっています。

Chromeのデベロッパーツールには様々なタブページが存在します。Webページ開発者は用途毎に使用することになるでしょう。一番利用されるのは「Elements」タブかと思います。

画面左上のアイコンで要素選択ができることを覚えておくとかなり便利になるかと思いますので、ぜひ利用してみてくださいね。それでは、本日もご覧いただきありがとうございました。