目次
備考: この記事は私が仕事や勉強でよく使っている方法のほんの一部です。あなたの「食欲」に合わないものがあれば、スプレーしないでください。コメント欄に新しい方法を提供して、一緒に学ぶことができます！！！
第 1 章 はじめに
理由: フロントエンドにはバグが何度も存在します。なぜそう言えるのかというと、フロントエンドで使用するものが複雑で、一部のバグは特定の状況下でのみ発生するため、時限ソリューションは必要ありません。さまざまなコンポーネント、さまざまなメソッド、ネイティブ JS、データ型、データ取得のタイミング、論理構造、レンダリング層などが最終的な問題になります。では、どうやって問題を特定すればよいでしょうか? 次に、私の解決策をいくつか見てみましょう。あなたも初心者であれば、何かを得ることができるかもしれません。！
第2章 バグの解決方法
2.1 百度
笑わないでください。Baidu はプログラマーのためのツールでもあります。Baidu で報告されたエラーを検索できます。同じような状況を経験した人はいるはずです。そのため、問題が発生した場所を大まかに特定できます。
2.2 ヨウダオの翻訳
なぜ Youdao 翻訳を使用するのですか? Baidu の結果が役に立たない場合があるため、バグを確認しやすいように、バグを確認する前にエラー レポートの一般的な意味を理解しておく必要があります。
2.3 デバッガ
中断し たいコードの後にデバッガを作成し、ブラウザでコードをデバッグし、段階的にデバッグしてから、コードのロジックを確認して質問します (個人的には、この方法は初心者にはお勧めしません) 、忍耐が必要です。デバッグプロセス中に低レベルのコードを入力すると途方に暮れますが、それも方法です）
- 破壊したいコードの後にデバッガを記述します
- ブラウザ上で実行します。ブラウザの更新に注意してください
コードの実行順序に注意してください。
2.4 console.log ログの出力
この方法は、初心者にとっても、数年間働いている人にとっても、バグを解決するための非常に便利でフレンドリーな方法です。結果を出力することで、問題が発生しているコード ロジックのポイントとブロックを特定できます。console.log のログを印刷する習慣を身につけましょう。ソフトウェアのリリース時に削除するのは面倒ですが、非常に使いやすいです。
例：
2.5 リクエストボディにパラメータが含まれるかどうか
前のメソッドは基本的にフロントエンド自体を対象としています。このメソッドはバックエンドとの接続を対象としています。パラメータを渡すときは、リクエスト ヘッダー、リクエスト本文、および Content-Type を運ぶ必要があります。これらのパラメータをすべて伝えてエラーを報告すると、それがバックエンドの問題かどうかがわかります。
- まず使用されるモジュールを理解する
- 応答ヘッダーをマスターする (理解ボックス内のこれらのいくつかの項目で十分です)
- リクエストヘッダーをマスターする (理解ボックス内のこれらのいくつかの項目で十分です)
- 負荷 (つまり、リクエストによって運ばれるパラメータ) を確認する方法をマスターする
- プレビューと応答はどちらもバックエンドから返されるデータです (どちらか一方を見てください)
応答データを使用する場合、バックエンドによって返されたデータ構造を確認するためのリンクを提供すると非常に実用的です。
- 知っておく必要があるいくつかのリクエスト データ エラー ステータス コード
200: これは最も一般的なステータス コードの 1 つで、アクセスの成功を示します。
301: 永続的なリダイレクト (要求されたリソースが新しい場所に永続的に移動され、パスが再配置されています)
302: 一時的なリダイレクト
401: 無許可
403: アクセスが拒否されたことを示します。ページには、ユーザーが特定のアクセス権限を持っている必要があります (ログイン後のみ)
404: リソースが見つかりません
405: メソッドはサポートされていません。サーバー リストにリクエスト メソッドが含まれていません
。 500: 内部サーバー エラー、通常はサーバー エラーです。
----- 詳細は他の記事をご覧ください
AJAX とその関連ナレッジ アプリケーション (非常に詳細)_ajax ミドルウェア_❆VE❆ のブログ-CSDN ブログ
2.6 ページレンダリングコードに注釈を付ける
全体として、この方法は面倒です。つまり、報告されたエラーが特に明らかではない場合、または内部コンポーネントのエラーである場合、肉眼では対応するコンポーネントを見つけることができません。この時点で、ページ関連のコードをすべて配置します ( html) すべてをコメントアウトすると、間違いなくエラーが報告されなくなります。その後、親要素から子要素の表示まで、各ページ ブロックを段階的に展開します。兄弟要素は影響を受けません。 , 特定の要素を表示するときに、コンソールがエラーを報告する場合、バグはこの要素で使用されているメソッド、または親要素で使用されているメソッドにある可能性があります。レイヤーごとに分析して、どのメソッドがエラーを引き起こしたかを確認しましょう。そしてそれを解決します。
私が出会った例:
この記事を参照してください: [Vue の警告]: コンポーネントのレンダリング関数で無限更新ループが発生する可能性があります_❆VE❆ のブログ-CSDN ブログ
2.7 その他
他にもエラー報告、文字検証、形式検証、判定、コンポーネントエラー報告、データが取得できていないか、ネイティブjsメソッドの設定上の問題などもあり…これらはゆっくり積み上げていく必要があります。
第3章 エピローグ
バグの解決は、1 回や 2 回のクリックで見つけられるものではなく、徐々に問題を見つけて解決していく忍耐力が必要です。私たちはすべてが得意ではありませんが、学習は進んでいます、さあ！！
読者の皆様に何かアイデアがあれば、ぜひコメント欄にメッセージを残してください。！
最後にプログラマの皆さんに一言、「最も素晴らしい光景は我々自身の奮闘の足跡であり、最も誇示すべきは我々が苦労して得た成果である！」ということです。！さあ、坊や！！