JavaScriptの勉強：開発環境

Chrome JavaScript で検索したら古いJavaScriptコンソールの記事ばかりでした（そもそもメニューの項目名が異なっている）。そこで、現状の chrome のメニュー項目名「デベロッパーツール」で検索したらこのページに当たりました。今年の８-９月の情報なので、これは役に立ちそうです。じっくり読んでみます。と、読んでみたらこれでも現行バージョンとは微妙に動きが違っています。まあ「微妙」な程度なので使えないことはありませんが。本体の進化が速すぎて周辺の解説が追い付いていませんね。あるいは、周辺を蔑ろにすることによって素早い進化を実現していると言えるのかもしれません。最近は release early が流行りですが、こういう点では問題です。

Google Chrome版Firebug：デベロッパーツール取扱説明書　2010-08-18 ～ 2010-09-08

第1回　詳説：デベロッパーツールの使い方 2010-08-18

表示の出方等、微妙に違っていますが、「微妙」は程度ですのでそれほど困りません。一応役にたっています。今回はデベロッパーツールの画面の解説レベルで、それぞれの画面の役割というか機能の解説です。初期表示が別ウィンドウになっている以外は記述されている通りです。

第2回　JavaScriptのデバッグとチューニング 2010-08-25

ショートカット一覧　
全部覚えることはないでしょうが、ここでまとめられていますよ、ということでメモ。

JavaScriptデバッガの活用　

条件付きブレークの設定方法が出ています。というか、ブレークポイントにヒットしたときにスクリプトを（本体側変更なしで）実行させるテクニックですね。これは便利。

consoleのメソッド

デバッグ用のconsoleメソッドの使用例が載っています。コピーしてスクリプトコンソールに貼り付けると、実際の実行例が見られます。コードを見るだけで大体の使い方がわかります。これも便利がコードサンプルです。

プロファイリング

GUIで指定するか、あるいは console.profile で指示。場所を限定してプロファイルを取る場合には console.profile をコードに埋め込んだほうが便利ですね。普通の使い方ですと、GUIで指定して全体像を掴み、問題の箇所に console.profile を埋め込んで精査する、といった風になるのでしょう。

第3回　ウェブサイトの最適化 2010-09-01

Timelineパネル

処理の流れ（開始、終了、経過）をタイムライン表示してくれるツールだそうで。これがあれば全体のプロファイリングは要りませんね。また、これを使って実行タイミングを調整する（並列処理させる）例が出ています。WEBページチューニングなんかでは役に立つでしょう。で、Googleのトップページで試してみたのですが、タイマー使われているページでは余分なイベント処理ばかり多数記録されて肝心のところが埋もれてしまいますね。UI的にもう少し工夫が欲しいところです。

Auditsパネル

YSlowのChrome版だそうで。簡潔にして要を得た説明です。こちらは監査開始でページリロードが自動的に実行され（タイムラインにもこのような機能が欲しいですね）、ページを構成する各要素についての監査情報が表示されます。Timelineは時系列、Auditsは実行結果の統計、といった役割分担でしょう。

第4回　ウェブ開発を助ける拡張やノウハウ 2010-09-08 最終回

各ブラウザの開発者向けツールの機能比較

まさに比較表なんですが、どのブラウザもバージョンアップが激しいので、参考までにといったところでしょう。実際、ここに出ている Chrome は Ve.6 ですが、４ヵ月後の手元の Chrome はVer.8ですから。大きな変更無くて良かったですよ。

デバッグ時の注意点・ノウハウ

デバッグトラブルの時にここを見るといいかも知れません。とりあえず「about:about」だけは覚えておきましょう。

デバッグ用拡張機能

いろいろと紹介されています。が、拡張機能の習いですが、古い拡張機能には本体側で実装されてしまったために無意味になっているものも多いのですよね。ここで紹介されているものも、結局デベロッパーツールで代用が効きそうなものばかりでした。