常識的に使われていて簡単で効果的なのに入門サイトに余り書かれないhtml+css+javascriptのデバッグ

##デバッガをつかってください
今chromeまたはsafariを使っているならctrl+shift+iで起動する。コンソールは、デバッガ起動後にEscで起動する。
コンソールで直接javascriptを叩いてレスポンスを見ながら書くと速い。html、cssの微調整も直接ブラウザ見ながらデバッガでやった方が速い。が、プログラムの編集機能自体は貧弱なので、大きめの編集をするときはエディタを使う。

##例:twitterとfacebookのログインボタンの画像を変更する方法のデバッグ実況

トライアンドエラーの一回のアクションは2秒〜15秒くらい(入力履歴や入力補完があるので)。
ググるときは、ググった回数*1分くらい。
何回か試してだめだったら先生たちに聞くことにしている。
一発一発が軽いので、細かく刻んで試す(ゲームっぽくていい)。一度にたくさん書いて実行するとどこでダメになったかわかりにくく、目を凝らして読んだり探したりするのは肩がこる。もちろん、自信があるプログラムは一気に書く。

debug.js

//まず、jQueryでちゃんと取れるか試す 
>$("#login_twitter")
<div id=​"login_twitter">​…​</div>​

//とれたので、iframeの中身を試す
//過去の入力履歴を呼び出して、iframeの部分を書き足して実行
>$("#login_twitter iframe")
[<iframe allowtransparency=​"true" frameborder=​"0" tabindex=​"0" role=​"presentation" scrolling=​"no" style=​"vertical-align:​ middle;​ width:​ 170px;​ height:​ 26px;​ ">​…​</iframe>​]

//不安は杞憂だったようだ。余裕余裕。
$("#login_twitter iframe .twitter-connect-large")
[]

//あれ？とれない。iframeの中身を取得する方法をぐぐる
//contents()で取れるらしい
$("#login_twitter iframe").contents()
[Document]

//とれた　続いてオブジェクトから要素を選択するfindを使う（これは覚えていた）
>$("#login_twitter iframe").contents().find(".twitter-connect-large")
[<a href=​"#" class=​"twitter-connect twitter-connect-large" title=​"Connect with Twitter" style=​"background-image:​ url(http:​/​/​localhost:​8086/​img/​puri.jpg)​;​ ">​…​</a>​]

//できた　background-imageをattr()で取得する
>$("#login_twitter iframe").contents().find(".twitter-connect-large").attr("background-image")
undefined

//あれ？とれないのでググる→css()を見つける
//そっか
>$("#login_twitter iframe").contents().find(".twitter-connect-large").css("background-image")
"url(http://localhost:8086/img/puri.jpg)"

//よしよしとれた 続いて設定してみる
>$("#login_twitter iframe").contents().find(".twitter-connect-large").css("background-image","hoge")
[<a href=​"#" class=​"twitter-connect twitter-connect-large" title=​"Connect with Twitter" style=​"background-image:​ url(http:​/​/​localhost:​8086/​img/​puri.jpg)​;​ ">​…​</a>​]

//あれ、変化がない　どうなってんだろ
>$("#login_twitter iframe").contents().find(".twitter-connect-large").css("background-image")
"url(http://localhost:8086/img/puri.jpg)"

//変わっていない　設定内容が悪かった雰囲気なので、書き換えて再度試す
>$("#login_twitter iframe").contents().find(".twitter-connect-large").css("background-image","url('http://localhost:8086/img/revin.jpg')")
[<a href=​"#" class=​"twitter-connect twitter-connect-large" title=​"Connect with Twitter" style=​"background-image:​ url(http:​/​/​localhost:​8086/​img/​revin.jpg)​;​ ">​…​</a>​]

//書き換わったことを確認
>$("#login_twitter iframe").contents().find(".twitter-connect-large").css("background-image")
"url(http:/localhost:8086/img/revin.jpg)"
//できた