Javascript スクリプトのデバッグ経験_JavaScript スキル

JavaScript でのプログラミングについて詳しく学ぶと、JavaScript が表示する不透明なエラー メッセージが理解できるようになります。よくある間違いを理解すれば、それを回避する方法がすぐにわかるので、エラーの少ないコードを作成できるようになります。

プログラミングは実際には、時間の経過とともに急速に改善され続けるテクノロジーです。しかし、どれだけ熟練したとしても、コードのデバッグには依然としてある程度の時間を費やす必要があります。下調べをしたことがある場合、または JavaScript でのプログラミングの経験がある場合は、デバッグにかなりの時間が費やされることがわかるでしょう。これは正常なことであり、プログラマーがしなければならないことの 1 つにすぎません。実際、多数の調査によると、プログラマーはコード内のバグの解決に平均 50% の時間を費やしています。
重要なのは、プログラムを効果的にデバッグする方法を学ぶことです。プログラムが正常に実行されない理由を解明したり、そもそもバグのあるコードを書かないようにするのに役立つヒントをいくつか紹介します。
1. さまざまな方法で変数を出力します。
2. 監視します。よくある間違いはアウト
3. コーディング前に考える
-------------------------------------- ----- --------------------------------------
JavaScript が間違いを捕らえられない場合、また、コードを見てもエラーが見つからなかった場合は、変数を出力すると役立つ場合があります。最も簡単な方法は、次のようにalert()を使用することです:
// theGreetingはgetNameを使用して名前を取得し、次に表示します
// 名前に応じて1つまたは2つのアラートボックス
// 関数getName ()
{
var first_name = プロンプト("名前は何ですか?","");
var last_name = プロンプト("姓は何ですか?",""); the_name = first_name " " last_name;
アラート("getName では、the_name は: "
}
); ------------ ----------エラーが見つかりました----------- --------------- ------------
1. 一般的なプログラム エラー
エラーのほとんどは、単なる構文エラーです。これらの引用符、中括弧、括弧を忘れずに閉じるには時間がかかることがありますが、幸いなことに JavaScript の自動エラー検出機能がこれらのエラーのほとんどを検出します。ブラウザがより洗練されるにつれて、JavaScript エラー検出機能は改良され続けていますが、それでも一部のエラーはすり抜けてしまいます。注意すべき一般的な間違いは次のとおりです。
2. 変数名または関数名を混同する
変数名や関数名を大文字にしたり複数形にしたりすることによって発生するエラーは、煩わしいほど頻繁に発生し、JavaScript エラー検出機能がそれらを検出できない場合があります。変数や関数の命名規則を確立し、それに従うことで、こうした問題の数を大幅に減らすことができます。たとえば、変数をすべて小文字で定義し、スペースをアンダースコアに置き換え (my_variable、the_data、an_example_variable)、関数 (addThreeNumbers()、writeError() など) に組み込み記号を使用します。変数が複数形かどうかをいつも忘れてしまうので、私は複数形の使用を避けています。
3. 予約語の誤使用
一部の単語は JavaScript ですでに使用されているため、変数名として使用できません。たとえば、「if」という変数は実際には JavaScript の一部であるため定義できません。「if」を使用すると、あらゆる種類の問題が発生します。 「if」という名前の変数に夢中になると、「document」という名前の変数を使いたくなります。残念ながら、「ドキュメント」は JavaScript オブジェクトです。もう 1 つの頻繁に発生する問題は、変数に「name」という名前を付けることです (フォーム要素には「names」属性があります)。変数に「name」という名前を付けることが常に問題を引き起こすわけではありません。問題が発生する場合があり、さらに混乱を招くため、「name」変数の使用は避けるべきです。
残念ながら、ブラウザごとに予約語が異なるため、どの単語を避けるべきかを知る方法はありません。最も安全な策は、すでに JavaScript の一部であり、HTML で使用されている単語の使用を避けることです。変数に問題があり、何が問題なのかがわからない場合は、変数の名前を変更してみてください。成功した場合は、予約語を避けた可能性があります。
4. 論理的な判断を行うときは、必ず 2 つの等号を使用してください
一部のブラウザーではこのエラーをキャッチできますが、一部のブラウザーではキャッチできない場合があります。これは非常によくある間違いですが、ブラウザーがそれを指摘できない場合は、見つけるのが困難です。このエラーの例は次のとおりです:
var the_name = prompt("what's your name?", "");
if (the_name = "the猿")
{
alert(" hello猿!");
} else {
アラート("こんにちは、見知らぬ人。");
}
このコードは、ユーザーがどこにいるかに関係なく、「こんにちは、猿!」という警告ダイアログを生成します。プロンプト 何が問題ですか - これは私たちが望んでいることではありません。その理由は、if-then ステートメントには等号が 1 つしかないためで、これは JavaScript に、あるものを別のものと等しいように指示するものです。プロンプトに「ロボットのロビー」と入力したとします。最初、変数 the_name の値は「robbie the robot」ですが、if ステートメントは JavaScript に the_name を「the Monkey」に設定するように指示します。そのため、JavaScript はコマンドを喜んで実行し、if-then ステートメントに「true」メッセージを送信し、その結果、警告ダイアログ ボックスに毎回「hello Monkey!」と表示されます。このような潜在的な間違いはあなたを気が狂わせる可能性があるため、2 つの等号を使用するように注意してください。
5. 誤って変数を引用したか、文字列
を引用し忘れた私は時々この問題に遭遇します。 JavaScript が変数と文字列を区別する唯一の方法は、文字列には引用符があり、変数には引用符がないことです。以下に明らかなエラーがあります:
var the_name = 'koko the Gorilla';
alter("the_name is very happy");

