JavaScript開発ツールの本命! FirebugとAptanaどこまでできる? 無料ツールでWebサイト作成(4)(2/3 ページ)

» 2007年11月16日 00時00分 公開
[株式会社セカンドファクトリー]

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

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

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

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

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

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

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

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

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

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

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

document.getElementById("topicpath").style.display = "none"
実行したJavaScriptのコード
図4 JavaScriptをコンソール内で実行させることも可能(実行前)(画像をクリックすると拡大します) 図4 JavaScriptをコンソール内で実行させることも可能(実行前)(画像をクリックすると拡大します)
図5 JavaScriptをコンソール内で実行させることも可能(実行後)(画像をクリックすると拡大します) 図5 JavaScriptをコンソール内で実行させることも可能(実行後)(画像をクリックすると拡大します)

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

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

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

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

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

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

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

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

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

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

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

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。