JavaScript プログラマの方にお聞きします。

> どのような開発環境で開発していますでしょうか。

素直にテキストエディタですね。

んで、実際にブラウザ上で動かしてみて動作するか。

JavaScriptは各ブラウザ毎に実装が異なるので

完璧なデバッガはないと思っています。

動作するかしないか。それがすべてだと思っています。

ちなみに、

> 近頃注目を集めている JavaScript ですが

そ、そうなんですか？

注目とは知らなかった・・・。

もっと情報を仕入れなければ・・・。

私自身もブラウザ+エディタでコーディングする派ですが、困るのはやはりデバッグだと思って検索してみて良さげなFireFoxプラグインを見つけました。

ステップ実行できるだけでもかなり楽になりそうですね～。

通常のtextエディタとIEでやってます。

alert()でデバッグしてます。

テストはJSunitを使ってます。

コーディングはテキストエディタ。

テスト環境は、ターゲットとなるブラウザを、製品毎に数バージョン用意。

必要ならWebサーバーも置きます。

私のところでは、企業内システム向けで特定のバージョンに絞って開発することが多いですが、

コンシューマ向けだと、OSの差異も考慮する必要があると思います。

最終的に動作の差異が吸収できないところは個別のルーチンが動くようにして逃げます。

スクリプト自体の文法チェックなどは、事前に行います。

変数名、件数名、オブジェクト名とかは、一覧にしてチェックします。

そのためのツールを作ったりもしました。

デバッグは、地道に各ブラウザ上での動作を確認して行くのが、遠回りな様で近道です。

複雑なものでは、サーバー側でJavascript込みのHTMLを吐くことがあり、

Javascript部分が一定しないためツールを使ったデバッグが困難になってしまいます。

あるブラウザではツールでデバッグできてOKになっても、

別のブラウザでは結局動かないままということも多いです。

…なんか愚痴のようになってしまってすみません。

>近頃注目を集めている

余談ですが、どういう注目なのかぜひ教えてください。

ホームページビルダー＋秀丸などのエディターです。

ホームページビルダーである文法程度のチェックを行ってくれます。

主にテキストエディタ＋DOMインスペクタです。

他には、VisualStudio.netをインストールしていると

IEエラー時に起動して来てデバッガの様な事が、

出来る様ですが、あまり詳しくありません。

DOMインスペクタについては、

Mozilla系は、インストール時に選択すれば使える様に、

Opera,Safariは、探し中です、

IEは↓が参考になりました。

EclipseのExadel Studioプラグインに付属しているJavaScript Editorで開発しています。Exadel Studio Proは有料ですが、Exadel Studioは無料で使えます。

【主な機能】

・キーワードハイライト

・Javascript DOMのコード補完

　-ちゃんと再帰的に補完してくれます

　-補完時にIE,Netscapeの対応状況をアイコンで表示

・関数・変数アウトライン表示

　-ネストされた関数にも対応

・アウトラインをクリックで該当関数にジャンプ

【注意】

・XML DOM(ActiveXObjectやXMLHttpRequest)はコード補完の対象外

多分現存するJavascriptエディタの中ではかなり機能的にリッチな方ではないかと。

過去に公開されていたものを含めると、以下のものが一番便利っぽいのですが、現在ダウンロードできなくなっているようです。

http://www.ee.ryerson.ca/~hkataria/

(スクリーンショットあり)

　１年くらい前にJavaScriptのことを調べた時に見つけたサイトの中では、ここがわりと参考になりました。

（ライブラリも充実してますし）

　他にもどこかでデバッグ用のJSライブラリを見かけた気がするんですが、そっちは忘れてしまいました……。

Rhino を愛用しています。Java で書かれた JavaScript インタプリタです。

対話式に使うこともできて便利なのですが、WWW ブラウザ上の JavaScript アプリの開発にはあまり役に立たないでしょうね。

私も多くの方と同様テキストエディタでコーディング→ブラウザで動作確認としています。

テキストエディタは色分けが自分でカスタマイズできるものを選んでいます（今はサクラエディタ）。

デバッグはalertかwindow.statusですね。

