学ぶ目的
「なんか崩れてます」は報告にならない
サイトの不具合を見つけたとき、「なんか崩れてます」「動きません」とだけ伝えてしまっていないでしょうか。受け取った開発者は、まず「どの画面で」「何が」「どうなったのか」を聞き返すことから始めることになります。この往復に半日かかることも珍しくありません。
ブラウザは答えを知っている
実は、その答えの多くはあなたの目の前にあります。Google Chrome には最初から「開発者ツール(DevTools)」が入っていて、画面がどう組まれているのか、サーバーと何をやり取りしたのか、どこでエラーが起きたのかをすべて記録しています。インストールも購入も必要ありません。
非エンジニアにこそ効く
この道具はエンジニア専用だと思われがちですが、使って一番得をするのはむしろ伝える側の人です。事実を添えて報告できるだけで、やり取りの回数が減り、修正までの時間が短くなります。
この講座のゴール
プログラミングを書けるようになる必要はありません。「見て、読んで、伝える」の3つができれば十分です。最後の回では、ここまでに見たものを使って実際にバグ報告を書いてみます。
このレクチャーで学ぶこと
- 開発者ツールが何を見せてくれるのか
- 非エンジニアが使う価値はどこにあるか
- この講座のゴール
質問
まだ質問は投稿されていません。
質問投稿
ログイン後に質問の投稿ができます。
#1
未完了
DevToolsとは ― 「なんか動かない」を事実に変える道具
#2
未完了
DevToolsを開いてみよう ― パネルの全体像
#3
未完了
Elementsパネル ― 画面の中身を見る
#4
未完了
Stylesを触ってみよう ― 色と余白をその場で試す
#5
未完了
Consoleパネル ― エラーメッセージを読む
#6
未完了
Networkパネル ― サーバーとのやり取りを見る
#7
未完了
ステータスコード ― 404と500で誰の問題か分ける
#8
未完了
デバイスモード ― スマホ表示を確かめる
#9
未完了
Applicationパネル ― Cookieと計測タグを確かめる
#10
未完了