the_name は変数ですが、プログラムは「the_name はとても幸せです」という警告ダイアログ ボックスが表示されます。これは、引用符で囲まれた何かを JavaScript が認識すると、それを考慮しなくなるためです。そのため、the_name を引用符で囲むと、JavaScript がそれをメモリから検索することができなくなります。このタイプのエラーのあまり明らかではない拡張を次に示します。
Function wakeMeIn3()
{
var the_message = "Wake up! Hey! Hey! WAKE UP!!!!"; alert(the_message);", 3000);
}
ここでの問題は、JavaScript に 3 秒後にalert(the_message) を実行するように指示していることです。ただし、関数を終了したため、3 秒後には、_message は存在しなくなります。この問題は次のように解決できます:
function wakeMeIn3()
{
var the_message = "Wake up!";
setTimeout("alert('" the_message "');", 3000) ;
}
the_message を引用符の外側に置くと、コマンド「alert('Wakeup!');」が setTimeout によってスケジュールされ、必要なものが得られます。これらは、コード内で問題を引き起こす可能性のある、デバッグが難しいバグの一部にすぎません。それらが見つかったら、それを修正するためのより良い方法とより悪い方法があります。私の経験や失敗から恩恵を受けることができるので、あなたは幸運です。
--------------------------------エラーをクリア--------------- -----------------------
エラーを見つけることは、難しい場合もありますが、最初のステップにすぎません。次に、エラーをクリアする必要があります。エラーをクリアするときに行うべきことは次のとおりです。

