漫画の地球儀

Chromeデベロッパーツールの使い方【機能、タブ、初心者、HTML、コード、開発者向け】

スポンサーリンク

Googleデベロッパツール

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

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

開発者向けの機能

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

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

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

新機能を検証可能な

f:id:rick1208:20200328205851p:plain

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

Webページのコードをテスト可能な


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

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

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

HTMLの編集に役立つ

f:id:rick1208:20200328205836p:plain
前述しましたが、Chromeデベロッパーツールでコードを検証するというのは、HTMLの編集に役立ちます。表示崩れなどは、HTML要素の中のCSSに問題があるパターンが大半な為、何が問題なのかをHTMLの要素から探って編集していくのです。

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

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

Googleデベロッパツールの使用方法「起動」

f:id:rick1208:20200328205813p:plain
それではさっそく、Googleデベロッパツールの使用方法・起動のやり方についてチェックしていきたいと思います。Chromeデベロッパーツールを起動したい場合、まず最初はChromeでチェックしたいWebページを開いてみてください。

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

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

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

ショートカットを利用して起動する方法

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

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

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

Googleデベロッパツールの使用方法「HTML、CSS

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

見たい部分のコードを表示

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

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

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

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

さらに「Elements」タブのページ内のソースも色付くので、とても見やすくなると思います。

画面の見方

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

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

HTMLを展開する

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

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

CSSの見方

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

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

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

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

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

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

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

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

Computedについて

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

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

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

Googleデベロッパツールの使用方法「タブ」

f:id:rick1208:20200328204236p:plain
続いては、Googleデベロッパツールのタブの使用方法について触れていきたいと思います。
Elements

Elements

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

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

Console

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

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

Network

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

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

Sources

f:id:rick1208:20200324205819p:plain
Sourcesタブは、Webページを表示する為に読み込んでいるファイルをチェックすることが可能です。

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

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

Application

f:id:rick1208:20200324205857p:plain
Applicationタブでは、ApplicationやStorageの管理が可能となっています。ここではCookieやSessionなどのデータもチェックすることが可能です。

まとめ

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

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

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

画面左上のアイコンで要素選択が可能なことを覚えておくとかなり便利になるかと思いますので、ぜひ使用してみてください。