学ぶ目的
エラーは隠れているだけ
画面上は何事もないように見えても、Console を開くと赤い文字が並んでいることがあります。「ボタンを押しても反応しない」の答えは、たいていここに書いてあります。
色で優先度を判断する
赤はエラーで、実際に何かが壊れています。黄色は警告で、動作はしているけれど推奨されない書き方だ、程度の意味です。報告すべきは赤の方です。黄色は普段からたくさん出ているので、いちいち気にしなくて構いません。
英文を全部読もうとしない
エラー文は英語ですが、全文を理解する必要はありません。見るのは 2 点だけです。最初の一行(何が起きたか)と、右端のファイル名と行番号(どこで起きたか)。この 2 つをそのままコピーして渡せば、開発者はすぐに場所を特定できます。
拡張機能を疑う
広告ブロックなどのブラウザ拡張が出すエラーも混ざります。シークレットウィンドウで同じページを開いてみて、エラーが消えるなら拡張機能が原因です。この一手間を入れるだけで、無駄な報告を防げます。
このレクチャーで学ぶこと
- 赤いエラーと黄色い警告の違い
- 英文エラーのどこを見ればいいか
- 自分の拡張機能が原因のこともある
質問
まだ質問は投稿されていません。
質問投稿
ログイン後に質問の投稿ができます。
#1
未完了
DevToolsとは ― 「なんか動かない」を事実に変える道具
#2
未完了
DevToolsを開いてみよう ― パネルの全体像
#3
未完了
Elementsパネル ― 画面の中身を見る
#4
未完了
Stylesを触ってみよう ― 色と余白をその場で試す
#5
未完了
Consoleパネル ― エラーメッセージを読む
#6
未完了
Networkパネル ― サーバーとのやり取りを見る
#7
未完了
ステータスコード ― 404と500で誰の問題か分ける
#8
未完了
デバイスモード ― スマホ表示を確かめる
#9
未完了
Applicationパネル ― Cookieと計測タグを確かめる
#10
未完了