# 開発者ツールの基本 Webフロントエンド開発に欠かせないツールであるブラウザの**開発者ツール**について、触れておこうと思います。このマニュアルでは、特に触れない場合は以下の環境を使っているものとしています。 * OS = macOS High Sierra(OSのバージョン)以降のもの * MacBook Pro(筆者はTouch Bar付き15インチの2016年モデルを使ってます。) * ブラウザ = [Chrome](https://www.google.com/chrome/)の最新 ## 開発者ツールの基本 Chromeの場合は以下の方法で**開発者ツール**を出すことが出来ます。何度もやって覚えましょう。 * `command + option + i` キーを押す。 * Webページの任意の場所で右クリック -> コンテキストメニュー(右クリックで出てくるメニュー)の **"検証"** をクリック。 * ブラウザの右上の**メニューアイコンをクリック -> "その他のツール" -> "デベロッパーツール"** をクリック
メニューアイコンはコレです
そうするとこのような画面が表示されます。(並び順や細かい表示はバージョンによって違うかもしれません。) ![](https://2587240623-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M494Pr3hMOi0R4_iECc%2F-M4P-GFGGes4hSVTtll7%2F-M4P1NveE2e57ZiN7YcJ%2Fimage.png?alt=media\&token=6e58b19e-f5c2-4bbf-8b1f-23045f543160) 色んなタブがあるのですが、頻繁に利用するのは以下のものです。 * **"Elements"** -> ページ内のHTML構造(タグの一覧)を見るツール。 * **"Console"** -> コンソール。ログ出力やエラーの内容などが表示される。 * **"Network"** -> 表示中のページがどのようなリソース(各種ファイル・画像ファイル等)をリクエストしたか、ファイルのリクエスト順、サイズ、HTTPリクエストの詳細(ヘッダ・ボディ・レスポンスの情報含む)が表示される。 * **"Application"** -> 現在のページで利用している**Cookie**や**LocalStorage**の設定値が表示される。 ### Elementsタブ 以下のように、検証ツール(一番左の矢印のアイコン)で要素を選択して、要素の中身を書き換えたり、スタイル(CSS)をその場で編集したり。という事が出来ます。選択した要素のスタイルは右側の **"Styles"** タブに表示されるため、どういうCSSを書けばこんな見た目になる。という事を勉強するのにもちょうど良いです。 ![Elementsタブでできること](https://2587240623-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M494Pr3hMOi0R4_iECc%2F-M4P3i_AeyfGTvN-GVPM%2F-M4P4hdoKXLKTRAG4co0%2Fbutton-demo.gif?alt=media\&token=260b3afc-e178-4131-9d32-cf6fc6d11886) ### Consoleタブ このタブには、**console.log** で出力した内容の他に、ブラウザのwarning/errorといったものが表示されます。また最下部の入力欄では表示中のページに対してスクリプトを実行出来るので、変数の中身を確認したり、JSの関数を呼び出して動作を試してみる。といったことも可能です。 ![Consoleタブでできること](https://2587240623-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M494Pr3hMOi0R4_iECc%2F-M4gmfN4kW_7DJmadT0l%2F-M4gnxxoDLx7_hYMdZc1%2Ftest.gif?alt=media\&token=5af66e8e-1bb5-44a4-8568-58416f20868e) その他、細かい使い方・呼び方はGoogleの[公式マニュアル](https://developers.google.com/web/tools/chrome-devtools?hl=ja)を見てみてください。