HTML5:今更の「まぁ便利なChrome！」

　プログラム的なことをする上で、「この変数はこの時、何が入っているのか？」とか、もっと単純に「プログラムはちゃんとここを通っているのか？」とか、知りたい事がある。そのために私はわざわざ画面にテキストを表示させる関数を作って表示したりしていたのだが、Chromeを使っている時にたまに表示されて「なんなのコレ、邪魔だな」と思っていた

F12

というキーで出てくる「デベロッパー・ツール」なるものが大変便利な事を知った。

　JavaScriptのサンプルで結果を表示するのに

console.log("結果");

みたいなのをよく見たのだが、JavaScriptはブラウザで動かすもので、コンソールのようなものなんてないし、どこに何を表示しているんだろう？　なんらかの開発環境を持っている人しか使えない関数なんだろうなぁ〜と適当にスルーしていたのだが、このChromeのF12からconsoleというタブをクリックした場所にこのconsole.logの内容が出力されるのだ！

　また、このconsole.logのいい所は

console.log("%dのX%d、Y%d", i, x, y );
→100のX500、Y200

みたいに引数で文章の中の数字を入れられる……なんて言ったらいいのかわからんが、この機能はObjective-Cでやたらと使ったのでまた使えるなら良い事だ。


　それと、JavaScriptは変数名の打ち間違いや( )の入れ子の間違い、消し忘れ等でも突然真っ暗に動かなくなるのだが、一体どこが原因で動かなくなっているのか、今までは全て自分で探すしかなかった。

　変更した箇所をザーーーっとコメントアウトして起動→動いたらコメントを外して起動→止まったら今コメント外したところに何か間違いがあるはず！　探せ！　という間違い探しが結構手間で。コンパイルしないで済むのは手間が無くて楽でいいのだが、文法エラーとか教えてもらえないのは困ったもんだなと思っていたが、このF12を使うと、consoleにちゃんとエラー表示が出てくる。「500行目がなんかおかしいで」とエラーになった行とエラーの内容も出る。エライ！

　あぁ〜便利便利

　F12押すと突然画面半分妙な英語ズラ〜〜〜っと出てきてビビる事があったけど、意味がわかると大変ありがたいものである。