JavaScriptのDomメソッドがどうやって動いているのか、普段あんまり意識しないですが、気になりだすと調べたくなるものです。
WebkitはSafariやGoogle Chromeに採用されているレンダリングエンジンで、高速でありアニメーションも非常になめらかです。
そんなWebkitをいつでも追えるように、デバッグ環境を作っておくと便利かも？と手順をメモしておきます。
「JavaScripterの参考になればうれしいです。」
XCodeのインストール
XCodeのインストールは、インストールディスクの中にあるOptional Installsフォルダに入っていますので、そちらからインストール可能です。
もしインストールディスクがない場合は、Apple Developer Connection - Mac Dev Centerよりダウンロードが可能です。
ただし、AppleDeveloperConnectionへのログインが必要になります。
[via]
The WebKit Open Source Project - Installing Developer Tools
Webkitのソースコードをダウンロードする
ターミナルを起動して、まずはダウンロード先のフォルダを作成します。
cd ~
mkdir webkit
cd webkit
次に以下を入力するとSVNからダウンロードが開始されます。
svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit
僕は30分以上かかったので、ランチに行くときに実行しておくとよいかもしれません。
また1度目はターミナルが途中で落ちてしまったので、あまり他の作業は行わずソースのダウンロードに専念させてあげたほうがよいかもしれません。
ソースコードのダウンロードが終わりましたら、以下を実行してください。
どうやらこれをしないとビルドがうまくいかないようです。
WebKit/WebKitTools/Scripts/update-webkit
[via]
The WebKit Open Source Project - Getting the Code
Webkitをビルドする
さっそくビルドを開始します。
以下を実行すると、ターミナルが膨大に流れ始めます。
WebKit/WebKitTools/Scripts/set-webkit-configuration --debug
WebKit/WebKitTools/Scripts/build-webkit --debug
ビルドもだいたい30分くらいかかるので、夕飯を食べにいきましょう！
成功すると以下のようにコンソールに表示されます。
Touch /Users/hoge/_/code/webkit/WebKit/WebKitBuild/Debug/WebKit.framework
cd /Users/hoge/_/code/webkit/WebKit/WebKit
/usr/bin/touch -c /Users/hoge/_/code/webkit/WebKit/WebKitBuild/Debug/WebKit.framework
** BUILD SUCCEEDED **
===========================================================
WebKit is now built (32m:39s).
To run Safari with this newly-built code, use the
"WebKit/WebKitTools/Scripts/run-safari" script.
===========================================================
[via]
The WebKit Open Source Project - Building WebKit
Webkitを起動する
WebKit/WebKitTools/Scripts/run-safari --debug
これで今回ビルドした内容でSafariが起動すると思います。
これでテストは完了です。
XCodeを使ってWebkitをデバッグしてみる
ではでは、いよいよWebkitをデバッグしてみます。
今回はdocument.getElementByIdをデバッグしてみようと思いますので、WebCoreあたりを除いてみます。
まずはダウンロードしたWebkitのWebCoreディレクトリをFinderで表示します。
僕の場合は以下のようなパスにダウンロードしました。
/Users/hoge/_/code/webkit/WebKit/WebCore
ここにXCodeのプロジェクトファイル「WebCore.xcodeproj」があると思いますので、実行してみましょう。
起動するとWebCoreプロジェクトが左のペインに表示されます。
ここのWebCoreの部分で右クリックして、「情報を見る」を選択します。
するとWebCoreの情報が表示されるので、
のように、「カスタムの保存場所」を指定します。
これは実際にビルドされた内容が存在するパスを指定していることになります。
次にアタッチ先となる実行可能ファイルを作成します。
「グループとファイル」ペインの真ん中あたりに「実行可能ファイル」という項目があるので、ここを右クリックし「追加」→「新規カスタム実行可能ファイル」を選択します。
以下のようにSafari.appまでのパスを設定します。
これによりデバッグ時にSafariを使う設定が完了しました。
Webkitにアタッチさせる
いよいよデバッグです。
XCodeのメニューにある「実行」から「進行（デバッグ）」を選択し、デバッグモードで起動します。
この作業は少し時間がかかるので、Safariが起動するまで気長に待ちましょう！
ここでどんな作業が行われているかをコンソールから確認することができます。
以下のボタンをクリックしてコンソールを立ち上げてみましょう。
このように何かしらの作業が進行していると思います。
Safariが起動したら、ブレークポイントを貼ってみましょう。（ここが今回の穴場です！）
document.getElementByIdにブレークポイントを貼る
左側のペインのWebCoreのdomの下にDocument.cppというファイルがあるので、これをクリック。
すると右側のペインにソースコードが表示されるので、「Cmd + F」でgetElementByIdを検索してみます。
（シンボルを選択するプルダウンからもメソッドを表示することができますが、今回は検索機能を使ってみます。）
すると以下のようなコードにたどり着くと思います。
そうです。これがdocument.getElementByIdの実体です。
普段使いに使いまくってるメソッドを見れるのはうれしいですね〜。
では簡単なHTMLファイルを作ってデバッグしてみましょう！
デバッグを貼るポイントはとりあえず、以下のifのところにしてみましょう。
すると以下のようにブルーのしおりのようなものが表示されるので、これがブレークポイントになります。
これで先ほどのHTMLファイルをSafariで開いてみますが、まだアラートは表示されません。
document.getElementByIdにブレークポイントを貼っているので、アラートが表示される前にデバッガがWebkitの実行を待ち状態にしています。
デバッガを使ってみる
ここで便利なのがデバッガです。
デバッガは以下のようにボタンになっているのでクリックすれば起動されます
HTMLファイルを開くとブレークポイントのところでストップします。
あとはステップオーバーしたり、ステップインしたりして遊んでみてください。
変数の監視でelementIdを見ることは出来るのですが、UChar *を16進で表示しているので本当にgetElementByIdで渡した文字列が入っているのかが確認できません。
バイナリから判断することはできるのですが、デバッガウィンドウに直接文字列が表示してほしいところです。
値を他の形式で表示してもうまくいかないので、ここは後で調査します。
Windowsでのデバッグについて
今回はMacのXCodeを使ってWebkitをデバッグしてみましたが、もちろんWindowsのほうでもデバッグは可能です。
手順は以下のリンクに詳細が載っていますが、Mac版とくらべてややこしそうです。
VisualStudioをインストールして、さらにパッチなども当てなくてはいけないので、サクッと試したい場合はMac版のほうが簡単そうです。
WebKitビルドガイド（ドザー用） - 最速チュパカブラ研究会
まとめ
document.getElementByIdを追ってみましたが、何度か実行しているとあることに気がついてきます。
elementIdより該当のidを持つエレメントを探しにいくんですが、m_elementsById.get()を実行してすでにモジュール変数にエレメントがある場合は検索処理をスキップします。
つまりサイトを開いて、Cmd + Rを押すとすでにm_elementsByIdにエレメントが入っているので、高速に動くみたいですね。
こうゆう情報は実際に追ってみないとなかなか分からないものです。
ソースコードも膨大ですが、XCodeでのビルドも結構時間がかかりますが、今後面白い内容が発見できたらブログにアップしていこうと思います。
■参考リンク
・[Tips] Xcodeでプログラム実行と同時にコンソールウィンドウを表示させる方法 - Ni chicha, ni limona -平均から抜けられない僕-
・Mac OSX Build and Run! Xcodeの入手方法
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1231
- Listed below are links to weblogs that reference
- XCodeでWebkitをデバッグする方法 from HouseTect, JavaScriptな情報をあなたに
