Shellによるデバッグのテスト。 - Ajaxでエロゲーを作るブログ

[JavaScript][XML][ゲーム]Shellによる

　コメントで教えて頂いたものを使ってみました。

Web Development Bookmarklets

　使用方法は以下の通り。

まず一番上の「Shell」の上で右クリックして、「このリンクをブックマーク」でブックマークに追加。
JavaScriptを動作させるページを開いて、さっき登録した「Shell」ブックマークを選択。するとコンソールが開く。
scope( 変数 );で変数の型が分かる。
props( 変数 );でメソッドとフィールドの一覧を取得できる。

　というわけで、これを使って、XMLの中身を見てみました。

サンプル：Shellによるデバッグのテスト。

　まず、あらかじめ対象の変数をグローバル変数にもコピーするようにしておきます。

test.js

// デバッグ用。
var debugAjax = null;

// ...

function next( imageObjId, textObjId )
{
	// XMLHttpRequestを取得します。
	var ajax = createXMLHttpRequest();
	// デバッグ用の方にセットします。
	debugAjax = ajax;

　XMLの方はこう。

00000000.xml

<?xml version="1.0" encoding="UTF-8" ?>
<pages>
	<page>
		<image>a.jpg</image>
		<text>恋歌：デバッグってなに？</text>
	</page>
</pages>

　そうしたら、このページで一回[▽]をクリックしてから、ブックマークの「Shell」を選択、開いたウィンドウで次のように試してみました。

scope( debugAjax );
Scope is now [object XMLHttpRequest]. If a variable is not found in this scope, window will also be searched. New variables will still go on window.
scope( debugAjax .responseXML );
Scope is now [object XMLDocument]. If a variable is not found in this scope, window will also be searched. New variables will still go on window.
scope( debugAjax .responseXML.getElementsByTagName( "page" ) );
Scope is now [object HTMLCollection]. If a variable is not found in this scope, window will also be searched. New variables will still go on window.
scope( debugAjax .responseXML.getElementsByTagName( "page" )[0] );
Scope is now [object Element]. If a variable is not found in this scope, window will also be searched. New variables will still go on window.
debugPage = debugAjax .responseXML.getElementsByTagName( "page" )[0];
[object Element]
scope( debugPage );
Scope is now [object Element]. If a variable is not found in this scope, window will also be searched. New variables will still go on window.
scope( debugPage.getElementsByTagName( "image" )[0] );
Scope is now [object Element]. If a variable is not found in this scope, window will also be searched. New variables will still go on window.
debugImage = debugPage.getElementsByTagName( "image" )[0];
[object Element]
scope( debugImage );
Scope is now [object Element]. If a variable is not found in this scope, window will also be searched. New variables will still go on window.
scope( debugImage.childNodes );
Scope is now [object NodeList]. If a variable is not found in this scope, window will also be searched. New variables will still go on window.
scope( debugImage.childNodes[0] );
Scope is now [object Text]. If a variable is not found in this scope, window will also be searched. New variables will still go on window.

　これとDOMのリファレンスを比較。

Document Object Model (DOM) Level 2 Core Specification

　前回は、debugImageから直接中身をなんで取れないのかと思ったけど、こういうことかな。

まず「debugImage.childNodes[0]」とすることで<image>タグの「最初の子ノード」として<image>a.jpg</image>の「a.jpg」の所を取り出す。
取り出した「a.jpg」の所は、一応子ノードなのでNodeインターフェイス。
でも実際にはText型で、Text型の場合にはnodeValueで該当する文字列を取得できる（リファレンスの「Interface Node」の表を参照）。
なので、これで"a.jpg"という文字列が取得できる。

　ということかな。
　ようするに、<tag>AAAAA</tag>という場合に、"AAAAA"は「<tag>の値」として取り出さず、まずその子ノードとして取得して、それがText型だから文字列として取得する、という感じかな。
　ややこしいけど、分かっちゃえばそんなでもないか。