開発者ツールの基本
Webフロントエンド開発に欠か せないツールであるブラウザの開発者ツールについて、触れておこうと思います。このマニュアルでは、特に触れない場合は以下の環境を使っているものとしています。
- OS = macOS High Sierra(OSのバージョン)以降のもの
- MacBook Pro(筆者はTouch Bar付き15インチの2016年モデルを使ってます。)
Chromeの場合は以下の方法で開発者ツールを出すことが出来ます。何度もやって覚えましょう。
command + option + iキーを押す。- Webページの任意の場所で右クリック -> コンテキストメニュー(右クリックで出てくるメニュー)の "検証" をクリック。
- ブラウザの右上のメニューアイコンをクリック -> "その他のツール" -> "デベロッパーツール" をクリック
メニューアイコンはコレです
そうするとこのような画面が表示されます。(並び順や細かい表示はバージョンによって違うかもしれません。)
色んなタブがあるのですが、頻繁に利用するのは以下のものです。
- "Elements" -> ページ内のHTML構造(タグの一覧)を見るツール。
- "Console" -> コンソール。ログ出力やエラーの内容などが表示される。
- "Network" -> 表示中のページがどのようなリソース(各種ファイル・画像ファイル等)をリクエストしたか、ファイルのリクエスト順、サイズ、HTTPリクエストの詳細(ヘッダ・ボディ・レスポンスの情報含む)が表示される。
- "Application" -> 現在のページで利用しているCookieやLocalStorageの設定値が表示される。
以下のように、検証ツール(一番左の矢印のアイコン)で要素を選択して、要素の中身を書き換えたり、スタイル(CSS)をその場で編集したり。という事が出来ます。選択した要素のスタイルは右側の "Styles" タブに表示されるため、どういうCSSを書けばこんな見た目になる。という事を勉強するのにもちょうど良いです。
Elementsタブでできること
このタブには、console.log で出力した内容の他に、ブラウザのwarning/errorといったものが表示されます。また最下部の入力欄では表示中のページに対してスクリプトを実行出来るので、変数の中身を確認したり、JSの関数を呼び出して動作を試してみる。といったことも可能です。
Consoleタブでできること
最終更新 2yr ago