JavaScriptデバッガ、開発環境などに使えるツールのまとめ

2009年4月28日

Firebug、DebugBar、Aptana Studio、Eclipse WTP、NetBeansなど、JavaScriptのデバッガ、開発環境の関連情報


JavaScriptの開発環境は、テキストエディタを除外すると、主にデバッガやインスペクタとしてWebブラウザに内蔵されているのものと、Webブラウザのアドオンになっているもの。そして単独のアプリケーションとして統合開発環境となっているものの3つに大別できるでしょう。

Webデバッガ最強はFirebugだが、ほかのブラウザでは... | マイコミジャーナル

特にWebブラウザのアドオンは手軽かつ一般のプログラミングには十分な機能を備えたものが登場しており、よく使われているようです。

2008年6月に書かれた以下の記事が、現状でのWebブラウザに関するHTML/CSS/JavaScriptのデバッガの状況を捕らえています。

では以下から、ツールごとに関連する記事をまとめて紹介していきましょう。

Firefox

WebブラウザのFirefoxは、標準でJavaScriptのコンパイル時などにエラーを表示する「エラーコンソール」機能を備えています。

Opera

WebブラウザのOperaには内蔵のJavaScriptデバッガ、Dragonflyが備わっており、DOMインスペクタ、JavaScriptのブレークポイント設定、スタック参照などを行うことができます。

Safari、WebKit

Webアプリ開発環境としてのSafariを知ってますか？ - ＠IT

WebブラウザのSafariは、その基盤となっているWebKitの機能としてWebインスペクタを内蔵。Webページ上の要素を表示することや、JavaScriptのソース表示などが可能です。また、JavaScriptのエラーコンソール機能も備えています。WebインスペクタにはJavaScriptデバッガのDroseraが統合される予定です。

Firebug

Firebugは、Firefoxに対応したアドオンです。Webブラウザに表示されているWebページのHTML、CSSの解析に加え、実行されているJavaScriptに対してブレークポイントの設定や変数の値の表示やDOMインスペクタ、エラーのログ機能など、デバッグに役立つ機能を備えています。

Firebug

公式サイトでは日本語で説明を読むことができます。

Publickeyでは、Firebugのレビュー記事も掲載しています。それも含め、利用方法は以下の記事などが参考になるでしょう。

Firebugの機能を拡張する - SourceForge.JP Magazine

Firebugには拡張機能があり、さまざまな機能追加ができます。

Firebug Lite

Firebug Lite

Internet ExplorerやOpera、Safariといった、Firefox以外のブラウザでも、Firebugのほとんどの機能を使えるようにしたのが、JavaScriptで実装されたFirebug Liteです。

使い方は下記の記事で解説されています。

Venkman、Webdeveloper

Venkman JavaScript Debugger project page

VenkmnもFirebugと同じく、Firefoxに対応したアドオンです。ブレークポイントの設定、変数の値参照、エラーログの表示などの機能があります。

Mozillaのサイトで使い方を日本語で解説しています。

WebdeveloperもFirefoxに対応したアドオンです。JavaScriptのデバッグ機能はありませんが、クッキーやJavaScriptを向こうにしたり、CSSをその場で編集するなど、Webページを解析するための機能を備えています。

Visual Studio 2008 Express Editions

Visual Studio 2008 Express Editions

マイクロソフトが無償で配布している統合開発環境のVisual Studio 2008 Express Editionsに含まれているVisual Web Developerには、JavaScriptに対応したIntellisense機能やデバッガが備わっています。

使い方は以下の記事が参考になります。

Microsoft Script Editor

Microsoft Officeのオプションとして入っているMicrosoft Script EditorもJavaScriptのデバッグに利用することができます。インストールにはMicrosoft Officeが必要になります。

Windows Script Debugger、Internet Explorer Developer Toolbar

Internet Exporlerで使えるJavaScriptデバッガとしては、Windows Script Debuggerもあります。ただし、試した範囲ではInternet Explorer 7には対応していないようでした。

また、JavaScriptデバッガではありませんが、Internet Explorerのプラグインとして、表示されているWebページのHTMLやCSSの内容を把握できるツール、Internet Explorer Developer Toolbarがマイクロソフトによって公開されています。ただし英語版のみです。

