Safari 6 Webインスペクタ

safari を 6 にバージョンアップしたら、
結構使い勝手が変わってるので最初は戸惑いましたが、
ようやく普通に使えるようになってきた。
よく使う機能だけまとめます。


■一番最初にやっておいた方がよい事。
➡ スクリプトのデバッグを止める。

 デフォルトで、All Exceptionsのタグみたいなマークが「On」の状態（濃いブルー）になっているので、「Off」の状態（淡いブルー）にする。⬇写真参照
こうしておかないとスクリプトエラーがあった場合に問題箇所でブレークして画面の読み込みが終わらない。

■続きまして、使用頻度の高いものとしてコンソール。
左の吹き出しをクリックし、Current Log を選択すると右側に コンソールエリアが出ます。
ここで、console.log()でデバッグした値が見られます。

■あと、サーバからのResponse 情報はよく見ますね。
左側にある「時計」マークをクリックすると
Network Request が出てきます。それを選択し、「Recording ◯ 」をクリックすると
リクエスト、レスポンスの記録を取ります。
Name の列にリクエスト情報が表示されます。
ここをクリアしたい場合は、「Recording ◯ 」をクリックして記録を止め、再度クリックして記録をスタートさせます。そうするとクリアされます。
Name 列のリクエスト情報にマウスオーバすると➡マークが出るのでそれをクリック。
そうするとResponse情報が見れます。
Ajaxで通信してる時など便利ですよね。
■ 要素の検証
左側の「書類」をイメージさせるマークをクリックしすると下に現在のページのURLが
あるのでそれを選択する。
するとHTMLが表示されHTMLソースの右上に「人差し指をたてた」様なマークがあるのでそれをクリック。
そうすると画面上で要素を選択できる。
CSS情報の見え方は旧バージョンの方が全然よかった。
現状では、CSSのファイル名などをスタイル情報と一緒に右側のエリアに表示する方法が分からないー。