開発者ツール(コンソール)をのぞく

この章でわかること: ブラウザに最初から付いている「開発者ツール」の開き方と、コンソールに出たエラーを見つけてコピーする手順。これを知るだけで、「画面は動くのにデータが来ない」ような場面で自分の打つ手が一気に増えます。

開発者ツールとは——ブラウザ標準の「点検窓」

私たちが見ている画面の裏側では、ブラウザが常に大量のやり取りをしています。その様子をのぞける点検窓が、どのブラウザにも最初から備わっています。これが **開発者ツール(デベロッパーツール)**です。専門家だけの道具ではなく、車のボンネットを開けてエンジンを確認するのと同じ、誰でも開けてよい蓋です。

非エンジニアの多くは、この窓の存在そのものを知りません。だからこそ、「ボタンを押しても反応がない」「一覧が空のまま」といったとき、 何が起きているのか確かめる術がなく、丸ごとAIに預けるしかなくなります。点検窓を開けられるようになるだけで、状況を言葉にして渡せるようになります。

いちばん覚えやすいのは、**画面のどこかを右クリックして「検証(Inspect)」**を選ぶ方法です。ショートカットでも開けます。

Chrome / Edge(Windows): F12 または Ctrl + Shift + I
Chrome / Edge(Mac): Command + Option + I
Safari(Mac): まず「Safari」→「設定」→「詳細」で **「Webページ開発者向けの機能を表示」**をオンにし、その後 Command + Option + I

開くと画面の横か下にパネルが現れ、上部に「Elements(要素)」「Console (コンソール)」「Network(ネットワーク)」などのタブが並びます。今回使うのはコンソールとネットワークの2つだけです。

コンソールには、裏側で起きたことが時系列で流れます。中でも注目すべきは 赤い文字の行です。赤はエラー、つまり「うまくいかなかった」というブラウザからの報告です。黄色は警告(すぐ困るとは限らない注意)なので、まずは赤だけを気にすれば大丈夫です。

赤い行を見つけたら、次の手順で写し取ります。

エラーメッセージは英語で、しかも呪文のように見えますが、中身を理解する必要はありません。大事なのは「一字一句そのまま渡す」こと。要約したり一部だけ抜き出すと、原因の手がかりが欠けてしまいます。この受け渡しのコツは、エラーとの向き合い方でさらに詳しく扱っています。

「画面は正しく表示されるのに、データだけ出てこない」——これは典型的に、 裏側の通信(データの取り寄せ)が失敗しているサインです。ここで役立つのが Network(ネットワーク)タブです。

やることは1つだけ。タブを開いた状態で画面を再読み込みすると、やり取りの一覧がずらりと出ます。そのうち赤く表示された行、あるいはステータスが 404 や 500 といった数字の行があれば、「そこで取り寄せに失敗している」という意味です。細かい見方は覚えなくてかまいません。

この「失敗している行があるか、ないか」が分かるだけで、AIに「データを取り寄せる通信が 500 で失敗しているようです」と、ぐっと具体的に相談できます。原因の切り分けが半分終わったようなものです。

開発者ツールでは、画面の文字や色をその場で書き換えて試すこともできます。ここで安心してほしいのは、その変更はあなたの手元の表示に一時的に効くだけ だということ。再読み込みすれば元に戻り、公開中のサイトや保存されたファイル、ほかの人が見る画面には影響しません。

とはいえ、目的は「点検」です。あちこち書き換えて遊ぶより、 開く・読む・コピーするの3つに絞るほうが、確実に力がつきます。壊す心配はいらないので、まずは臆せず開いてみてください。

開発者ツールを開けることは、「困った」を「これが起きている」に変える力です。状況を自分の言葉で説明できれば、AIはずっと的確に助けてくれますし、エンジニアに相談するときも話が早く進みます。

作ったプロトタイプを商談の場で見せている最中に、うまく動かない場面が訪れるかもしれません。そのとき慌てず点検窓を開けて原因を一言で言える人は、それだけで信頼されます。中身を直せなくてよいのです。「何が起きているか分かる」だけで、あなたの自己解決力は確実に一段上がります。