DebugBar

DebugBarはInternet Exploerのアドオンです。DOMインスペクターや、実行しているJavaScriptを表示する機能などがあります。ブレークポイント設定やステップ実行の機能は備わっていないようです。

以下の記事で解説されています。

Aptana Studio

Aptana Studio -- The Web 2.0 IDE for Ajax, PHP, Ruby on Rails, Jaxer and more

Aptana Studioは、JavaScriptプログラムの開発に対応した統合開発環境で、無償版と有償版があります。プログラミング環境としてJavaScriptだけでなくRuby、PHP、Pythonといったプログラミング言語や、HTML、CSSにも対応。jQuery、prototype.js、script.aculo.usなど主要なJavaScriptライブラリに対応し、FTPやSVN、データベース連携といった機能も備えています。

Aptana Studioの機能や使い方は、aptana.tvに動画で紹介されています。ここでは主なものをいくつか紹介しましょう。

Aptanaで始めるJavaScriptライブラリ「jQuery」超入門 （1/3） ─ ＠IT

Aptana Studioのインストールと使い方については、下記の記事が参考になります。特に＠ITのAptanaで始めるJavaScriptライブラリ「jQuery」超入門 は、話題のJavaScriptライブラリjQueryを使った最新の解説です。

Aptana Studioの日本語版はありませんが、Aptana Studioを構成するEclipseをPleadesで日本語化することでメニューなどを日本語化する方法が紹介されています。日本語化する方法はPleiadesを使う方法と、Language Packを使う方法の2種類あります。

Pleiadesを使う方法と、Pleiadesのページ。Pleiades本体のみを使います。

Language Packを使う方法と、Language Packのダウンロードページ。2009年4月現在、Aptana Studio 1.2.6はEclipse 3.2ベースとなっているため、それに該当したLanguage Packのリンク先を紹介しています（ちなみに2009年4月現在のEclipseの最新バージョンは3.4）。

Eclipseの日本語化ツールであるPleiadesとLnaguge Packについては下記の記事が参考になります。

Eclipse WTP

Eclipse Downloads

Eclipse 3.4（コードネームGanymede）のEclipse IDE for Java EE Developersには、プラグイン「WTP」（Web Tools Platform）が含まれています。このWTPは、プログラミング時にJavaScriptの補完とバリデーションをしてくれます。ただし、デバッグ機能などは搭載されていません。

Eclipseの日本語化については、下記の記事を参考にしてください。

NetBeans

ja: NetBeans日本語サイト

NetBeans 6.5からは、JavaScriptエディタ機能が追加されました。構文の強調表示、コード補完、およびエラーチェックの機能があります。

簡単な紹介記事など。

JSEclipse、Adobe Flex3

アドビからβ版が試験提供されていたEclipseのプラグイン「JSEclipse」は公開が終了し、Adobe Flex builder 3に搭載されるようになった模様です。

Spket IDE

JavaScriptとXMLにフォーカスしたEclipseベースの統合開発環境。Internet Explorer用のデバッガも搭載しています。

以下の記事で解説されています。

TIDE 2

JavaScriptで作られ、Webブラウザ上で動作するJavaScriptの統合開発環境。

JSLint

JSLintは、JavaScriptのソースコードを構文チェックしてくれます。Webサイトへ行き、ペーストしてボタンを押すだけです。

使い方は以下の記事が参考になります。

テストフレームワーク、テストツール

JavaScriptのアプリケーションをテストするときに有効なのがテストフレームワークやテストツールです。これらは、テストケースを書いておくと自動的に実行してくれ、その結果をログに残してくれるなど、効率的なテストをサポートしてくれます。

JSUnit、YUI Test､QUnitの特徴は、以下の記事にまとめが書いてあります。

主なテストフレームワークやテストツールを紹介していきましょう。

JSUnitは、Javaのテストフレームワークとしてよく知られるJUnitのJavaScript版です。

YUI Testは、Yahoo! UI Libraryに含まれるフレームワークです。

QUnitは、JQueryが配布しているフレームワークです。

unittest.jsは、script.aculo.usに含まれるフレームワークです。

Selenium IDEは、Firefoxのアドオンです。Firefoxを操作した内容を記録、再現する機能などを備え、繰り返しテストなどを効果的に作成、実行することができます。

