おっと、もう一度やった：一般的なJavaScriptエラーのデバッグ

JavaScriptコードを書くのが難しいこともあれば、単に怖いこともあります。これは多くの開発者によく知られています。 その過程で、必然的にエラーが発生し、それらのいくつかはしばしば繰り返されます。 初心者の開発者向けに設計されたこの記事では、これらのエラーとその解決方法について説明しています。 わかりやすくするために、関数、プロパティ、およびオブジェクトの名前は、 人気のある歌から取られています。 これはすべて、一般的なエラーの修正方法をすばやく覚えるのに役立ちます。

「Habr」の読者には、「Habr」プロモーションコードを使用してSkillboxコースに登録すると10,000ルーブルの割引があります。



Skillboxの推奨事項：実践コース「Mobile Developer PRO」 。

TypeError：プロパティが定義されていません

let girl = { name: "Lucky", location: "Hollywood", profession: "star", thingsMissingInHerLife: true, lovely: true, cry: function() { return "cry, cry, cries in her lonely heart" } } console.log(girl.named.lucky)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記のサンプルコードはUncaught TypeErrorをスローします：未定義エラーのプロパティ 'lucky'を読み取ることができません。 問題は、女の子オブジェクトには名前付きプロパティがありますが、名前付きプロパティがないことです。 また、girl.namedプロパティは定義されていないため、正式には存在しないため、アクセスできません。 しかし、girl.named.luckyをgirl.nameに置き換えると、すべてが機能し、プログラムはLuckyを返します。



プロパティの詳細については、 こちらをご覧ください 。

TypeErrorエラーを修正するメソッド

プログラマーが特定のタイプと一致しないデータに対してアクションを実行しようとすると、TypeErrorエラーが発生します。 例として、.bold（）を使用するか、未定義のプロパティを要求するか、実際には関数ではない関数を呼び出します。



したがって、girl（）を呼び出そうとすると、Uncaught TypeErrorエラーが表示されます。実際には、関数ではなくオブジェクトが呼び出されるため、yourVariable.boldは関数ではなく、girlは関数ではありません。



エラーを排除するには、変数を調べる必要があります。 女の子とは何ですか？ girl.namedとは何ですか？ コードを分析するか、console.logを使用して変数を表示するか、デバッガーコマンドを使用するか、またはコンソールで変数名を呼び出すことで確認できます。 変数に含まれるデータ型で操作できることを確認する必要があります。 収まらない場合は、条件またはtry..catchブロックを追加して操作を制御するなど、変更します。

スタックオーバーフロー

Baby One More Timeの歌の作者を信じているなら（これはブリトニー・スピアーズです）、この文脈でヒットする言葉は、歌手が再び呼ばれることを望んでいることを意味します（ここでは、歌の文脈についての説明があります）。 この欲求が実生活での通話数の増加につながる可能性があります。 しかし、プログラミングでは、これは呼び出しスタックがオーバーフローした場合にエラーを引き起こす可能性のある再帰です。



エラーは次のとおりです。



エラー：スタック領域が不足しています（エッジ）

InternalError：再帰が多すぎます（Firefox）

RangeError：最大呼び出しスタックサイズを超えました（Chrome）



開発者が再帰で基本ケースを考慮しなかった場合、またはコードが提供されたケースに対応していない場合、スタックオーバーフローが発生します。

 function oneMoreTime(stillBelieve=true, loneliness=0) { if (!stillBelieve && loneliness < 0) return loneliness++ return oneMoreTime(stillBelieve, loneliness) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、stillBelieveをfalseに設定することはできないため、oneMoreTimeが毎回呼び出されますが、関数は終了しません。



2人の友人を希望し始めた場合、これは孤独（孤独）を軽減し、電話を待つことはできません。

 function oneMoreTime(stillBelieve=true, loneliness=0) { if (!stillBelieve && loneliness < 0) return loneliness-- stillBelieve = false return oneMoreTime(stillBelieve, loneliness) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例として、システムがエラーメッセージを表示せず、JavaScriptコードが実行されるページがフリーズするだけの場合、無限ループの場合があります。 これは、whileループに終了条件がない場合に発生します。

 let worldEnded = false while (worldEnded !== true) { console.log("Keep on dancin' till the world ends") }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のようにして問題を解決できます。

 let worldEnded = false while (worldEnded !== true) { console.log("Keep on dancin' till the world ends") worldEnded = true }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

無限ループと再帰をデバッグする

無限ループに問題がある場合は、ChromeまたはEdgeでタブを閉じ、Firefoxでブラウザーウィンドウを閉じる必要があります。 その後、コードを慎重に分析する必要があります。 問題が見つからない場合は、デバッガーコマンドをループまたは関数に追加し、変数の値を確認する価値があります。 結果が期待どおりでない場合は、交換して、簡単に実行できます。



上記の例では、デバッガーを関数またはループの最初の行として追加する必要があります。 次に、スコープ内の変数を分析して、Chromeでデバッグタブを開く必要があります。 [次へ]ボタンを使用すると、各反復での変更を追跡できます。 これをすべて行うのは簡単で、ほとんどの場合、問題はそうです。



このすべての詳細については、ここ（ Chromeの場合 ）およびここ（ Firefoxの場合 ）を参照してください。

構文エラー

最も一般的なJavaScriptエラーの1つはSyntaxErrorです。 それらを避けて、テキストエディタの拡張を助けてください。 そのため、Bracket Pair Colorizerはコード内のブラケットを異なる色でマークし、Prettierまたは同様の分析ツールを使用すると、エラーをすばやく見つけることができます。 SyntaxErrorの可能性を減らす最良のオプションは、最小限のネストです。



コメントを共有する：間違いを避けるため、または間違いを迅速に検出して排除するために、あなたは何をしますか？

Skillboxの推奨事項：

• 2年間の実践コース「私はPRO Web開発者です。 」
• オンラインコース「C＃Developer with 0」 。
• 実用的な年次コース「PHP開発者0からPRO」 。