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・統合開発環境で試してみる
jsdt(JavaScript Debug Toolkit)
Ajax Tools Framework
chromedevtools
Eclipseでjsdt、Ajax Tools Framework、chromedevtoolsを比較した結論
2014.10.11追記:WebStormはすごい
プログラミングの無料レッスン体験

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas test</title>
    <script src='main.js'></script>
    <script type="text/javascript">
      window.onload = function() {
        var drawingCanvas = document.getElementById('canvas1');
                draw(drawingCanvas)        
      }
    </script>
   </head>
 <body>
   <h1>JavaScript Canvas</h1>
   <canvas id="canvas1" width="400" height="400">
     Your browser doesn't support canvas.
   </canvas>
 </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Canvas test</title>

window.onload = function() {

var drawingCanvas = document.getElementById('canvas1');

draw(drawingCanvas)

}

</script>

</head>

<body>

<h1>JavaScript Canvas</h1>

Your browser doesn't support canvas.

</canvas>

</body>

</html>

index.html

function draw(drawingCanvas) {
    if (drawingCanvas && drawingCanvas.getContext) {
      var context = drawingCanvas.getContext('2d');

      context.fillStyle =   "#FF0000";  // Red
      context.fillRect(0,0,200,200);

      context.fillStyle = "#00FF00";    // Green
      context.fillRect(0,200,200,200);

      context.fillStyle = "#0000FF";    // Blue
      context.fillRect(200,0,200,200);

      context.fillStyle = "#000000";    // Black
      context.fillRect(200,200,200,200);
    }
}

function draw(drawingCanvas) {

if (drawingCanvas && drawingCanvas.getContext) {

var context = drawingCanvas.getContext('2d');

context.fillStyle = "#FF0000"; // Red

context.fillRect(0,0,200,200);

context.fillStyle = "#00FF00"; // Green

context.fillRect(0,200,200,200);

context.fillStyle = "#0000FF"; // Blue

context.fillRect(200,0,200,200);

context.fillStyle = "#000000"; // Black

context.fillRect(200,200,200,200);

}

main.js

実行結果

たったこれだけのコードを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を再起動します。

index.htmlを選択して、

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

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

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

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

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

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

Ajax Tools Framework

Archived Projects | The Eclipse Foundation

The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 415 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に以下の場所を入力してインストールします。

301 Moved Permanently

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

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

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]

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