Category Archives: debug

debug

JSCocoaのiPhone用インタラクティブコンソール

English version is available.

JSCocoaのページからリンクされたので日本語版をこっちにうつしました。

iviewで使っているUIViewtransformがなかなか思い通りに操れなくて困っていて、だったらアプリにSpiderMonkeyを入れてHTTP経由で通信して試行錯誤できるよにすればいいやとUIMonkeyというのを作り始めたところで、既にそういうのがいくつかあるのをJohn Resig – JavaScript iPhone Appsで知ってショックーというかアホだったのでJSCocoaベースにちょこっと書き直しました。viewの階層構造やサイズを調べるのに便利です。

ファイルのコピー

svn checkout http://jscocoa.googlecode.com/svn/trunk/ jscocoa-read-only

してjscocoa-read-only/JSCocoa/JSCocoaの中身を全部自分のプロジェクトにコピーします。class.jsだけプロジェクトに追加した時に、ただのリソースファイルとして認識してほしいんだけどソースファイルとして認識されてしまうので、いったんclass.gifという名前でプロジェクトに追加して後から名前を変えたらうまくいきました(どうやるのが正しいんでしょう…)。

JSCocoa本体のほかにHTTPサーバのためのHttpd.m, Httpd.h, console.htmlを追加してください。console.htmlCopy Bundle Reesourcesに入れてアプリケーションに組み込まれるようにしてください。

*_Prefix.pchの修正

JSCocoa用のヘッダファイルを追加します。
今回はインラインでUSE_JSCOCOAdefineしていますが、デバッグビルドの時だけdefineするようにしたりすればいちいち書き換えたりする手間がなくなります。

#define USE_JSCOCOA 1

#if USE_JSCOCOA
  #define JSCocoa_iPhone
  #include "JavascriptCore.h"
#endif

main.mの修正

JSCocoaのサンプルコードiPhoneTest2とおんなじようにmain.mで初期化します。クラスHttpdは自分で作ったなんちゃってHTTPサーバです(最後参照)。

#if USE_JSCOCOA
	// Fetch JS symbols
	[JSCocoaSymbolFetcher populateJavascriptCoreSymbols];
	
	// Load iPhone bridgeSupport
	[[BridgeSupportController sharedController] loadBridgeSupport:[NSString stringWithFormat:@"%@/iPhone.bridgeSupport", [[NSBundle mainBundle] bundlePath]]];
	// Load js class kit
	id c = [JSCocoaController sharedController];
	[c evalJSFile:[NSString stringWithFormat:@"%@/class.js", [[NSBundle mainBundle] bundlePath]]];

	[[[Httpd alloc] initWithPort:38880] autorelease];
#endif	

リンクするライブラリの追加

JSCocoaは関数呼び出しにlibffiを使っているので、プロジェクトの設定を開いてOther linker flags-lffiを追加します。

CGAffineTransformの追加

JSCocoaの中にiPhoneでだけ使われる構造体を定義しているiPhone.bridgesupportというXMLファイルがあります。これにCGAffineTransformを追加します(CGAffineTransformを使わないのであれば必要ありません)。

せっかくXMLファイルなのに構造体メンバを"で区切ってしかもそれを実体参照で書くという酷い仕様。下の行をてきとうにCGSizeを定義している下くらいに追加します。

<struct name='CGAffineTransform' type='{CGAffineTransform=&quot;a&quot;f&quot;b&quot;f&quot;c&quot;f&quot;d&quot;f&quot;tx&quot;f&quot;ty&quot;f}'
type64='{CGAffineTransform=&quot;a&quot;d&quot;b&quot;d&quot;c&quot;d&quot;d&quot;d&quot;tx&quot;d&quot;ty&quot;d}' />

ヘッダファイルからマシンフレンドリーな形式で生成して実行時コストを下げるか、ヒューマンフレンドリーにして手で書きやすくするかどっちかにするべきだと思います。

ブラウザで接続

そうしたらあとはアプリをふつうに起動すれば http://localhost:38880/ でアプリの中のJSCocoaに接続できるので、好きなタイミングでブラウザからJSCocoaにjsのコードを送り込んでアプリを操作できます。

