Google Chromeの開発者ツールの使い方

GoogleChromeには、デベロッパーツールや、検証モードなどと呼ばれる、開発者ツールというものがあります。普段webサイトを閲覧する分には、あまり使用する機会はないと思いますが、web関連の制作などをする際にはとても便利なツールです。というのも、特別なアプリケーションなどを使用することなく、サイトを、任意のサイズで表示させたり、パソコンで閲覧しているのに、携帯など別の危機からアクセスしたことにして閲覧することも可能です。

今や、web制作はスマホ対応していることが必須になってきているので、いろんな機器を用意してテストすることなく、ある程度の動作確認が行えるのは非常に嬉しいです。今回は、そんなGoogleChromeの開発者ツールの使い方をご紹介します。

Google Chromeの開発者ツールの使い方

基本的な使い方は、使いたいページ上のどこでもいいので、右クリックをします。すると、画像のようなメニューが出るので、検証をクリックしてください。

999

すると、このような画面が出ます。ここで開発者ツールのいろいろな機能を利用することができます。

スクリーンショット 2016-07-27 11.53.55

右側のこのようなアイコンがクリックされいる状態で、左側のサイトが表示される場所にカーソルを持ってくると、カーソルが載っている場所の要素を検証することができます。

1000

このような感じです。また、右側のコードの部分も、カーソルを合わせた箇所のコードがハイライトされます。

スクリーンショット 2016-07-27 11.55.48

あとは、このアイコンを押すと表示のデバイスを切り替えることができます。大きさやデバイスの種類もいろいろ指定することができます。

1001

他にも様々な用途で使えるので、ぜひ利用してみてください。


イベント

2017/12/05(火)
Design Thinking Square