開発者ツールの基本

Webフロントエンド開発に欠かせないツールであるブラウザの開発者ツールについて、触れておこうと思います。このマニュアルでは、特に触れない場合は以下の環境を使っているものとしています。

• OS = macOS High Sierra(OSのバージョン)以降のもの

• MacBook Pro(筆者はTouch Bar付き15インチの2016年モデルを使ってます。)

• ブラウザ = Chromeの最新

開発者ツールの基本

Chromeの場合は以下の方法で開発者ツールを出すことが出来ます。何度もやって覚えましょう。

• command + option + i キーを押す。

• Webページの任意の場所で右クリック -> コンテキストメニュー(右クリックで出てくるメニュー)の "検証" をクリック。

• ブラウザの右上のメニューアイコンをクリック -> "その他のツール" -> "デベロッパーツール" をクリック

メニューアイコンはコレです

そうするとこのような画面が表示されます。(並び順や細かい表示はバージョンによって違うかもしれません。)

色んなタブがあるのですが、頻繁に利用するのは以下のものです。

• "Elements" -> ページ内のHTML構造(タグの一覧)を見るツール。

• "Console" -> コンソール。ログ出力やエラーの内容などが表示される。

• "Network" -> 表示中のページがどのようなリソース(各種ファイル・画像ファイル等)をリクエストしたか、ファイルのリクエスト順、サイズ、HTTPリクエストの詳細(ヘッダ・ボディ・レスポンスの情報含む)が表示される。

• "Application" -> 現在のページで利用しているCookieやLocalStorageの設定値が表示される。

Elementsタブ

以下のように、検証ツール(一番左の矢印のアイコン)で要素を選択して、要素の中身を書き換えたり、スタイル(CSS)をその場で編集したり。という事が出来ます。選択した要素のスタイルは右側の "Styles" タブに表示されるため、どういうCSSを書けばこんな見た目になる。という事を勉強するのにもちょうど良いです。

Elementsタブでできること

Consoleタブ

このタブには、console.log で出力した内容の他に、ブラウザのwarning/errorといったものが表示されます。また最下部の入力欄では表示中のページに対してスクリプトを実行出来るので、変数の中身を確認したり、JSの関数を呼び出して動作を試してみる。といったことも可能です。

Consoleタブでできること

その他、細かい使い方・呼び方はGoogleの公式マニュアルを見てみてください。