まずプログラムのコピーを作成します
一部のエラーはクリアするのが困難です。実際、バグを根絶しようとすると、プログラム全体が壊れてしまうことがあります。たった 1 つの小さなバグで気が狂ってしまうのです。デバッグを開始する前にプログラムを保存することは、バグが悪用しないようにするための最良の方法です。
一度に 1 つのエラーを修正します
複数のエラーがあることがわかっている場合は、1 つを修正し、結果を確認してから、次のエラーを開始する必要があります。作業を検証せずに一度に多くのエラーを修正すると、さらなるエラーを招くだけです。
紛らわしいエラーに注意してください
エラーがあることはわかっていても、その理由が実際にはわからない場合があります。変数「index」があるとします。何らかの理由で、「index」は常に予想より 1 小さいとします。 2 つのうちの 1 つを行うことができます。しばらくそこに座って、サイズが小さくなった理由を理解するか、「index」を使用する前に 1 を追加して先に進むかです。後者のアプローチは難読化プログラミングと呼ばれます。 「一体、なぜインデックスが 3 ではなく 2 なのでしょうか? そうですね... 今すぐ動作させて、後で修正するつもりです。」と考え始めるとき、あなたはテープに包帯を巻いています。
難読化されたプログラミングは短期的には機能するかもしれませんが、長期的には破滅する可能性があります。実際にバグをクリーンアップできるレベルまでコードを完全に理解していないと、そのバグが戻ってきて悩まされることになります。 。それはあなたが修正できない別の奇妙なバグとして戻ってくるか、あるいは次に哀れな今いましい魂があなたのコードを読んだときに、彼は理解するのが非常に難しいと感じるでしょう。
小さなバグを探します
コードをカット アンド ペーストする機能は、プログラマーにとって好ましくない場合があります。通常、関数内に JavaScript コードを記述し、それを別の関数に切り取って貼り付けます。最初の関数に問題があった場合、今度は両方の関数に問題が生じます。コードをカットアンドペーストしてはいけないと言っているのではありません。しかし、バグには増殖する方法があり、1 つのバグを見つけたら、それに似た他のバグを探す必要があります。 (または、複数のバージョンを作成する前に、何が予想されるかを正確に知っておいてください。) 変数名のスペルミスは、JavaScript コードの一部で何度も発生します。1 か所で teh_name の代わりに the_name のスペルを間違えると、別の場所でそれを見つける可能性があります。 。 間違い。
他のすべてが失敗した場合
あなたがそこに座ってエラーを見つめていて、何が起こっているのか理解できない場合 (または、エラーがまったく表示されないが、プログラムが原因でエラーがあることはわかっている場合)が正しく実行されません)、コンピュータから離れたほうがよいでしょう。本を読みに行ったり、角を散歩したり、美味しい飲み物を飲みに行ったり、何か何でもいいですが、プログラムや問題については考えないでください。このテクニックは状況によっては「醸造」と呼ばれ、非常にうまく機能します。休憩してリラックスしたら、もう一度間違いを見つけてください。より鮮明な画像が得られます。醸造がうまくいくのは、精神的な混乱から解放されるからです。間違った道を進みすぎると、引き返せなくなってしまうこともあります。この場合、新しいパスを作成するのが最善です。これは腹立たしいことだと思いますが、効果はあります。本物！
上記の方法がうまくいかない場合は...
他の人に助けを求めてください。時々、あなたの考え方が固定観念になってしまい、違った見方をすることによってのみ問題への洞察が得られることがあります。構造化プログラミング環境では、プログラマーは定期的に互いのコードをレビューします。これは「コード レビュー」と適切に呼ばれ、エラーを排除するだけでなく、より良いコードを作成することにも役立ちます。他の人に自分の JavaScript コードを見せることを恐れないでください。そうすることで、より優れた JavaScript プログラマーになれます。

しかし、エラーをなくすための絶対的な最善の方法は...
まず最初にエラーのないコードを作成します。
--------------------------------エラーのないコードを作成する---------- ----------------------------
上手にプログラミングするための鍵は、プログラムはコンピューターのためではなく人間のために書かれるということです。他の人があなたの JavaScript を読む可能性があることを理解できれば、よりきれいなコードを書くことができるでしょう。コードが明確であればあるほど、間違いを犯す可能性は低くなります。賢いコードは素晴らしいですが、バグを生み出すのはこの賢いコードです。最も良い経験則は KISS (Keep It Simple, Sweetie) です。もう 1 つの役立つテクニックは、コードを記述する前にコメントすることです。これにより、行動する前に考える必要が生じます。コメントを記述したら、その下にコードを記述できます。
以下に、この方法で関数を記述する例を示します。
ステップ 1: コメントを記述する
ステップ 2: コードを入力
最初にコメントを記述するというこの戦略は、コメントを書く前にコメントを記述することを強制するだけではありません。コードを書く 考えてコーディング プロセスを簡単に見せる - タスクをコーディングしやすい小さな部分に分割することで、問題はエベレストではなく、心地よく起伏する丘のグループのように見えます。
最後に... 各ステートメントは常にセミコロンで終了します。
厳密に必須ではありませんが、各ステートメントをセミコロンで終了する習慣を身につけて、その行の後にコードが存在しないようにする必要があります。セミコロンを忘れると、正常なコードの次の行で突然エラーが発生します。特別な理由がない限り、変数を「var」に初期化してください。 「var」を使用して変数をローカライズすると、ある関数を別の無関係な関数と混同する可能性が減ります。
さて、コーディング方法はわかったので、
JavaScript を高速に実行する方法を学びましょう。 >>
------------------------------------------- ----- ----------------
速度に応じて JavaScript コードを最適化します
1. ループ内のワークロードを制限します
2. if- をカスタマイズしますthen-else ステートメントを最も可能性の高いシーケンスに変換します
3. 繰り返しの式を最小限に抑えます