以下iviewLifeの写真を表示してのテスト。

original

JSCocoaではObjective-Cのクラス名、メソッド名でjsからもアクセスできるので、UIApplication.sharedApplicationからアプリ内のオブジェクトにアクセスできます。

メインウインドウのアルファを0.2に変えると

alpha=0.2alpha=0.2

背景が透けて、暗くなります。

CGAffineTransformで横に3倍引き延ばしてちょっと右に100ピクセルずらすと

transformtransform

こうなります。

こういう試行錯誤や、使ったことのないクラスを触ってみるときに、Objective-Cのコードの上でやろうと思ったら毎回コンパイルし直す必要があるので時間がかかりますがjavascriptからできると細かい調整がすごく楽です。

View Tree Walk

takuma104さんが前に

iPhoneにWindowsでいうSpy++みたいなのがほしい。viewの階層構造がわかるやつ。
Twitter / takuma mori: iPhoneにWindowsでいうSpy++みたいな …

と言われていたのを思い出して、UIApplication.sharedApplication.subviewsからviewを列挙してjavascriptオブジェクトとしてみられるようにしてみました。HTMLで視覚的に再構築できればベストなんですけど、とりあえずFirebugのコンソールで値を確認できるようにしてみました。inspect view treeのリンクをクリックすると下の画面みたいにしてviewの階層構造を見ることができます。

JSCocoa感想

JSCocoaがNSArrayを自動的にjavascriptの配列として扱ってくれるのですが、これがあんまりうまくいってないみたいでlengthの値が入ってなかったりするとか、そういう微妙に変なところを配慮してあげればわりと使えそうなかんじでした。
自分が普段SpiderMonkeyにどっぷり浸かっているのでunevalがないとかE4Xがないとか分割代入できないとかもありましたがそうでなければふつうにjavascriptです。

JSCocoa interactive console for iPhone

日本語版もあります。

I’ve been struggling with transform property of UIView for long time. at last, I’ve decided to create UIMonkey that allows to manipulate the variables by trial and error through HTTP in Javascript with SpiderMonkey. Few days after I’ve started the project, I found JSCocoa via John Resig – JavaScript iPhone Apps. I abandoned my project and rewrited my codes on JSCocoa.

Now it works on the top of JSCocoa. It’s very helpful especially for inspecting the hierarchy of the view tree or size of the views etc.

How to setup

Follow the steps below to setup JSCocoa interactive console.

Copy the files

First of all, you need to check out JSCocoa files.

svn checkout http://jscocoa.googlecode.com/svn/trunk/ jscocoa-read-only

After checking out complete, copy all of files existing under jscocoa-read-only/JSCocoa/JSCocoa and import them into your project.

I got into trouble on importing class.js. XCode take it as an source file which is need to be compiled while I want to treat it as a simple resource file. I solved this problem by renaing it as class.gif, import it to the project, and rename it again as class.js(please tell me the right way to do that if you know).

In addition to JSCocoa files, you need some files for the console. Please download and import them to your project. Httpd.m, Httpd.h, console.html.
Please remember to
console.html add to the list of Copy Bundle Reesources to ensure the files is copied into your aplication binary file.

Add header files to *_Prefix.pch

JSCocoa requires some header files.
Open your *_Prefix.pch file and add some lines below.

#define USE_JSCOCOA 1

#if USE_JSCOCOA
  #define JSCocoa_iPhone
  #include "JavascriptCore.h"
#endif

Of course, you can define USE_JSCOCOA in the project settings instead of hard coding in the pre-compiled header.

Add some codes to your main.m

Initializing JSCocoa in the same way that of iPhoneTest2 which is distributed with JSCocoa.
Class Httpd is a so-called http server which is implemented in Httpd.m and Httpd.h.

