Companion.JS
Companion.JS はIE上で動作するJavaScriptデバッガです
概要
JavaScriptの実行時エラーをハンドリングし、エラー内容の詳細をコンソールに
表示します
また、エラー時に表示されるコンソールでは、FireBugのようにJavaScriptの実行
やデバッグに役立つAPIなども利用できます
ダウンロード
My DebugBar | CompanionJS / HomePage
インストール
IEを全て終了させた状態にて install.exe をクリック
※ Companion.JS を利用するには、Microsoft Script Debugger のインストール
が事前に必要です
動作時イメージ
JavaScriptの実行時エラー発生時に、画面上部に以下のようなツールバーが表示される
error/log リンクを選択すると、画面下部にコンソールが起動する
Console を押下すると、スクリプト実行コンソールに切り替る
デバッグ機能を一時的に無効化するには
のアイコンを押下し、オプションを選択後の以下の画面にて
Disable JavaScript Debuggerにチェックを入れます
再度デバッグ機能を有効にする際は
IEメニュー、表示＞エクスプローラーバー＞Companion.JS
を選択してコンソールを起動して、Companion.JSのオプションを設定し直します
コンソールAPIについての詳細は以下を参考
My DebugBar | CompanionJS / ConsoleAPI
ASP デバッグ環境の構築
ASPを仕事で使い始めたころ、真っ先に思ったのが
ASP のフリーの開発統合環境はあるのか？
EclipseのプラグインでVBScript支援はないのか？
といった疑問でした。
随分と長い時間をかけて調査しましたが
結果は「そんなもの存在しない」でした。
しかし、デバッグツールの存在に気がついた時は、
もっと早く出会いたかった
そんな風に思ったのを思い出します。
○ASP デバッグ環境の構築
サーバ側(IIS)のVBScriptのデバッグには Script Editor が利用できます。
- Script Editorのインストール
Script Editor は MS Office の付属ツールです
つまり、MS Office をインストールしている場合は既にインストールされている可能性があります
試しにMS Excel を起動して、ツール＞マクロ＞Microsoft Script Editor
を選択してみましょう
インストールがされていない場合は、警告のダイアログが表示されるので
指示に従って追加インストールを行います(MS Office のCDが必要)
※MS Office を持っていない方はMicrosoft Script Editor は利用できません
- IIS設定
IISを起動
[ローカルコンピュータ]-[Webサイト]-[既定のWebサイト]のプロパティを開く
[ホームディレクトリ]タブを選択し[構成]ボタンを押下し[デバッグ]タブを選択
[デバッグのフラグ]の[ASPのサーバ側のスクリプトのデバッグを有効にする]をチェック
- IE環境設定
IEを起動して[ツール]-[インターネットオプション]-[詳細設定]の
[スクリプトのデバッグを使用しない]のチェックを外す
- ユーザーアカウントの設定
[ユーザーアカウント]の[詳細設定]タブを選択[詳細設定]を開く
[ローカル]-[グループ]の[Administrators]に[IWAM_マシン名]を追加する
- DCOM構成設定
[管理ツール]-[コンポーネント サービス]-[DCOM構成]を開き
[Machine Debug Manager]のプロパティを開く
[セキュリティ]タブを選択
各アクセス許可は[カスタマイズ]を選択し、[編集]にて[Administrators]を追加してフルコントロールを付与
※「IUSR_<コンピュータ名>」は匿名アクセスのために使われるアカウント
「IWAM_<コンピュータ名>」はIISの起動用のアカウント
IISをインストールすると自動的に作成される
[Microsoft Script Editor]についても同様の設定を行う
- LocalServer32 の変更
※XPのみ不具合が発生する場合必要
レジストリエディタを開きLocalServer32値のデータを
Officeインストールディレクトリ配下の[mse7.exe]に変更
- Script Editorの設定
Microsoft Script Editorを起動(上記exeを実行)
[ツール]-[オプション]-[デバッグ]-[JITの設定]を開き
[アタッチを有効にする]/[JITデバッグを有効にする]をチェック
○サーバ側のVBScriptのデバッグ
IEよりアプリケーションを開始
Microsoft Script Editorを起動
[デバッグ]-[プロセス]からワーカープロセスを選択して[アタッチ]ボタン押下
プロセス名：inetinfo.exe
タイトル：Microsoft Active Server Pages
※見当たらない場合システムプロセスを表示にチェック
[デバッグするプログラムの種類を選択]でScriptをチェックして[OK]ボタン押下
[デバッグ]-[ウィンドウ]-[実行中のドキュメント]を開き、
デバッグ対象のソースを開き、ブレークポイントを設定
IEよりデバッグ対象のページを呼び出すとブレークポイントでプログラムの実行
が停止する
○クライアント側のJavaScriptのデバッグ
- IEより起動する方法
IEよりアプリケーションを開始しデバッグ対象ページを開く
IEの[表示]-[スクリプト デバッガ]-[開く]を実行し可能なデバッガを選択して
[サーバ プロシージャ コールにステップ イン]でScriptを選択して[OK]ボタン押下
[実行中のドキュメント]にソースが表示されるのでブレークポイントを設定する
- Script Editorよりアタッチする方法
IE のメニューが利用できない場合などはこちらの方法にて同様にデバッグが可能
[デバッグ]-[プロセス]のワーカープロセスの選択で以下のプロセスを指定
プロセス名：IEXPLORE.EXE
タイトル：デバッグ対象のページタイトル
以降はサーバー側と同様の手順を行う
DebugBarの設定
DebugBarはIEのWEB開発用ツールバー/エクスプローラーです
IE版のFireBugといったところでしょうか
(残念ながらブレークポイントで止める、みたいなことはできません)
主な機能
- DebugBarツールバー
- ブラウザ画面のキャプチャをメール送信
- カラーピッカー
- 特定の画面解像度にリサイズ
- ページの表示拡大/縮小
- ソースコードをハイライト表示
- DebugBarエクスプローラーバー
- DOMインスペクタ機能
- HTTPコネクション参照機能
- JavaScript コンソール、スクリプトビューア機能
- ページ情報表示機能
- HTMLチェッカー
ダウンロード
DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer
インストール
IEを全て終了させた状態にて install-debugbar-v5.0.1.exe をクリック
インストーラの指示に従いインストールを終了させる
インストールが終了すると、IEが起動し、DebugBar のサイトが表示されます
DebugBarツールバーを有効にするには
IE メニューの表示>ツールバーにてDebugBarを選択
IEに以下のようなツールバー/エクスプローラーが追加されます
設定
１．日本語表示設定
ツールバー左端のDebugBar ロゴアイコンを押下
Customize the DebugBar を選択
オプション画面が起動するのでLanguageタブを選択し日本語に設定します
設定の反映にはIEの再起動が必要なので、IEを再起動させます
再起動後は、以下のようにメニュー等が日本語化されます
※反映されない場合はIEの全てのウィンドウを閉じて再起動して下さい
２．ホットキーの設定
デフォルトではホットキー(ショートカットキー)が全て無効になっているので
必要であれば、設定を行います
DebugBarロゴアイコンを押下し、DebugBarの設定を選択しオプション画面を起動
ホットキー(ショートカットキー) タブを選択し、ホットキーの無効チェックを外し任意のキーを設定します
利用時イメージ
- DOMインスペクタ機能
- JavaScript コンソール、スクリプトビューア
おまけ
モーダルダイアログのソース表示
モーダルダイアログ使用画面については、残念ながらDebugエクスプローラーなどによる高度な解析は実行できません
(モーダル画面にてショートカットでDebugBerを起動しても、起動もと画面でエクスプローラーが開いてしまう)
しかし、ソースの表示のみ以下の方法により実行できます
１．解析対象のモーダルダイアログ画面を起動する
２．別ウィンドウにてIEのウィンドウを起動する
３．他のIEウィンドウを対象にアイコンを押下
Webブラウザ・スパイ画面が起動するので、解析対象の画面を選択する
これで、モーダルはIDもソースもさっぱり解らない
という状態からは抜け出せるので、ちょっとは幸せになれるかもしれません
※展開後のソースコードは、途中で途切れている場合がありますが、スクロールバーを再度下へドラッグすることによって、続きが表示されます
Air でポップアップウィンドウを作成する
FlexBuilder3 でポップアップウィンドウを実装してみる
○ポップアップウィンドウ用MXMLコンポーネントの作成
まず、作成したいプロジェクトをFlexナビゲーションにて選択し
右クリック＞新規＞MXMLコンポーネントを選択し
新規MXMLコンポーネント作成画面を起動する
作成したいMXMLファイル名を入力し、ベースにTitleWindowを選択する
終了ボタンを押下すると、ポップアップウィンドウ用のMXMLファイルが作成される
○ポップアップウィンドウの設定
・閉じるボタンの表示
作成したポップアップウィンドウコンポーネントのTitleWindowタグに
showCloseButton="true" のように属性を追加する
・閉じた時の処理の実装
ポップアップウィンドウが閉じられた時に実行する処理として
TitleWindowタグのcloseイベントの処理として以下のように記述する
close="PopUpManager.removePopUp(this)"
※要import mx.managers.PopUpManager;
○呼出元画面からのポップアップ起動処理の実装
ポップアップ呼出元画面のボタンコンポーネントのタグに以下を追記
click="PopUpManager.createPopUp(this, PopupWindow)"
※PopupWindowはコンポーネントファイル名と同様のものを記述する
※要import mx.managers.PopUpManager;
以下、起動イメージ
○呼出元画面からのポップアップ画面へのデータの受け渡し
createPopUpにて返されるポップアップ画面の参照オブジェクトを
利用してデータを引渡すことができる
以下、起動元のポップアップ画面起動時の処理
var popup:IFlexDisplayObject = PopUpManager.createPopUp(this, PopupWindow);
IDataRenderer(popup).data = "";
○ポップアップ画面から呼出元画面へのデータの受け渡し
ポップアップ画面のCloseイベントのリスナーを設定することにより取得できる
以下、起動元のポップアップ画面起動時の処理
var popup:IFlexDisplayObject = PopUpManager.createPopUp(this, PopupWindow);
popup.addEventListener(CloseEvent.CLOSE,onClosePopup);
//データ取得処理
public function onClosePopup(e:CloseEvent):void{
var popup:PopupWindow = e.currentTarget as PopupWindow;
//popup.id にてポップアップのコンポーネントにアクセス可能
}
new 演算子の役割
new 演算子を利用すると、関数コンストラクタのインスタンスを生成できる
var obj = new MyFunc("taro",20);
obj.name;//=>taro上記のように new 演算子を利用すると、コンストラクタMyFunc内のthisが
obj に割り当てられる
これは、call apply メソッドを利用した以下の場合と似ている
var obj = new Object(); MyFunc.call(obj,"taro",20); obj.name;//=>taro
new 演算子にてインスタンス作成時は、格納先の変数(オブジェクト)に対して
内部的に上記のような処理が実行されていると予測できる
関数にオブジェクトを割り当てる
call apply を使用すると、任意のオブジェクトを関数に割り当てることができる
function MyFunc(name,age){
this.name = name;
this.age = age;
}
function dispProp(){
for(p in this){
document.write(p+":"+this[p]);
}
}
var obj = new MyFunc("taro",20);
dispProp.call(obj);
//=>age:20
//=>name:taro※オブジェクトの要素一覧が表示される
これはオブジェクトに対して関数式をプロパティとして追加
(メソッドの追加)をした場合と似ている
function MyFunc(name,age){
this.name = name;
this.age = age;
}
var obj = new MyFunc("taro",20);
obj.dispProp = function(){
for(p in this){
document.write(p+":"+this[p]);
}
}
obj.dispProp();
//=>age:20
//=>name:taro上記を実行すると追加したプロパティの
dispProp も要素一覧として表示される点が異なる
