JavaScriptのIDE・統合開発環境としてEclipseのjsdt、Ajax Tools Framework、chromedevtoolsを比較

プログラミング

JavaScriptのIDE・統合開発環境としてEclipseのjsdt, Ajax Tools Framework, chromedevtoolsを比較してみました。

私の開発環境は、Windows 7 Professional 64bit、Java 1.7.0_65 64bit、Eclipse Luna 4.4 64bitです。

 

比較方法として単純にJavaScriptのコードをステップ実行するための手順としてどれが楽かを基準にしています。

 

スポンサーリンク

JavaScriptのステップ実行をIDE・統合開発環境で試してみる

以下のindex.htmlとmain.jsはHTML5 Canvasを表示するJavaScriptの簡単なテストコードです。

 

index.html

 

 

main.js

 

 

JavaScript
実行結果

 

 

たったこれだけのコードをFirebugやブラウザのF12開発ツールを使わずに、純粋にIDE・統合開発環境でステップ実行を試してみました。

 

私はクライアントサイド、サーバーサイドともにJavaのIDE・統合開発環境として使ってきたので、JavaScriptでもEclipseで簡単にステップ実行できるようになると思っていたのですが、意外に難しかったです。

 

jsdt、Ajax Tools Framework、chromedevtools の3つの方法を試しました。

 

jsdt(JavaScript Debug Toolkit)

jsdt

Google Code Archive - Long-term storage for Google Code Project Hosting.

はJavaScript Debug Toolkitというプロジェクトです。

 

通常「JSDT」とはJavaScript Development Toolsの略なのですが、このプロジェクトはJavaScript Debug Toolkitです。

 

Eclipseのメニューから

「Help」→「Install New Software...」→「Work with:」

に以下のサイトを入力してプラグインをインストールします。

 

jsdt - http://jsdt.googlecode.com/svn/trunk/org.ayound.js.debug.update

 

プラグインをインストール後、Eclipseを再起動します。

 

image

 

index.htmlを選択して、

マウスの右クリック→「Debug As」→「Javascript Debug Toolkit」

を選択して実行すると、ブラウザが立ち上がってきます。

 

この状態でEclipse上でJavaScriptのステップ実行を行うことができます。

 

ただし、index.html中に書かれたJavaScriptにはブレークポイントを設定できません。

また、jsdebugというワーク用の空のフォルダが自動的に生成されます。

 

jsdtは使えるには使えるのですが、プロジェクトのホームページを見る限り、2010年1月で更新が途絶えているために、これを本格的に使うのはやめることにしました。

 

Ajax Tools Framework

Ajax Tools Framework

Ajax Tools Framework Project Home | The Eclipse Foundation
The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 350 open source projects, including runtimes, tools and frameworks.

はAjaxの技術を使ってWeb開発を行うフレームワークです。

 

インストールの方法は、

ATF/Installing - Eclipsepedia

のように記載があるのですが、結論から言うと私の環境(Windows 7 Professional 64bit、Java 1.7.0_65 64bit、Eclipse Luna 4.4 64bit)ではうまくインストールできませんでした。

 

 

インストール手順通りにインストールをしてみました。

1. Press Help -> Install New Software...

2. Tell Eclipse the source of Mozilla features

 

EclipseのAvailable Softwareに下記の場所を教えるだけでよいのですが、

404 Not Found

このページはすでに存在しないようです。

 

いろいろと調べてみてもよくわからないので、代わりに以下の場所を教えてみました。

プラグインのインストールそのものは行わないです。

301 Moved Permanently

 

3. Install Ajax Tools Framework.

 

EclipseのAvailable Softwareに以下の場所を入力してインストールします。

Build Artifacts :: /tools/atf/updates/0.3.0/

 

image

 

インストールを行うと、途中で「The installation cannot be completed as requested.」というエラーが表示されます。

 

image

 

エラーの詳細は以下の通りです。

 

Cannot complete the install because one or more required items could not be found.
Software being installed: AJAX Tools Framework Webtools Integration (Incubation) 0.3.0.v201006041600-15-7zCN3HbXIOZQuUeDRRMG (org.eclipse.atf.feature.feature.group 0.3.0.v201006041600-15-7zCN3HbXIOZQuUeDRRMG)
Missing requirement: AJAX Tools Framework Mozilla IDE (Incubation) 0.3.0.v201006041600-17K-DZRDIXEqJdCQQLF (org.eclipse.atf.mozilla.ide.feature.feature.group 0.3.0.v201006041600-17K-DZRDIXEqJdCQQLF) requires 'org.mozilla.xpcom.feature.feature.group 1.8.1' but it could not be found
Cannot satisfy dependency:
From: AJAX Tools Framework Webtools Integration (Incubation) 0.3.0.v201006041600-15-7zCN3HbXIOZQuUeDRRMG (org.eclipse.atf.feature.feature.group 0.3.0.v201006041600-15-7zCN3HbXIOZQuUeDRRMG)
To: org.eclipse.atf.mozilla.ide.feature.feature.group [0.3.0.v201006041600-17K-DZRDIXEqJdCQQLF]

 

 

