javascriptで編集されたHTMLのソースの確認方法について

質問

お世話になります。
JavaScriptで編集したHTMLコードのソースコードを確認する方法をご存知の方いらっしゃいましたら、ご教授いただけると幸いです。
よろしくお願いします。
【実施例(抜粋)】
-main.html-
<script src="test.js" type="text/JavaScript"></script>
<div id="display"></div>

-test.js-
BHTML='動的に編集されたHTML';
$('display').innerHTML = BHTML;

上記のようなことをやろうとしているのですが、BHTMLの内容を動的に編集しており、バグの修正のために、ブラウザー上で実際にどのようなソースコードになっているのかを確認したいと考えています。
ブラウザーのソース表示機能を使用した場合、<div id="display"></div>に表示された内容のソースは表示されないようなのです。何か良い方法がありましたら、ご教授のほどよろしくお願いいたします。

回答No.4

arenani_sorenani · ベストアンサー

ブックマークレットです。
実行後のページのアドレスバーに以下の記述をコピー＆ペーストしてenterを押してみください。
現在の状態のソースを書き出します。

javascript:document.write('<xmp>'+document.documentElement.innerHTML+'<\/xmp>');

.

お礼

ご回答をありがとうございます。
こんなすごい方法があったとは、使ってみて感激してしまいました。
Webアプリケーション開発の奥深さを痛感しました。
勉強になりました。
ありがとうございました。

回答No.3

yambejp

firefoxのツールfirebugのinspect機能を使えば生成されたソースを
htmlとして解釈して表示させられます。
ただ、自分がいれていないタグなどもご丁寧につけてくれるので
厳密に記入漏れなどをチェックすることはできませんが
firebug自体がデバッガなので、エラー箇所を細かく検証する
ことでなんとかなると思います

お礼

ご回答をありがとうございます。
私はIEを使用しているので、
この方法は使えませんでしたが、
firefoxにはこういう便利な機能があるのですね。
すばらしいです。勉強になりました。
ありがとうございました。

回答No.2

suzuki-_-

> <script src="test.js" type="text/JavaScript"></script>
> <div id="display"></div>

恐らく実際は逆になるだろうと思います(読み込み後実行でなければ)
<div id="display"></div>
<script src="test.js" type="text/JavaScript"></script>

とりあえずそれは前置きとして、いくつか考えられます

■例1 divではなくtextarea にしてしまう
html側
<textarea id="display" style="width:400px;height:10em;"></textarea>

js側
BHTML='<p>動的に編集されたHTML</p>';
document.getElementById('display').value = BHTML;

■例2 innerTextを使用(Mozilla系不可)
html側
変更なし

js側
BHTML='<p>動的に編集されたHTML</p>';
document.getElementById('display').innerText = BHTML;

■例3 タグに使われる < を置換してしまう
html側
変更なし

js側
BHTML='<p>動的に編集されたHTML</p>';
while(BHTML.indexOf("<", 0) >= 0){
BHTML=BHTML.replace("<","&lt\;");
}
document.getElementById('display').innerHTML = BHTML;

お礼

ご回答をありがとうございます。
いろいろな方法をありがとうございます。
勉強になりました。
ありがとうございました。

回答No.1

ANASTASIAK

alert($('display').innerHTML)
とか？

お礼

ご回答をありがとうございます。
こんなに簡単に解決できるのですね。
勉強になりました。
ありがとうございました。