|
XPages アプリケーション開発を助けるデバッグの方法について解説します。
|
ShowTable of Contents
サンプルアプリケーションの作成 XPage 「sample.xsp」 の作成 1) 「パネル」コントロールの配置
2) 「ボタン」コントロールの配置
名前: getNameBtn ラベル: 名前取得
イベント: onClick() ①「onclick」をクリックする ②「クライアント」タブを選択する ③「アクションの追加」ボタンをクリックする ①以下のソースコードを記述する ②「OK」ボタンをクリックする
var uName1=window.document.getElementById("#{id:label1}").textContent;
var uName2=window.document.getElementById("#{id:label2}").textContent;
var uName3=window.document.getElementById("#{id:label3}").textContent;
var txt="1: "+uName1+" 2: "+uName2+" 3: "+uName3;
alert(txt);
3) 「ラベル」コントロールの配置 名前:label1 ラベル:山田 太郎
4) 「ラベル」コントロールの配置 名前:label2
ラベル:山田 次郎
5) 「ラベル」コントロールの配置 名前:label3
ラベル:山田 三郎
Webブラウザで確認 1) 以下の画面が表示されること 2) 「名前取得」ボタンをクリックすると、メッセージボックスが表示されること 事前準備 1) 「Firebug」アドオンが追加されているか、「マーク」を確認する 2) 「Firebug」を起動する ①Firebugのマークをクリックする ②Firebug画面が表示されることを確認する 1) ブレーク ポイントを設定する
① JavaScriptを表示するために「スクリプト」タブをクリックする②スクリプトが記載されている「sample.xsp」を選択する ③「1.1. 2)」で入力したコードが表示されていることを確認する ④ブレークポイントを設定したい行の左側をクリックする ⑤クリックした行に「●」が表示されることを確認する 2) 「名前取得」ボタンをクリックしてスクリプトを実行します。 ①「名前取得」ボタンをクリックする ②ブレークポイントで処理が停止し、マークが表示されることを確認する 3) ステップ実行し、変数に値が設定されることを確認する
①ステップインをクリックする ②次の一行に処理が移動することを確認する ③「uName1」変数に値が設定されることを確認する
No | アドオンツール | 概要 | 備考 |
1 | FireCookie | Cookieの内容を表示する |
|
2 | Inline Code Finder | HTML内にインラインで埋め込まれたスタイルシートやイベント処理、JavaScriptを可視化する |
|
3 | FireRainbow | JavaScriptをハイライティングする |
|
4 | CodeBurner | HTMLタグ(要素)のヘルプ機能を追加する |
|
5 | FireQuery | JavaScriptフレームワークのスタンダード的な存在であるjQueryを利用しているWebアプリケーションのデバッグを支援する |
|
6 | FireFinder | XPathを利用したHTMLタグの検索結果を表示する |
|
7 | YSlow | Webサイトの表示速度を計測して問題点を表示する |
|
8 | FireScope | HTML,CSSのリファレンスを追加する |
|
9 | FirePalette | FirebugのCSSパネルにカラーピッカーを追加する |
|
10 | Pixel Perfect | 指定した画像をウェブページに重ねて表示する |
|
リンク集
・「Firefox 3とFirebugで始めるJavaScript開発」
http://gihyo.jp/dev/feature/01/firebug
・「意外と知られていない機能が多い!?Firebugの使い方」
http://h2ham.seesaa.net/article/154387441.html
・「notes/domino liaison」ブログ
http://notesdominoliaison.blogspot.com/2009/12/xpages-http.html
・「Notesサポートのつぶやき」ブログ
http://hnagasim.blog8.fc2.com/?tag=xpages |