あなたは何を探していますか？
複雑なwebアプリケーションを構築すると、何かが計画通りに動作しなかったという事実に遭遇した可能性があります。 あなたはあなたのコードのバグを探して、インターネット上で問題を解決するための助けを探して何時間も費やしました。 この記事では、デバッグの手間を大幅に軽減し、問題を検出する時間を短縮する、webアプリケーションをデバッグする効果的なテクニックを説明します。
log
まず、一般的に使用されるjavascriptメソッドコンソール。ログ… 指定された変数を使用してコードにメソッドを挿入できます。 コードの実行中に、アプリケーションはコンソールのメソッド内で指定された変数の値を返します。 これは、プログラムが期待値を返すかどうかを確認する最も簡単な方法です。
残念ながら、これはデバッグの非常に効果的な方法ではありません。 このようなアプローチtは、コード実行の進行状況を確認することはできません（コンソールを挿入しない限り）。数行ごとにログを記録しますが、コンソールにスローされるデータの量は読めなくなり、コードが混乱するだけです。)さらに、コードの実行中にアプリケーションがエラーをスローしない場合は、渡された変数のみを返します。
ヒントno.1
あなたは多くのコンソールを持っている場合。ログは名前を文字列と次の変数、例えばconsoleに入れます。ログ（’変数’、変数）。
Chrome DevTools(ソースタブ)
webアプリケーションをデバッグするためのより効率的な方法は、Chrome DevToolsとソースタブを使用することです。 Sourceタブでデバッグを開始する前に、node_modulesをblack boxingに追加する必要があります。 このルールを追加すると、ブレークポイントを通過するときに外部パッケージのファイルが表示されないため、デバッグが困難になります。 Chrome→Blackboxing→Add patternsで設定を開き、そこに/node_modulesを書き込む必要があります。
ブラックボクシングにnode_modulesを追加すると、ソースタブに移動できます。 関数のプロセスをリアルタイムで追跡し、出力を確認したいとしましょう。 ソースタブでCtrl+Oを押し、ソースファイル名を入力します。 次に、興味のあるコード行にブレークポイントを置くと、あなたとあなたはブラウザでプロセスの実行を開始することができます。 選択した行が処理を開始すると、ブラウザはコードの実行を停止します。 以下のスクリーンショットを参照してください。
ご覧のように、ブラウザが停止したコードの現在の行は青い背景を持っています。 右側には、私たちのコマンドセンターがあるバーがあります。 ここに私達の短い導入はあります。
コントロール
バーの上部には、コントロールセクションがあります。 のは、重要な要素に焦点を当ててみましょう。 最初の再開コントロールは、実行されているコードのスコープ内で次のマークされたブレークポイントに移動します。 次の関数呼び出しの2番目の制御ステップは、実行されているコードの次の行に移動します。 最後の非アクティブブレークポイントコントロールは、選択したブレークポイントを非アクティブにします。 これは、多くのブレークポイントが選択されており、すべてのブレークポイントで一時停止せずにしばらくアプリケーションをクリックするときに便利
Scopes
以下にscopesセクションがあります。 スコープにはいくつかのタイプがあります：local（現在実行されている関数）、および私たちがいるスコープに応じたクロージャ（たとえば、現在実行されている関 これらのスコープのそれぞれで、ブラウザはそれらのスコープ内で発生するすべての変数を表示します。
ブレークポイント
最後に説明したセクションはブレークポイントです。 これは、どのブレークポイントとどのファイルにマークされているかを示しています。 チェックボックスを使用して、我々は簡単にそれらを無効にし、再活性化することができます。
2-5
- immutableを使用する場合。jsプロジェクトで、不変をインストールします。js Object Formatterプラグインとブラウザの設定でそれを有効にします。 これにより、不変オブジェクトのデバッグが大幅に簡素化されます。
- immutableを使用しない場合。プロジェクトでjsを使用し、VISUAL StudioコードをIDEとして使用する場合は、Debugger for Chromeをインストールして構成することを強くお勧めします（VSCには不変がありません。jsの書式設定プラグイン）。 これにより、デバッグがさらに簡素化され、コードの変更が高速化されます。
- ソースタブにローカルファイルが表示されない場合は、プロジェクトのソースマップを確認してください。
- ブラウザがブレークポイントで停止すると、コンソールでも変数にアクセスできます。
React Developer Tools
React Developer Toolsも役に立つソリューションです。 このようなツールを使用すると、プロジェクト内のReactツリー構造、状態、およびコンポーネント内の小道具を簡単に表示できます。 ページ内の要素を選択して検査する機能は、特にプロジェクト全体がわからない場合には強力です。 それはあなたが更新する必要があるコンポーネントを見つけるのに役立ちます。
ヒントno.6
vueを使用している場合。js、あなたはVueを使うことができます。js開発ツール。 この拡張機能には、同様の機能とVuex（reactのreduxに相当するもの）へのアクセスがあります。プロジェクトでReduxを使用する場合は、Redux DevToolsが必須です。 このようなソリューションを使用すると、アクションの全フロー、ステータスの変更、ペイロードを追跡し、各アクションが実行された後に現在のストアを 私たちが想定しているように何かがうまくいかず、コード内ですべてがうまく見える場合は、どのアクションがどのペイロードでディスパッチされているかを検討する価値があります。 時には、上記のアクションから定数をコピーしたり、値を変更せずに名前を変更したり、まったく異なるものを呼び出すなどの単純な間違いがあります。 以下は、最も重要なRedux DevTools関数を示すgifです。
ヒントno. 7
アプリケーションが多数のアクションを実行する場合、その多くのアクションを処理するためのメモリが不足しているため、拡張機能が正常に機 拡張オプション（この場合はmaxAgeオプション）で設定を試すことができます。)
Fiddler
最後に紹介したいツールはFiddlerです。 このツールは、ネットワークトラフィックを管理するために作成されました。 これは、いくつかの本番バグがあり、本番データを下位環境にコピーしてローカルでデバッグすることができない場合に非常に便利です。 このような状況では、ローカル環境の本番データにアクセスするために、自動応答タブでトラフィックを設定します。 ページを開くと、サーバーからjsファイルをダウンロードする代わりに、Fidlerはローカルで構築された本番ファイルを接続します。 詳細なデバッグは、chrome dev toolsのソースタブで行われます。 以下は、トラフィックをローカルファイルにリダイレクトする設定のスクリーンショットです。 プログラムはまた、モックエンドポイントを可能にします。
ヒントno.8
エンドポイントのモックを簡単かつ迅速に作成したい場合は、モックムーンプログラムを使用できます。
webアプリケーションのアジャイルデバッグの概要
私たちの多くにとって、webアプリケーションをデバッグするプロセスは、頭痛とコンピュータの前で費やされる長い時間に関連しています。 ただし、適切なツールとノウハウがあれば、このプロセスを短縮してより快適にすることができます。 多くの場合、彼らはあなたの指先にあり、無料です。 私たちはあなたと私たちが毎日使用する最も重要で便利なツールを共有しました。