#if USE_JSCOCOA
	// Fetch JS symbols
	[JSCocoaSymbolFetcher populateJavascriptCoreSymbols];
	
	// Load iPhone bridgeSupport
	[[BridgeSupportController sharedController] loadBridgeSupport:[NSString stringWithFormat:@"%@/iPhone.bridgeSupport", [[NSBundle mainBundle] bundlePath]]];
	// Load js class kit
	id c = [JSCocoaController sharedController];
	[c evalJSFile:[NSString stringWithFormat:@"%@/class.js", [[NSBundle mainBundle] bundlePath]]];

	[[[Httpd alloc] initWithPort:38880] autorelease];
#endif	

Add libffi

JSCocoa using libffi to call Objective-C functions.
OPen your project settings and add -lffi to Other linker flags.

Add CGAffineTransform(If you need)

iPhone.bridgesupport which defines the structures used by only iPhone SDK. If you want to manipulate CGAffineTransform through JSCocoa, add the difinition of CGAffineTransform to the file.

iPhone.bridgesupport is a XML file, but it’s too annoying to write it by hand. You have to separate the members with ". I think it would be nice to generate the file in machine-friendly format to decrease the run-time CPU cost or to make it more human-friendly format to allow humans to write it by hand easily.

Add this definition below to around the next line of that defines CGSize.

<struct name='CGAffineTransform' type='{CGAffineTransform=&quot;a&quot;f&quot;b&quot;f&quot;c&quot;f&quot;d&quot;f&quot;tx&quot;f&quot;ty&quot;f}'
type64='{CGAffineTransform=&quot;a&quot;d&quot;b&quot;d&quot;c&quot;d&quot;d&quot;d&quot;tx&quot;d&quot;ty&quot;d}' />

Connect to JSCocoa through browser

Just launching your application in the iPhone simulator and now you can connect to JSCocoa which resides in it.
Open http://localhost:38880/ and you can send any javascript code to manipulate your application through JSCocoa at any time.

I’ll show you some tests with iview and a photo from Life magazne.

original

JSCocoa allows you to access Objective-C classes and methods. So you can access the objects in your iPhone application through UIApplication.sharedApplication.

Now change the alpha value of the main window.

alpha=0.2alpha=0.2

the background of the main window become transparent and the screen gets black(because background color is black).

Streching Y-axis three times and moving by 100pxices.

transformtransform

Writing in Objective-C consumes huge amount of time that using the classes you are not familiar with, adjusting animation parameters and so on. Bacause it have to be compiled. But with JSCocoa, You don’t need to compiled it, and you can bedone it thorugh trial and error without recompile. It’s very nice.

View Tree Walk

takuma104(who is a developper of Natsu Lion for iPhone that is a swift, neat, open-source twitter client) said on twitter,

iPhoneにWindowsでいうSpy++みたいなのがほしい。viewの階層構造がわかるやつ。
Twitter / takuma mori: iPhoneにWindowsでいうSpy++みたいな …

It means “I need a tool for iPhone like Spy++ of Windows. Shows me hierarchy of the views”.

I remember the tweet and write small code that enumerates all views from UIApplication.sharedApplication.subviews. You can see the geometric values through Firebug console by clicking the inspect view tree link. I think its more useful if it reconstructs the hierarchy in the same visual HTML elements(but not implemented at this time).

My impression of JSCocoa

JSCocoa is very useful After I got familiar with some weird behaviours like that javascript array object which is auto translated from NSArray by JSCocoa does not have length.

and if you unfortunately have get used to SpiderMonkey like me, it makes hard javascript coding on JSCocoa which is based on JavaScriptCore of WebKit that does not have uneval, E4X, destructuring assignment and so on.
yes, i know its not JSCocoa’s fault. it’s my fault who get used to the features only in SpiderMonkey =)

Great thanks for people behind JSCocoa.

Scissors, Fools, Tools

このサービスはこういうふうに使うもので、そういう使い方は間違っている、正しくない、みたいなのを見かける。ひらめいったーで、それ用に作られたツールはないけれど、これをこうつかえばそのまま代用できるじゃん、みたいなのを見かけたりする。

たいていのサービスは、つくったひとがこういうことがしたい、というのを元に機能やみためがデザインされている。Creating Passionate Users: Making happy usersに書いてあった

“Make the right thing easy and the wrong thing hard.”

