システム屋日誌

情報システム構築、開発手法を中心に気が付いたことを書き留めます。ちいさなことから、おおきなことまで。もちろん、どうでもいいことも。。。
<< September 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
 
RECENT COMMENT
RECENT TRACKBACK
れいねっとHP
http://www.rey-net.com
MOBILE
qrcode
PROFILE
無料ブログ作成サービス JUGEM
 
Javascript の デバッグ方法
Javascript はブラウザによって使える機能が異なります。
また、同じブラウザでも、バージョンの違いがあります。
デバッガーはいくつかあるようですが、
ブラウザの進化にあわせてデバッガーを探すことも大変。

そこで、原始的ではありますが、確実に使えるデバッグの方法をご紹介します。

1.alert() 関数を使う

 最も手軽なデバッグ方法です。
 下記のように alert() 関数をソースコードに埋め込みます。
 プログラムの中の変数の値を知ることができます。

-- サンプル ソースコードA (抜粋、全文は下方にあります)-----------------
:
var aisatsu = "HELLO";

alert(aisatsu); // 「HELLO」がポップアップ

:
------------------------------------------------------------------------

 注意点:うっかりループ内に埋め込むと、大変。

  for (i=0;i < 100;i++) {
:
alert ("HELLO!");
:
}
 
 「HELLO!」ダイアログが100回出ます。

2.デバッグ用のテキストエリアを使う

 デバッグのためのフォームを作り、そこに変数の内容を表示する方法です。
 1の方法よりコードの量が増えるので大変ですが、値を変えて何度もテストを行うとき、便利です。
 また、テスト結果のコピー&ペーストもできます。
 
 サンプル ソースコードBは、HTML ドキュメント中のフォームの
送信方法を指定し、指定した送信方法を画面に表示します。

3.利点と欠点
 2つの方法に共通していえることは、デバッグのためのコーディング行が増えることと、
 デバッグが終わったら消す手間がかかるのですが、下記のようなメリットがあります。

 ・デバッガーやツールの使い方を覚えなくてよい
 ・ブラウザやバージョンが異なっても、使える(ただし、あまりバージョンが古いと2は無理ですが)

4.サンプルソースコード

-- サンプル ソースコードA -------------------------------


<html>
<head>
<title></title>
<SCRIPT language="javascript">
<!--
var aisatsu = "HELLO";


alert(aisatsu); // 「HELLO」がポップアップ


-->
</SCRIPT>
</head>
<body>
</body>
</html>


-- サンプル ソースコードB -------------------------------
<html>
<head>
<title></title>
<SCRIPT language="javascript">
<!--
function setMethod ()
{


document.form1.method = 'POST'; // 送信フォーム(form1)の送信方法をセット

document.form2.debug.value = document.form1.method; // デバッグ用のフォーム(form2)に送信方法を書き込む
}
-->
</SCRIPT>
</head>
<body>
<FORM name="form1" method="" action="">
E-mail<INPUT type="text" name="email" />
<INPUT type="button" value="send" onclick="setMethod()" />
</FORM>
<FORM name="form2" method="" action="">
Debug<INPUT type="text" name="debug" value="" />
</FORM>
</body>
</html>

コメント
コメントする









 
トラックバック
この記事のトラックバックURL
http://technology.rey-net.com/trackback/375782