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のデベロッパーツールの左上に注目してみてください。矢印の付いたマークが表示されているかと思います。