« Lunascape 3.6.1リリース。Faviconをカレントフォルダに見に行っていた仕様の問題も改善 | トップページ | Firefox 1.5.0.7リリース。JavaScript関連の脆弱性など修正 »

2006/09/14

SafariでJavaScriptのデバッグをする方法



PHP+MySQLで大規模サイトの運営が可能です!!

Mac OSXのSafariでJavaScript関連のエラー・動作不良で悩んだ時、デバッグするには、それなりのコツが要ります。他のブラウザでの一般的な解決策を含めて、見ていきたいと思います。IE6やFirefoxの場合、windows.onerrorが使えるため、

(LinuxのブラウザKonquerorには、「Konquerorとエスケープ文字(JavaScript謎のエラーを解く)」でまとめたような不具合がShift_JISのページでは出現するため、alert内の改行コードを「\n」と表記せず、敢えて、String.fromCharCode(10)とすることで、半角円マーク・バックスラッシュが出現しない形にしてあります。)

上のJavaScriptを実行すると、IE6では、
window.onerrorによるエラーの捕捉:
オブジェクトを指定してください。
http://hogehoge/hoge.htmlの14行目付近です。

とalert(アラート)が表示されます。

Firefox(1.5.0.6。Win/Mac)なら、
window.onerrorによるエラーの捕捉:
a is not defined
http://hogehoge/hoge.htmlの14行目付近です。

と表示されます。Firefoxのエラーの方がわかりやすいです。というより、IE6のエラーメッセージは、何を指しているのかは、行数だけが頼りになります。しかも、この行数も、(特に外部ファイルを使っている際には)あてにならないことが多いため、もし、IE6でのみ発生するエラーというわけでないならば、Firefoxでデバッグをした方が良いです。

Safariでは、先述のようにwindow.onerrorをサポートしていませんから(※ alert(typeof(window.onerror));とすると「function」とこたえてくれる、おちゃめなSafariです。「undefined」ではないんですよね。とほほ。)、SafariでのJavaScriptエラーのデバッグをする際には、Mac版Firefox(Macがない場合は、Windows版Firefox)を使ってデバッグし、Safariでも問題が解消されているかどうかを確認するのが一番手っ取り早いです。



また、window.onerrorで自前でわざわざプログラミングしなくても、実は便利なツールがFirefoxにはあります。

●Web Developer 1.0.2 日本語版/ツール&ダウンロード
http://www.infoaxia.com/tools/webdeveloper/
を使うと、JavaScriptエラーが発生すると、ツールバーの中のアイコンの一つが赤くなりますので、すぐ分かり、そこをクリックするとJavaScriptコンソールが開きますので、無茶苦茶便利です。

ただ、中には、Firefox(Mac版)では不具合が発生しないのに、Safariでは不具合が発生することがあります。そういう時のために、Safari本人を使ってデバッグするには、ちょっとした隠し技を使う必要があります。「隠し技」というと大袈裟ですが、実際、SafariにもJavaScriptコンソールがあるのに、標準ではdisabled(利用不可)になっています。

Safariをいったん終了させ、ターミナル(「アプリケーション」→「ユーティリティー」に存在すると思います。)を起動し、以下のコマンドをたたき、Safariを再起動させますと、Safariにおけるdebugメニューが有効になります。





defaults write com.apple.Safari IncludeDebugMenu -bool true

と入力します。すると、ブラウザのメニューの右端に、この右上の画像のようなメニュー(現在のところ英語)がつきます。この中の「Show JavaScript Console」をクリックするとことで、JavaScriptエラーの内容を知ることができます。冒頭の例で言えば、Safariでは、

TypeError - Object (result of express a) does not allow calls.
http://hogehoge/hogehoge.html
Line 14

という感じのエラーがコンソールに吐き出されています。正確な訳はできませんが、「aという文字で表現されるオブジェクトは関数をcallしたりはできないよ」という趣旨だと思います。表現こそ、Firefoxとは違いますが、aが問題だというのはこれで分かりますね。

このdebugメニューを有効にすると、Safariでもユーザーーエージェントの偽装が簡単にできるようになりますので、場合によっては便利でしょう(偽装後、元に戻したい場合は、User Agentを「Automatically Chosen」にして、いったんSafariを終了させ、再び起動させると元に戻ります。再起動しないと元に戻らないような気がします)。

ちなみに、同じく、window.onerrorが使えないOpera(9.01)では、コンソールに

name: ReferenceError
message: Statement on line 4: Reference to undefined variable: a

のように表示されました。Opera 9.01のコンソールは、メニューの「ツール」→「詳細ツール」→「エラーコンソール」で確認することができます。

行数こそは違いますが、やはり、「a」という未定義の変数が問題を参照しているのがけしからんというわけで、Operaのエラーメッセージもわかりやすいです。結局なんだかんだ言って、IE6のJavaScriptエラー「オブジェクトを指定してください。」が一番不親切です。What's are you talinkg about?です。

その他、「try ~ catch ~」によるデバッグ方法もありますが、Safariの場合、「try ~ catch ~」では、うまくエラーを捕捉できないケースもありますので(コンソールにはエラーは出ますが、try~catchではcatchできないことがあります。参照:「Mac版IEのRefererバグ」の後半。)、注意が必要です。

最終的には、alertによる変数の中身を一つ一つ見ていく、問題を絞りこんで、最小化されたスクリプトで不具合を再現しつつ、バグ取りをするという作業が必要になってくる場合も、どうしても出てきますが、Safariにおけるdebugメニューの有効かはとても役に立ちますので、覚えておいて損はないでしょう。



|

« Lunascape 3.6.1リリース。Faviconをカレントフォルダに見に行っていた仕様の問題も改善 | トップページ | Firefox 1.5.0.7リリース。JavaScript関連の脆弱性など修正 »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/67411/11891845

この記事へのトラックバック一覧です: SafariでJavaScriptのデバッグをする方法:

» KML2GMAP [Taketan B-Wiki]
KML2GMAP † Google Earthで作成したkmlファイルをAjaxで読み込み、Google Mapsで表示するJavaScript。 デモサイト kmlファイルのアップロード機能を付加している。新しい順に20表示。 Safari等ではうまく表示出来ない。BOM問題か?BOMじゃなさそうだ。Safariはデ... [続きを読む]

受信: 2006/09/22 08:35

« Lunascape 3.6.1リリース。Faviconをカレントフォルダに見に行っていた仕様の問題も改善 | トップページ | Firefox 1.5.0.7リリース。JavaScript関連の脆弱性など修正 »