 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] デバッグなど開発効率を上げるための工夫
|
・サイトマップ [Shift-S] |
 |
■ デバッグなど開発効率を上げるための工夫
JavaScriptでの開発効率を上げるために役立つ事柄をまとめてみました。
ブラウザでデバッグ用の指定をする
JavaScriptの実行でエラーが発生した時に
どこでどんなエラーが起きたのか知る必要があります。
コード修正後の再読込みを簡単に
JavaScriptコードをエディタで修正後、
想定どおり動作するかどうか確かめるためにページの再読込みをします。
このとき毎回「戻る」ボタンを押してると面倒なので
「Ctrl-R」や「マウス右クリック＆キーのR」とします。
「KeyNavi」を使ったページでは「Z」や「/」のみでOKです。
各要素の属性情報の取得
各要素にどのような属性があるかはブラウザごと、バージョンごとに
異なる可能性があります。
互換性の高いスクリプトや高度な機能を実現するスクリプトを書くときに
オブジェクトの属性情報が必要になります。
「Ctrl-T」で任意のJavaScript文を実行
ブラウザでエラーが出なくても自分の作ったスクリプトが思った通りに
動いているかどうか気になる場合があります。
そんな場合は「alert()」文で
内部変数にアクセスして想定した値になっているか確認します。
テキストエリアを使った方法
また以下のようなコードをページに埋めこんで利用してもいいでしょう。
<form name='foo'>
<textarea cols=70 rows=5>kl_sla_start();</textarea>
<input type='button' value='■実行' onClick='eval(this.form.elements[0].value); return false;'>
</form>
|
ブラウザでデバッグ用の指定をする |
以下のような操作をしておくとJavaScriptのエラーを拾えるようになり スクリプトのデバッグに役立ちます。
【各ブラウザでのデバッグのための指定】
| IE4-6 | ツール(表示)→インターネットオプション→詳細設定→スクリプトのエラーごとに通知を表示する |
| NS4.x | アドレスバーに「javascript:」と入力 |
| NS6.x | タスク→ツール→JavaScriptコンソール |
| NS7.x / Mozilla | ツール→Web開発→JavaScriptコンソール |
| Opera6-7 | ファイル→設定→マルチメディア→Javaスクリプト |
|
コード修正後の再読込みを簡単に |
Opera6では ページの再読込みを実行しても
外部JavaScriptファイルが更新されません (Opera7は大丈夫です)。
キャッシュをクリアするか JavaScriptソースをブラウザに表示後
確実に再読み込みします。
|
各要素の属性情報の取得 |
「for(var i in e) alert(i+":"+e[i]);」のようにしてもいいですが 何度も「OK」ボタンを押すハメになるので要素の属性リストを取得 のようにしてみて下さい。
|
「Ctrl-T」で任意のJavaScript文を実行 |
KeyNaviを使ったページではオプション「KL_DEBUG=1」指定があると「Ctrl-T」で 任意のJavaScript文を入力して実行できます。 デバッグに役立てて下さい。
この場で実際に「Ctrl-T」を入力してみて下さい。
「alert(変数名)」として変数の値がどうなってるか確認できます。
また「kl_sla_start()」と入力すると自動ナビが始まります。
|
テキストエリアを使った方法 |
【スクリプトテスト用フォーム】
<form name='foo'>
<textarea cols=70 rows=5>kl_sla_start();</textarea>
<input type='button' value='■実行' onClick='eval(this.form.elements[0].value); return false;'>
</form>
以下は上のコードを表示させたものです。
これらの方法ではページ内に直接書き込むのと異なり 任意のタイミングで任意のJavaScriptを実行できます。
注意
上の例のようにスクリプトの実行では「eval(s)」を使います。
但し「eval(s)」では変数の名前空間の問題が生じます。
指定した実行文「s」内で作成したオブジェクトは他のスクリプトから
アクセスできません。明示的に「self["名前"]=オブジェクト」のように
「self(window)」属性に追加する形で実行するとOKです。
＞ 例：「eval('self["myVar"]=kl_tlayer_new("Hello")');」とすると
任意位置のスクリプトで「kl_tlayer_show(myVar)」などと普通に参照可。
|
【JavaScript@Keynavi.Net ：
基本編
】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] デバッグなど開発効率を上げるための工夫
|
・サイトマップ [Shift-S] |