というフレーズそのままで、そのサービスが想定している使い方であれば、かんたんに使えるし(想定している使い方をかんたんにできないのならそもそもデザインがおかしい)、想定していない使い方だとかんたんにはできないことが多い。

想定されていない使いかた

でも、たいていのサービスは、想定されている使い方以外の使い方ができる。カレンダーの予定欄に日記を書くことだってできるし、ブログにひたすら写真だけをアップロードして写真倉庫にすることだってできる。

想定されていない使い方をするのはかっこいい。想定されていない使い方をしているのに、いちばんはじめに出会ったのは8年くらい前だろうか。とある日本のサイトに設置されているチャットに、なぜかドイツの人たちが入り浸ってドイツ語でチャットしまくっていた。あるツールが設置されている理由を完全に無視して他の使い方をすることができるというのにそのとき気がついた。

2chくわしくないのだけれど、2chでスレにしおりを入れるというのも、かっこよかった。

 −−−−−−−−−−−−−−−−−−−−−−−−−−
俺様用しおり
 ∧_∧
( ・∀・)< 今日はここまで読んだ
−−−−−−−−−−−−−−−−−−−−−−−−−−

みたいなカキコをする。ほんとにしおりとして使うためにカキコしてるわけじゃないだろうけど、みんなで使うためのものを自分だけのために使うという考え方に、ドイツ人がチャットを占拠しているのとおなじものを感じた。

そのツールを作ったひとが想定している使い方をばっさり無視して、自分の好きなように使うのはかっこいい。

メッセンジャー

ある日、自転車メッセンジャーのスタイルを読んで

無鉄砲で危険で、時には法律違反だって思われるような走りで沢山の人をイライラさせたりしてたら…ほら、これって若者の崇拝するアイコンの持つ条件がほとんど揃ってますよね!(笑)

の部分で人間の本性を考えるに似たようなことが書かれていたのを思い出した。

男性は痛みによく耐え、地位や注目や、そのほかのあやしげな報酬のために生命の危険をおかそとうする意欲も強い。「崇高なまでにばかげた方法でみずからを遺伝子プールから抹消し、人類の長期の存続を確実にした個人」に毎年贈られるダーウィン賞は、ただでコーラを手に入れようとして販売機を傾け、その下敷きになってしまった男、だれがいちばん強く対戦者地雷を踏みつけられるかを競った三人の男、気象観測用の気球を結びつけた芝生用のイスに座って地上二マイルまで飛びあがり、海まで流されたパイロット志願者(彼はヘリコプターに救助されたため、選外賞しかもらえなかった)などである。

人間の本性を考える(中)124ページより。

ちょうどこの本を読んでいたときに小学生が閉まる防火シャッターをくぐって遊んでいて挟まれる事故があったので、よく覚えている。でも、小学生の男の子的には確実に防火シャッターが最も閉まっている状態でくぐり抜けたやつが当然偉くて賞賛の的になるのは当然だ。今の自分でも共感できる。自分も階段を何段飛ばしで飛び降りれるか、みたいなのをあやしげな報酬のためにやった。

大人になると、そのあやしげな報酬がどれくらい実体のあるものかを判断するようになるけれど、それでもやっぱり心の中にはそういうあやしげな報酬のために危険をおかそとうすることをかっこいいと感じる部分はそのまま残っている。馬鹿げたことをしているという目で眺めつつも、賞賛を贈らないではいられない。

Napsterは、圧倒的に便利だったというのもあるけれど、それだけではなくてインターネット上に無鉄砲で危険で、時には法律違反だって思われるような小学生男子的価値観と照らし合わせて”かっこいい”ものをはじめて(自分の知る限り、だけど)みせてくれたところにしびれたのかもしれない。

マッシュアップ

そんな小学生男子的価値観でいけば、サービスをサービスが想定している方法で使うことほどださいものはない。nisshi.yugop: About Samplingで書かれている