ソースコード圧縮ツール、難読化ツール

JavaScriptのソースコードから余計なスペースやタブ、改行を取り除くことで、ファイルを小さくしてダウンロード時間や必要なメモリを圧縮したり、実行速度を向上させることができます。圧縮ツールはそうした作業を自動的に行ってくれます。

また、圧縮と同時に変数名を短いものに変えたり、あえて構文を複雑にすることなどにより、元のソースコードを解析しにくくすることでソースコードの盗用を防ぐ機能を備えたものもあります。

コマンドとして利用する圧縮ツール

Webから簡単に使える圧縮ツール

難読化機能を備えたもの

書籍

ひなた先生が教えるデバッグが256倍速くなるテクニック ひなた先生が教えるデバッグが256倍速くなるテクニック
会話形式で、デバックのポイントとなる題材ごとに章立てて解説していく。入門者から上級者まで幅広く役立つ（目次）
JavaScript JavaScript
JavaScriptを、サンプルによる説明よりも文章による言語解説を重視して説明した一冊。本格的なJavaScriptプログラマを目指す、プログラミング経験のある人に。（目次）
JavaScriptクイックリファレンス JavaScriptクイックリファレンス
同じオライリーの書籍「JavaScript」の分冊として作られたリファレンスマニュアル。JavaScript 1.5対応（目次）
JavaScriptプログラミング入門 JavaScriptプログラミング入門
JavaScriptの入門書として、豊富なサンプルとともに実用的なJavaScriptを学ぶための一冊。AjaxやJSONなど最近の技術にも触れている（目次）
JavaScriptマスターブック JavaScriptマスターブック
入門書の次を探している人に。オブジェクトや関数、配列のより高度な使い方、DOMプログラミングなど、JavaScriptの能力をより引き出すための技術を解説（目次）
DOM Scripting 標準ガイドブック DOM Scripting 標準ガイドブック
Webデザイナーを対象に、DOMの使い方を解説。JavaScriptでダイナミックなWebページをつくるのに欠かせないDOMのプログラミング的ニックをサンプルを用いて基礎から解説（目次）
DOM Scripting DOM Scripting
DOMの操作によって行えるドキュメント操作、CSSの操作のさまざまなサンプルを集めて解説。イベントのやXMLの処理も含みリファレンス的な要素も備えた実用的な一冊（目次）
JavaScript ポケットリファレンス JavaScript ポケットリファレンス
JavaScriptプログラミングの際に、リファレンスとして。ブラウザごとの対応、Ajax関連の通信やDOMなどの命令もカバー（目次）

ビデオ

Joe Hewitt: Joe Hewitt: "Welcome to Firebug 1.0" - Yahoo! Video
Furebugの開発者自身によるFirebugの解説

スライド

Test Driven Development With YUI Test (Ajax Experience 2008) Test Driven Development With YUI Test (Ajax Experience 2008) - Slideshare
YUI Testを用いたテストドリブン開発について。テストドリブン開発のサイクルやYUI Testの使いこなしなど
JsUnit JsUnit - Slideshare
JSUnitの解説。JUnitとJSUnitの違い、利用方法、仕組みなど
Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit - Slideshare
大規模なJavaScriptアプリケーションを開発する方法論、ライブラリなど

あわせて読みたい

JavaScript Web技術

Publickey広告




タグクラウド

クラウド
AWS / Azure / Google Cloud
クラウドネイティブ / サーバレス
クラウドのシェア / クラウドの障害

コンテナ型仮想化

プログラミング言語
JavaScript / Java / .NET
WebAssembly / Web標準
開発ツール / テスト・品質

アジャイル開発 / スクラム / DevOps

データベース / 機械学習・AI
RDB / NoSQL

ネットワーク / セキュリティ
HTTP / QUIC

OS / Windows / Linux / 仮想化
サーバ / ストレージ / ハードウェア

ITエンジニアの給与・年収 / 働き方

殿堂入り / おもしろ / 編集後記

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino（jniino）
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
（詳しいプロフィール）

Publickeyの新着情報をチェックしませんか？
Twitterで ： @Publickey
Facebookで ： Publickeyのページ
RSSリーダーで ： Feed

最新記事10本