Chrome DevToolsの使い方

## はじめに Webアプリケーションの開発において、必要不可欠なツールの一つにChrome DevToolsというものがあります。このツールは開発を手助けするさまざまな機能が用意されており、例えば以下のようなことができます。 - 描画されているHTML/CSSを効率よく確認したり、一部を書き換えることができる - 描画されているHTML/CSSに対してJavaScriptのコードを対話式に実行できる - ブラウザのリクエストの中身(ヘッダー、ボディ、ステータスコードなど)を確認し、問題箇所の切り分けができる - Cookieやローカルストレジの中身を確認したり、一部を書き換えることができる - その他いろいろ... 挙げるとキリがないのですが、フィヨルドブートキャンプのカリキュラムを進める上で必要不可欠な機能に絞って、使い方を解説します。 > 本ドキュメントはGoogle ChromeのDevToolsを対象に記載していますが、FirefoxにもWeb開発ツールという名前で類似するツールが用意されているので、Firefoxをお使いの方は適宜読み替えながら活用ください。 ## Elements Panel Elements Panelでは、現在閲覧しているページのDOMやCSSを確認したり、値を変更したりすることができます。 例えば [このドキュメント](https://bootcamp.fjord.jp/pages/use_the_question_room) でElements Panelを開いてみましょう。Mac版のGoogle Chromeであれば `Option + Command + I` で、 Windows版であれば `Ctrl + Shift + I` もしくは `F12` でDevToolsを開き、`Elements` タブを選択します。  このページの「Watch中」というボタンがどのような要素か確認したいときは、以下画像のように要素をクリックすることで確認ができます。  表示されているソースコードはダブルクリックで書き換えが可能です。書き換えた内容は画面に即時反映されるので、HTML/CSSの調整をする際に役立ちますね。  ## Console Panel Console Panelでは表示中のページに対して、JavaScriptのコードを対話式に実行できます。先の例と同様、 [このドキュメント](https://bootcamp.fjord.jp/pages/use_the_question_room) でDevToolsを開きConsole Panelを選択してみましょう。  左下にプロンプトのようなものが表示されていますね。ここにJavaScriptのコードを実行することができます。JavaScriptのちょっとしたメソッドの動作を確認する際はもちろん、そのページで `getElementById` したときに狙った要素を取得できるのかを確認する際などに活用できそうですね。 ```javascript const button = document.getElementById('watch-button'); button // Enterを押すと取得した要素が表示される ```  ## Network Panel Network Panelではそのページを表示するためにネットワーク経由で行ったリクエストの内容を確認することができます。先の例と同様、 [このドキュメント](https://bootcamp.fjord.jp/pages/use_the_question_room) でDevToolsを開きNetwork Panelを選択してみましょう。 Network Panelを表示してからページをリロードするとたくさんのリクエストが表示されますね。このページを表示するだけで内部的にはこれだけのリクエストをしているということです。  Network Panelは近年活用する場面が非常に増えてきています。なぜなら、Vue.jsやReactといったフロントエンドフレームワークの普及もあって、以前よりもAjaxでのリクエストが増えてきたためです。 試しに、このページで行っているAjaxリクエストの1つ「コメントの取得」を確認してみましょう。 Network Panel内左上の `Filter` と書かれたテキストボックスに `comments` と入力すると、URLに `comments` が含まれるリクエストをフィルタリングできます。そのリクエストを選択して `Response` タブをクリックすると、バックエンドのサーバーがレスポンスしたJSONの内容を確認できます。  Ajaxを扱うシステムでは、「問題がフロントエンド側にあるのかバックエンド側にあるのかわからない」といったシチュエーションが多く発生するのですが、これを活用することでどちらに問題があるのか切り分けることができます。 ---- その他にも表示されているタイムチャートを見ることで時間のかかっているリクエストを特定したり、 `Headers` タブを選択することでHTTPリクエストのヘッダー情報を確認できたり、さまざまな場面で役立ちます。 Network Panel、ぜひ活用ください。 ## Application Panel Application Panelでは表示中のページで動作しているアプリケーションの状態を確認したりデバッグしたりすることができます。このパネルにも様々な機能が用意されているのですが、フィヨルドブートキャンプを進めていく上で使うとすれば `Storage` の部分です。 [プラクティス](https://bootcamp.fjord.jp/courses/1/practices) でDevToolsを開き、Application Panelを選択してみましょう。  Application Panelの左端に `Storage` という項目があることがわかります。さらにその下に `Local Storage` `Cookies` といった項目がありますね。ここではローカルストレージやCookiesにどのような値が保存されているか確認できます。 「みんなの進捗」をOFFにして `Local Storage` を見てみると、 `hidden-users` というKeyで `on` というValueが保存されていることがわかりますね。もちろん、これもダブルクリックすることで内容を変更したり削除したりすることができます。  また、 `Cookies` を見てみると、 `_bootcamp_session` という名前で何か値が格納されていることがわかります。これがRails側でセッション(session)と呼んでいる情報です。  セッションは暗号化された情報が入っているので、ここを見てもデバッグがしづらいかもしれませんが、セッションを一度空にしたいとき等にこのPanelを使うことがあります。 ## おわりに Chrome DevToolsの使いどころを理解できましたでしょうか？ 最近流行りのSPA(Single Page Application)を開発する際は、DOM操作が複雑だったり、フロントエンド側で実行されるJavaScriptプログラムのデバッグが必要だったり、フロントエンドとバックエンドのどちらに問題があるか切り分ける必要があったりと、Chrome DevToolsなしでの開発は考えられないほど、活用する場面が多いです。 ぜひChrome DevToolsを手足の様に活用して、今後の開発を円滑に進めていってくださいね👍