開発者ツールの基本
最終更新
最終更新
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の設定値が表示される。
以下のように、検証ツール(一番左の矢印のアイコン)で要素を選択して、要素の中身を書き換えたり、スタイル(CSS)をその場で編集したり。という事が出来ます。選択した要素のスタイルは右側の "Styles" タブに表示されるため、どういうCSSを書けばこんな見た目になる。という事を勉強するのにもちょうど良いです。
このタブには、console.log で出力した内容の他に、ブラウザのwarning/errorといったものが表示されます。また最下部の入力欄では表示中のページに対してスクリプトを実行出来るので、変数の中身を確認したり、JSの関数を呼び出して動作を試してみる。といったことも可能です。
その他、細かい使い方・呼び方はGoogleの公式マニュアルを見てみてください。
