- ブログネタ：
- JavaScript に参加中！
GoogleがEclipse上で動くGoogle Chrome Developer ToolsというJavaScript開発ツールをリリースしたので、とりあえずインストールしてみました。今回はそのインストール方法のメモです。
Google Chrome Developer Toolsのごく大雑把な概要
- Eclipse上でJavaScriptのデバッグができるみたいです。
- Google Chromeと組み合わせて動かすようです。
用意するもの
- Eclipse 3.4.2以上、Platform（プラグインが何も入っていない素のタイプ）のみで動きます。JREがPCにインストールされていない人はJRE付きをダウンロードしてください。
- Google Chrome version 3.0.189.0以上、つまり現行版は対応していないので、最新のBETA版をインストールしてください。多分Chrome 4.0でも大丈夫。
以降の説明はこの2つがインストールされていることを前提に進めていきます。
Eclipseへのインストール手順
注、以下の手順は全てEclipseの日本語化プラグインPleiadesがインストールされた状態での説明になっています。英語版を使っている人はそれとなく置き換えてみてください＾＾；
Eclipseの起動
まずはEclipse.exeの起動です。
新規ソフトウェアのインストール
- 「ヘルプ(H)」→「新規ソフトウェアのインストール…」をクリック
- 「作業対象(W)」の「追加(A)」ボタンをクリック
- 「名前(N)」→「Google Chrome Developer Tools」
「ロケーション(L)」→「http://chromedevtools.googlecode.com/svn/update/dev/」
と入力して「OK」をクリック - 一覧にGoogle Chrome Developer Toolsが出てくるので、名前の左側のチェックボックスを入れて「次へ(N)」をクリック
- ライセンスを読んで「使用条件の条項に同意します(A)」にチェックを入れて「完了(F)」をクリック
- 少し待った後、インストールが完了すると↓のダイアログが出てきますが、とりあえずここは「変更を適用」をクリックした後Eclipseを終了。
Google Chromeのポート開放など
- Chrome.exeへのショートカットを作成してプロパティを開きます。
- 「リンク先」に「--remote-shell-port=9222」というオプションを追加します。ダブルクォートの外側に半角スペースを空けてオプションを入れます。
- 「適用」と「OK」ボタンをクリックした後、このショートカットからChromeを起動します。
パースペクティブをデバッグにする
- Eclipseを起動します。
- 「ウィンドウ(W)」→「パースペクティブを開く(O)」→「その他(O)」をクリックします。右上にある「パースペクティブを開く」ボタンをクリックしてもいいです。
- 「デバッグ」を選んで「OK」をクリックすします。
すると、デバッグのビューに変わります。
デバッグの構成
- 「実行(R)」→「デバッグの構成(B)」をクリック
- 左の一覧の中から「Chronium JavaScript」を選択して（多分一覧にはこれしか出ない）、左上の「新規の起動構成」ボタンをクリック
- 「名前(N)」→てきとう
「ポート:」→「9222」
「Remote Scripts Project Name:」→「Debug JavaScript」
として（たぶんデフォルトでこうなる）「デバッグ(D)」をクリック - 成功するとこんな感じに表示されました。これで何とか動くようになったのかも。
- 失敗するとエラーメッセージが出てきます。Chromeがあらかじめ起動しているか、オプション設定、バージョン、Eclipseとの起動順序（Chromeが先）などをもう一度よく確認してみてください。
その他
使い込んでいないので、使用感はまたの機会にでも。
Chromeベータ版付属のデバッガはそのままでも優れているので、敢えてEclipseプラグインをリリースしたとなると少しは期待できる？