またJavaScriptやDOMのリファレンスは、必ずローカルで参照できるものをダウンロードしておきます。

id:asakura-tさんがおっしゃってるのは、参考URLにあるdebug.jsのことだと思います。これもデバッグに重宝する場面があるかと思います

以下、リンク先から引用

＞皆さんは、ＪａｖａＳｃｒｉｐｔのデバッグにalert(???)を使っていませんか？

＞forループ内で使った日にや、いちいちＯＫボタンを押さなくてはならず、面倒ですね。

＞そこで作ったのが、ｄｅｂｕｇオブジェクトです。

＞デバッグ情報をまとめて別Ｗｉｎｄｏｗに表示します。

ちょっと質問の趣旨とは違いますが、少し前にJavaScriptのデバッグに使えそうなツールをリストアップしたので参考までに。海外のものも調べてみましたが、これといった定番はないようです。

私自身は、etoさんのDebugWindowを使っています。機能はシンプルなのですが、ファイル1つで使い始めるまでが簡単でした。

http://eto.com/d/0503.html#DebugWindow

Mozilla系だと、 id:andi さんの挙げておられる、Venkman が良いように思います。

紹介と和訳サイトのURLを付けておきました。

IE系だと、MS社 謹製が良いかな？という気がします。

自分が試したときは、VS.NET 2003を起動し、メニューの「ツール」→「オプション」→「デバッグ」→「Just-In-Time」の「Script」のチェックボックスを有効にしてデバッグしてました。

(環境のせいか、MS Script Debuggerが動いてくれなかったので…)

ちょっと違うかもしれませんが、ブラウザについてです。

いろんなブラウザを用意するのは、結構大変ですが、上記URLのサービスを利用すれば、いろいろなOSとブラウザで確認できます。有料ですが、、、。

無料お試しが、1日可能です。

開発は、Venkmanが一番便利かと思います。

ただ、ちょっとやりたい、くらいなら、debug.jsもかなり有力です。

Visual Studio の Visual InterDevでもデバッグ可能です。（InterDevからブラウザプロセスにアタッチする）

ただし、多分IE Only。

・実行環境に　FireFox

http://www.mozilla-japan.org/products/firefox/

・実行環境のコントロールに　Web Developer Extension

http://extensionroom.mozdev.org/more-info/webdeveloper

・コード整形に　JavaScript Code Improver

http://www.jcay.com/javascript-code-improver.html

・functionテストに　JavaScriptUnit

http://yusuke.homeip.net/diary/archives/000175.html

JavaScriptUnitはリアルタイムHTMLエディタ「そば」の作者さんがBlogで公開しているものです。

ふと今思ったんだけどxUnitでテストを書くようになってからデバッガを使う機会が極端に減ったような。Venkmakn を最後に立ち上げたのっていつだったかな・・・

エディタにはEmEditorを使って、基本的にFirefoxのコンソール、キリのいいところでIE・Operaで検証するといった感じで作業しています。

デバッグには大抵alert()ですね。

あと、インデントが自動挿入だったりJavaScript用の色分けがあったりすると多少ですが簡単な間違いには気がつきやすくなると思います。

3年ほど前にJavaScript、Flash Player、Media Player、Real Playerを組み合わせたシステムを作ったときの経験をもとに書きます。

ブラウザはIEのみで、エディタはEmEditor、デバッガはMicrosoft Script Debugger、プラグインは使っていませんでした（当時はほとんどプラグインがありませんでした）。

Netscapeでの対応も行いましたが、主要ターゲットブラウザでないため、IEでの対応ほど機能がなかったため、デバッガは使わずに必要に応じてalertを使いました。

IEの場合、デバッガはJITデバッグでのみScript Debuggerを使いました。これは、コードのバグの箇所と原因を突き止めるために使いました。プログラムの状態の出力などは、自作したデバッグウィンドウを使いました。

これでほとんど事足りました。Script Debuggerは確かステップ実行、変数のウォッチもありましたが、ほとんど使った記憶がありません。

拙作の objectdump もどうぞ

* オブジェクトを見やすい形に表示します。

* クリックする毎に階層をたどるので、かなり深いものでも大丈夫