どこまでできる？ 無料ツールでWebサイト作成（4）

JavaScript開発ツールの本命！ FirebugとAptana

株式会社 セカンドファクトリー
新谷剛史
2007/11/16

ぜひとも活用したい「コンソール」と「スクリプト」画面

　すでにFirebugをお使いの読者がFirebugでのJavaScript開発の際に特に便利だと感じるのは、「コンソール」と「スクリプト」画面ではないだろうか。

■ ロード時のバグがリストアップされる「コンソール」画面

　まずは、コンソール画面。この画面を表示しておくと、ロード時のバグがリストアップされる。

　例えば、図3はサンプルソースに「n5 =/ 1000;」という誤った構文を含めた状態でロードさせたものだが、「unterminated regular expression literal」というメッセージとともにその内容が表示されている。

■ ソースコードのエラー該当部分が分かる！

　また、エラー表示部分（図3の場合は、n5 =/ 1000;部分）をクリックすると、「スクリプト」ウィンドウに表示が切り替わり、該当個所がハイライト表示され、ソースレベルでのエラー確認が可能になっている。

図3　「コンソール」でエラーを表示した例（画像をクリックすると拡大します）

■ 実行途中で新たなJavaScriptを記述して実行できる！

　また、コンソール右下のをクリックすると、右側に新たなエリアが表示される。下部には「実行」「消去」「コピー」という文字ボタンが表示されているのだが、何と、この画面内へJavaScriptを直接記述し実行させることが可能なのだ。

　試しに、ヘッダーのトピックパス部分を「display:none」とするスクリプトを記述し実行してみると、図5・図6のようにスクリプトが実行されることが確認できる。このように、エラーチェックと開発を簡単に行うことが可能である。

実行したJavaScriptのコード

document.getElementById("topicpath").style.display = "none"

図4　JavaScriptをコンソール内で実行させることも可能（実行前）（画像をクリックすると拡大します）

図5　JavaScriptをコンソール内で実行させることも可能（実行後）（画像をクリックすると拡大します）

■ ブレークポイントを置いてステップ実行でデバッグできる「スクリプト」画面

　続いて、「スクリプト」画面。JavaScriptのデバッグ機能として、ソースコード側の変更を行うことなくブレークポイントを設定することが可能になっている。ブレークポイントの設定方法も簡単で、コンソール画面右側の行数部分をクリックすることでブレークポイントの設定と解除ができる。ブレークポイントの削除は右側のエリアで行うことも可能だ。

図6　ブレークポイントの設定（画像をクリックすると拡大します）

■ 変数の値を「監視」できる！

　また、「監視」タブに切り替えると、さまざまな情報を確認できる。監視点として変数を指定してモニタリングさせることも可能だ。ブレーク後の動作はウィンドウ右上の部分で操作できる。

図7　変数をモニタリングできる（画像をクリックすると拡大します）

■ 条件付きブレークポイントも設定可能！

　ブレークポイントは単純な行指定だけではない。その行を右クリックし「ブレークポイントの状態を編集」をクリックすると、例えば「n2<40」のように、ある条件を満たすときにブレークさせることも可能だ。これらの機能により、開発の際にどこに問題があるのかを把握し、修正方法を簡単に確認できるのである。

　ちなみに、部分に「#100」など、行番号を入力すると、その行へジャンプすることも可能である。

　前回紹介した機能と併用して、リッチかつ正確なコンテンツの制作に取り組んでほしい。

　次ページでは、Aptana STUDIOについて解説しよう。

1-2-3

INDEX
どこまでできる？ 無料ツールでWebサイト作成（4） JavaScript開発ツールの本命！ FirebugとAptana
	Page1 ついに「Aptana STUDIO」がリリース JavaScriptの開発環境としてのFirebug 今回は画像の透過設定をするサンプルで検証
	Page2 ぜひとも活用したい「コンソール」と「スクリプト」画面
	Page3 Aptana STUDIOは無償版と製品版の2つ 次回はCSSデザイン用ツールについて

リッチクライアント＆帳票 全記事一覧へ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）