Chromeのデベロッパーツールって？
Webアプリケーションの開発をしている人には当たり前の画面だけど、ブラウザには普通デバッグモードみたいなのがあって、いま表示している画面のソースとか見られるようになっている。たいていHTMLに問題があれば指摘してくれる。
僕はIEとChromeのその手の画面を使ったことがあるんだけど、僕の好みはChromeのデベロッパーツールだ。右上のメニューから「その他のツール」→「デベロッパーツール」と選ぶと表示される。
何をするの？
画面がうまく表示されないときなどにHTMLのどこに問題があるのか調べるのに重宝する。ただ、これは序の口。
プログラミングをする人はVisual Studioとか、Eclipseとかよく使うよね。でまあ、コーディングにも便利な機能がたくさんあるわけだけど、それよりお世話になるのはデバッグだよね。ソースコード上にブレークポイントをおいて、そこまでプログラムを実行して、変数の値を確かめたりね。ステップ実行してちゃんと条件分岐してるかとか、ループの回る回数が間違ってないかとかね、ソースみながらできるわけだからすごく便利。これなしにコーディングなんかできないよって感じ。今の人はIDEなんて当たり前かもしれないけど、おじさんは昔コンパイルリストと実行時エラーのメモリ位置からソースコードを推定してデバッグしてたことがあるからね。これがありがたくて仕方がないのよ。
でさ、Chromeのデベロッパーツールも実行しながらソースコード上でデバッグができるわけだ。今時のWebページってJavaScriptがたくさん使われていて、かなり複雑な処理をしている。だからこれは必須の機能。
サーバーレスシングルページアプリケーションのお勉強中に便利だったこと
まあ、これまでにもこの機能は使ったことがあったんだけど、久しく使っていなくて、昨日サーバレスシングルページアプリケーションのお勉強をしているときにサンプルコードがうまく動かないので久々にデベロッパーツールを開いたのさ。
で、JavaScriptのヤバそうなところにブレークポイントを張って、まずはリロード。
そしたら、index.htmlに書いてあった画面がロードされたときに動くはずの関数が全然呼ばれないの。そう。ブレークポイントに引っかかりもしないわけ。ってことはindex.htmlの中に書いたscriptが悪いってことだから、そこをじっと見たよね。老眼でショボショボする目で。
呼ばれるはずの関数が呼ばれないんだから関数名が間違っていると思うんだけど、違わないような気がする。うーん。と思いながらもじっと目を凝らしてディスプレイに穴が開くかと思うくらい見たよね。
onRaedy
これがさあ、気づかないわけよ。５分位。また指が勝手に動いたなということで、しょーがねーなーと思いながら修正して、今度はちゃんとブレークポイントに止まって、ブレークポイント全部外してさ、Goしたらちゃんと動いたよ。
ブレークポイントを全部外せたのはテストファーストで開発を進めていたからだね。関数は全部テスト済みだから。
まとめ
デベロッパーツールの便利なところはインラインデバッグができることだけじゃない。CSSがどんな優先順位で効いているかとか、とりあえず変数やパラメータを変えてみるとかできることだ。Webデザインやっている人もこれ使ってるんだろうな。
もし使っていないんだったら使ったほうがいいよ。ほんと。そんな人いまどきいないと思うけどさ。
この本で勉強しているよ
Follow me!