所謂マッシュアップ(死語)における引用元/引用先の関係としては、こんな風に引用元を全くもって粗末に使い倒し、美味しいとこだけおんぶに抱っこしつつ、ひょいっと違うレベルに組み替えてしまう、てのが最高なんだと思う。よくある「とりあえずマッシュアップしてみました!えへ!」的なサービスって、「お前らGoogleとAmazonの奴隷か」みたいな感じが否めないんだけど、このサービスぐらい「美味しいとこだけイタダキマース」感が強いと、 YouTubeの中の人、ちょっとイラっとしそうだもん。

の部分には、上に書いた小学生男子的価値観でかっこいい!というのがあるんじゃないかと思う。用意されたAPIを、相手の意図とは違う、世の中の作法を無視した方法でもって使うからかっこいいのだと思う。

沢山の人をイライラさせたりあやしげな報酬のために才能の無駄遣いをすること、それは昔に男子小学生だったことがあるひとならどこかにやっぱり今でも持っている評価基準なんじゃないかとこのごろ思う。

JSActionsのalertをFirebug.Console.logで置き換える

戦争 – JSactions、雑感、エラー箇所の表示

chrome/jsactions/content/jsactions.jsの290行目とか309行目付近を以下みたいに変更。

        }catch(e){
            alert(e.message + ' : ' + e.lineNumber);
            if(!(e instanceof ReferenceError)){}

をまねして

        }catch(e){
-           alert(e);
+           Firebug.Console.log(e);
            if(!(e instanceof ReferenceError)){}

に変更。

ふつうのjsのエラー同様Firebugのコンソールに

が出てきて、クリックすると

になるようになった。

5行目だったとは….
すぐやればよかった。

extensionのコード書くのすごい楽しい。コンパイラおばさんと一対一で作法を学ぶようなC++のコードをながめつつ、てきとうに書いたらてきとうに動いてくれるjsのコードで進むかんじがお互いに欠けているものを補いつつ進むかんじで楽しい。

PERL5LIBで標準モジュールを差し替える

自分用メモ。

なんかHTML::Formが type=submit で同名のnameを複数置いてサーバでvalueを見て処理を分岐させていたりするときに、valueが日本語(UTF-8)だと値が入らない(空になる)けどASCIIだとちゃんと入るという謎な挙動をするので追跡したい。
とちゅうにDumperを仕込みたいので読み込み順を変更したくて調べたら The Perl5 Manual – 環境変数

Perl のライブラリファイルを探すときに、標準のライブラリディレクトリとカレントディレクトリよりも前に探しにいくディレクトリを、コンマで区切って並べたリストです。

って書いてあった。

PERL5LIBは知ってたけど、真っ先に読み込まれるとは知らず。

env PERL5LIB=. perl filename.pl

でカレントに置いたモジュールから読み込んでもらえるのでDumperとか好きに入れられる。

OSXのdashboardでコンソールにデバッグ出力を出す方法

Technical Note TN2139: Debugging Dashboard Widgets をよく読むと

When running in Dashboard, alert statements are simply printed to the Console, avoiding any of these issues.

と書かれているではないですか。はじめalertの出力がコンソールに出るっていうのはsafariのdebugメニューの JavaScript Console かと思って、出てこないなーと困っていたら、コンソールというのは標準出力のことでした。
ふつうの状態ではDockの標準出力はどこかに捨てられてしまうので、OSX起動時から動いているDockをkillして、新たにターミナルからDockを起動する必要があります。Dockの親プロセスのWIndowServerが生死を監視しているらしく、Dockが死ぬとすぐにWindowServerがDockを起動しちゃうのでそれより早くDockを起動しなければいけません。

kuma@fav:~% killall Dock && /System/Library/CoreServices/Dock.app/Contents/MacOS/Dock

でkillと起動を行うとうまくターミナルからDockを起動して標準出力を受け取ることができました。
この状態でdashboardの中で alert("log me.") を実行すると、ターミナルに

2007-03-23 20:50:36.092 DashboardClient[2214] jp.gmo.labs.dashboard.pibrowse: log me.

と出力されてすべて解決です!

はじめ DashboardWidgetのデバッグ方法 を読んで、これはIE上での開発と同じくらい辛いなーと思ったのですがこれで少し楽ができます。

あともうひとつデバッグするときに便利なことを発見。
widgetがなんらかの理由で Command+R も受け付けなくなったときには

killall Dock

でDockを終了させると、”ウィジェットを管理”で消して再度入れ直したりしなくても問題が解決できます。

dashboardはNFSでマウントしたディレクトリから起動しない

widgetをダブルクリックしても起動しないので調べたら DashboardWidgetのデバッグ方法 に、起動しない典型的原因が載ってました。でもぜんぶクリアしてもやっぱり起動しない。どこかにエラーログが出てくれればいいんだけどそういうのはないっぽいので手探り。
けっきょくNFSでマウントしているディレクトリからは起動してくれないようで、自分のホームディレクトリの下にコピーしたら無事起動してくれました。

HTTP_Requestの送信している内容を表示する

PHPのHTTP_Requestはかゆいところに手が届かない。
そもそも AddPostData() と AddQueryString() が別々なのがいただけない。状況によってはPOSTしつつクエリーストリングを付加したいとかもあるだろうが、一元的に扱えるメソッドを用意した上で個別に扱えるのも用意すれば良いのではないか。わざわざクライアント側でifで分けないといけない。はなからPHPで書かなければいいだけだけれど書かないといけないこともあるのだ。
で、本題に戻ってサーバにリクエストを送る前にその内容を見る方法。

print $req->_buildRequest()

とすると、中でリクエストを構築している関数を直接呼び出せる。しかしこれがGETの場合はいいのだけれどPOSTの場合副作用があるらしく、二回目以降の呼び出しでは内容が帰ってこなくなる。そのため、中身を見つつリクエストを送るということができなくなる。一度しか中身が正しく取得されないので、リクエストを送る前に中身を表示させれば送られるリクエストが正しくなくなるし、リクエストを送ったあとに表示させようとすると、今度は何も表示されなくなる。

_buildRequest()なんてプライベートなメンバを呼ぶのではなくちゃんとした方法がある気もする。

Firefox Extension: Console Filter

javascript debugger on IE で書いていたfirebugで表示されるエラーは、 javascript console に表示されるエラーすべてを表示してくれるわけではないようで、js内のつまらないシンタックスエラーとかはfirebugに出てきません。で、なんで動かないかわからなくてえんえん困っていたら [ と  { を書き間違っていたとかだったりする。
javascript console を表示しておけばいいのだけれど、 javascript colsole はCSSがらみですんごい量のエラーを出すので見落しがち。なんとかならないのかなー、と思って探したらやっぱりあった。

Console Filter 0.3 [Oct 28] – MozillaZine Forums 名前のとおり表示するエラーをフィルタリングしてくれるもの。この拡張を入れると javascript console の右上にちっちゃいドロップダウンテキストボックスができて、そこにこんなかんじ(The filter syntax is some kind of “Google Lite”)

-"Declaration dropped" -"invalid rule set" -"Selector expected" 
-"Skipped to next declaration" -"Ruleset ignored due to bad selector" 

で記述すると、書いたテキストを含むエラーは表示されなくなります。日本語版Firefoxを使っているとエラーメッセージが日本語で出てうまくフィルタできないので(fiter rule が文字化けしちゃう)英語版でないとダメ。

別窓で出しているとちょっと邪魔なので Updated: Open Firefox JavaScript Console in a Sidebar を参考にサイドバーに入れるとよいです。
気に入らないのは、サイドバーなのでfirebugのログウインドウがちっちゃくなってしまうところ。
あと、この console filter は、一回表示されてから、それを非表示にするという仕様で、たしかにフィルタだけどちょっと思ってたのと違うのが不満。

Google Groups : Google-Maps-API

firefoxで開発するのが気づけばとても快適で、safariでデバッグするのが極めて苦痛に。safariでopenInfoWindowXslt()が動かず困って、えんえん調べてけっきょくはこんな話。

openInfoWindowXslt works in FF, not IE/Safari

Any progress? I’m trying my best to be lazy and use infoWindowXslt but
running into it not showing in Safari.
I’ve downloaded google-ajaxslt which I presume is the Javascript
fallback for Safari and found my original didn’t work with it but even
after changes that worked, no luck with the map itself.

なんかドキュメントには”ネイティブのXSLTサポートがない場合javascriptのXSLTパーサで変換してくれる”とかいてあるけど、実際には動かなそうな雰囲気。

Google Maps API Official Blog: Update on the upcoming API v2 によれば API version 2.x で openInfoWindowXslt() は廃止になるらしい。XSLTで記述するスマートさは捨て難いけれど、XSLTでHTMLを組み立てる場合、あとからデータを入れ替えてもう一度表示し直したいというのができないし(もちろん表示したエレメントを全部消して全部書き直すのならできるけど)、おとなしくjsで組み立てることにする。

Safari Developer FAQ

こないだIEとfirefoxのjavascriptデバッグ環境は整ったので残るsafariということで調べたけれど “safariには javascript console に console.log() でデバッグ文を出力するのよりよいデバッグ環境はない”というのがわかっただけ。残念。

javascript console にデバッグ文を出す方法は、Safari Developer FAQ にあるとおり。

if(window.console) {
    window.console.log("I think therefore I code!");
} else {
    alert("I think therefore I code!");
}

こんなふうにかくと javascsript console に文字列が出てくる。firebugとおんなじかんじ。

firebugのprintfire()も、safariの console.log() も、毎回書くのは大変なので、MS製品育ちの自分は

window.trace = firebug;

って書いて trace() で出力できるようにしている。が、safariも同様に

window.trace = window.console.log

としてtrace()を呼ぶとなぜかsafari(1.3.1)が落ちる。試行錯誤の結果

window.trace = function (str) { window.console.log(str); };

にすると落ちない。なので今はこうしてます。

あとどこかに書いてあったんだけど、このconsole.log()は引数をprintf()みたいに%を特殊文字として扱うらしく、%が入っていると出力が変になったりするって書いてあったけど未確認。

javascript debugger on IE

firefoxで動くデバッガにはVenkmanがあるけれど、やや癖が強くて使いにくい。インタラクティブな処理が多いコードだとステップ実行ができることよりも、変数の中身を簡単に見られることの方が重要だったりもする。

firebugWindowfirebug はjsから文字列を書き出せるコンソールを備えたextensionで、さらにオブジェクトの内容をツリー構造で表示することができる。ステップ実行はできないけれど、この二つで効率よくバグ取りができる。

しかし世の中firefoxで動くとかは趣味の世界。IEで動かなければ動かないのと同じだけれどIEの出すエラーメッセージはどのファイルのどこで出ているのかちっともわからないし、メッセージもあまり的確でないことが多くてデバッグが困難だ(そのへんはメッセージにこめられた意図を読み解けるかどうかという慣れの問題だったりもするんだろうけれど)。IEでこそデバッガが欲しい。

office setup dialogそういえば Visual Studio とかいじってたときに、VisualC++と一緒にIE用のデバッガが勝手に入ってスクリプトのエラーを通知する設定にしていると、間違ってデバッガを起動させちゃって待たされて困ったりしてたなーと思い出し、最近 visual studio は express edition とかいって無料になっているので、そのあたりのやつでデバッグできたりしないのかなと調べてみた。

結論として visual studio express edition ではデバッグできない。が、Office2003(or later?)が入っていればデバッグが可能。MS製品育ちの自分としては慣れたMSのデバッガ(といっても数年のブランクの間にUIがちょっと変わってて戸惑う)でデバッグできるのはうれしい。ただはじめoffice2003は入っているけれどインストールの時に除外したのか、デバッガが使えない状態でofficeのインストーラでofficeツールをインストールし直して使えるようになった。officeツールなんて変なバーが出るようになるだけかと思っていた。

というか知らぬは己ばかりなりで、MSのページにも書かれているのでした。汎用のデバッガなのでDOMの表示なんかが不便でfirebugの変数表示の方が便利だけれどVenkmanよりはぜんぜんよいです。正式名称は Script Editor.
さああと残るはsafariだ。

IEBlog : Scripting Debugging in Internet Explorer

HOW-TO: Debug JavaScript in Internet Explorer