このままエラーを無視してインストールすることもできるのですが、その場合、インストール後にデバッグ実行を行おうとすると以下のエラーが発生します。

 

image

 

’Mozilla’ has encountered a problem.
An internal error has occurred.
No more handles [Could not detect resisted XULRunner to use]

 

となってこれ以上進めません。

XULRunnerのプロジェクトではWindowsの64bit版の開発を行っていないことが原因かもしれませんが、ちょっと原因はわかりませんでした。

 

いろいろと調べた結果、Ajax Tools Frameworkは私の開発環境では使えないようです。

また、このプロジェクトは、2011年8月で更新が止まっているようです。

という訳で、Ajax Tools Frameworkを使うのはあきらめました。

 

chromedevtools

chromedevtools

Google Code Archive - Long-term storage for Google Code Project Hosting.

はV8ベースのアプリケーションであるGoogle ChromeやオープンソースのChromiumで動作するアプリケーションをデバッグするツールを提供するプロジェクトです。

 

ただし、「The project is no longer actively maintained」と書かれている通り、このプロジェクトはもはや凍結しているようです。

 

image

 

Eclipseのメニューから

「Help」→「Install New Software...」→「Work with:」

に以下のサイトを入力してプラグインをインストールします。

 

ChromeDevTools Update Site - http://chromedevtools.googlecode.com/svn/update/dev/

 

image

 

プラグインをインストール後、Eclipseを再起動します。

Windowsのコマンドプロンプトから、以下のようにGoogle Chromeを起動してポート9222で接続できるようにします。

 

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

ポート9222で接続待ちになりました。

 

 

EclipseのDebug Configurationsを起動します。

 

image

 

Debug ConfigurationsでWebkit Protocolを選択して、localhostの9222で接続するように設定して「Debug」を押すと、Google Chromeにポート9222で接続することは可能でした。

 

ただし、私の環境ではJavaScriptでブレークポイント設定するもブレークポイントにヒットせずにあきらめました。

 

Select backendとして「Protocol 1.0」「Wk@118685」「Wk@120709」の全てを試してみましたが結果は同じでした。

 

という訳で、プロジェクトがもはや凍結されていることもあり、これ以上調べることはやめました。

 

Eclipseでjsdt、Ajax Tools Framework、chromedevtoolsを比較した結論

 

jsdt、Ajax Tools Framework、chromedevtoolsの3つの方法で試したところ、まともに使えたのはjsdtのみでした。

ただし、これらの3つのプロジェクトはすべて凍結状態であるために、これらのプロジェクトはお勧めできないです。

 

EclipseはJava開発のデファクトスタンダードと思っていただけに、JavaScriptのステップ実行に手こずるのは意外でした。

調べ方が悪いのか、もう少し使えるJavaScriptのIDE・統合開発環境を探してみます。

 

2014.10.11追記:WebStormはすごい

その後、JavaScriptの統合環境を更に調べてみました。

フリーのオープンソースではなく商用のソフトですが、WebStormはとても使いやすいJavaScriptの統合開発環境でした。

 

WebStorm(最強のJavaScript IDE・統合開発環境)のファーストインプレッション。日本語化と価格も調べてみた。
最強のJavaScript IDE・統合開発環境であるWebStormを使ってみました。 WebStormはチェコに本社をおくソフトウェア会社JetBrains社が開発したIDE・統合開発環境です。 オープンソー...

 

これまでEclipseにこだわって探していましたが、WebStormを使ってみて、やりたいことがスイスイ出来たのこれで十分と思います。

JavaScriptの統合開発環境を探している人はWebStormをお試しあれ。

 

 

プログラミングの無料レッスン体験

 

約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp

<Codecampの特徴>

1 現役エンジニアによる指導

2オンラインでのマンツーマン形式の講義

3大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp

 

 

 

コメント

  1. […] JavaScriptのIDE・統合開発環境としてEclipseのjsdt、Ajax Tools Framework、chromedevtools… […]

タイトルとURLをコピーしました