ブラウザ開発者ツール（DevTools） とは？

ブラウザに届いたページや、その実行中の様子を調べられるよ。構造やCSSを確認したり、JavaScriptのエラーや通信を追ったりする。サーバーの内部コードやデータベースまで全部見える道具ではないんだ。

Chromeではページの要素を右クリックして「検証」を選ぶと、その要素をElementsで調べられるよ。WindowsやLinuxではF12やCtrl+Shift+I、MacではCmd+Option+Iでも開ける。他のブラウザでは、メニューやキー、事前設定をそれぞれ確認しよう。

主に現在のDOMだよ。DOMは、ブラウザがHTMLから作るページの構造で、JavaScriptによって後から変わることもある。Elementsで文字やCSSを試しに変えても、通常はその場の表示の変更。サーバー上のファイルが自動で書き換わるわけではないよ。

通常の表示変更は再読み込みで失われるけど、ChromeにはLocal overridesやWorkspaceなど、ローカルに変更を保存する機能もあるよ。保存先と適用の仕組みを設定して使うものだから、その場の編集と区別しよう。公開サイトの変更には、元ファイルの更新と公開の手順が必要だね。

Networkでどの通信に時間がかかるか、要求や応答の内容を確認するよ。Consoleではエラーやログ、Sourcesではブレークポイントを使ってJavaScriptを止め、変数や実行の流れを調べる。通信が遅い原因をサーバー側まで調べるなら、その側の記録も必要なんだ。