Web フロントエンドにはどのようなデバッグ ツールが使用されますか?

フロントエンドで使用できるデバッグ ツール: 1. Web ブラウザーでの開発ツール (コンソール ステートメント "console.log()" の使用、またはデバッガー ステートメントを使用してコードの実行を一時停止するなど)、2. Postman、デバッグインターフェイスツール、リクエストの調整、レスポンスの分析、問題のデバッグが可能; 3. CSS Lint、CSS コードの問題を見つけるために使用されるツール; 4. Sentry、エラーを監視し、適切なポストを実行するために必要なすべての情報を抽出するために使用できます。 -action アクション; 5. JSHint、JS コード分析および検出ツール。

このチュートリアルの動作環境: Windows 7 システム、Dell G3 コンピューター。

フロントエンド開発に従事している場合は、コードのデバッグが依然として非常に難しいことを理解する必要があります。特に JavaScript では、小さなバグのデバッグに数時間かかることがあります。ブラウザ、オペレーティング システム、デバイスが異なると、エラーが発生することは避けられません。

この記事では主にいくつかのデバッグ ツールをリストします。状況に応じて選択できます。

1. Web ブラウザの開発ツール

最新の Web ブラウザには、アプリケーションをデバッグするための強力なツールが装備されています。たとえば、コンソール ステートメント console.log() を使用し、alert() ポップアップ ウィンドウを使用し、デバッガー ステートメントを使用してコードの実行を一時停止します。これらはデバッグに非常に役立ちます。

ネットワーク インスペクターまたは CSS スタイル インスペクターを使用して、デバッグをより簡単かつスムーズにすることもできます。

最新の Web ブラウザには、アプリケーションのデバッグに役立つ強力なツールが付属しています。 console.log() を使用したコンソール ステートメント、alert() を使用したポップアップ ウィンドウ、またはデバッガ ステートメントを使用してコードの実行を一時停止するなど、単純なものにすることもできます。これらのツールは、デバッグ タスク、特にデバッガー ステートメントに非常に役立ちます。

2、Postman

アドレス: https://www.postman.com/

ほぼすべてフロントエンドアプリケーション JSON 応答とリクエストの送受信の両方。アプリケーションは API をリクエストすることで、認証、ユーザー データ転送、さらには現在地の現在の天気を取得するなどの単純なことさえも、さまざまな操作を行うことができます。

Postman は、インターフェイスのデバッグに最適なツールの 1 つです。 MacOS、Windows、Linux システム上で動作し、REST、SOAP、GraphQL リクエストを直接、迅速かつ簡単に送信できます。

Postman を使用すると、リクエストを調整し、レスポンスを分析し、問題をデバッグできます。これは、問題がフロントエンドにあるのかバックエンドにあるのかが不明な場合に役立ちます。

#3. CSS Lint## アドレス: http://csslint.net/

CSSLint は、CSS コード内の問題を見つけるのに役立つツールです。基本的な構文チェックを実行し、事前に設定された一連のルールを使用してコード内の問題をチェックできます。ルールは拡張できます。

4. JSON フォーマッタとバリデータフォーマットされていない JSON では、それを見つけるのが困難です。構文エラーまたは読みにくいためキー値が正しくありません。 JSON ファイルに改行や空白が欠落している場合、圧縮された JSON ファイルの読み取りとエラーの検出はさらに困難になります。

JSON フォーマットおよび検証ツールを使用すると、圧縮された JSON を挿入するだけで、適切にフォーマットされたバージョンを出力として取得できます。さらに、このツールは RFC 標準に従って JSON を検証できます。

#5.セントリー

## アドレス: https://sentry.io/welcome/ プログラムがどれほど完璧にテストされても、バグは必ず存在します。一部のバグは毎回現れるわけではありません。テスト中に正常に動作したコードも、ユーザーが使用すると動作しなくなる可能性があります。ただし、プログラムがユーザーによって使用されると、 , 目の前でクラッシュが発生した場合、エラーは表示されません。当然、「ログがあるよ」と言うでしょう。しかし、正直なところ、プログラムは毎日、毎時間、大量のログを生成し、それらはさまざまなサーバーに分散されており、複数のサービスを維持している場合、ログの数を確認することはできません。ある日、ユーザーが本当に我慢できなくなって怒鳴る電話をしてきたとき、もう一度ログを探してみると、そのログは実際には役に立たないことがわかります。コンテキストが欠如しており、ユーザーがどのような操作を行ったのかわかりません。例外が発生した、例外が多すぎる（決してログを読んだため）、起動方法がわからないなど。

Sentry は、この問題の解決を支援するためにここにあり、リアルタイムのイベント ログおよび集約プラットフォームです。これは、標準的なユーザー フィードバック ループを使用する手間をかけずに、エラーを監視し、適切な事後アクションを実行するために必要なすべての情報を抽出するように特別に設計されています。

Sentry はクライアントとサーバーに分かれたロギング プラットフォームです。クライアント (現在、クライアントには Python、PHP、C#、Ruby およびその他の言語が含まれています) はアプリケーションの途中に埋め込まれます。プログラムがサーバーにメッセージを送信すると、サーバーはメッセージをデータベースに記録し、簡単に閲覧できる Web プログラムを提供します。 Sentry は Python で書かれており、オープンソース コードで優れたパフォーマンスと容易な拡張を備えており、現在、有名なユーザーには Disqus、Path、mozilla、Pinterest などが含まれます。

#6、JSHint## アドレス: https://jshint.com/

JSHint は、JavaScript コードの分析および検出ツールであり、JS コードのエラーや潜在的な問題の検出に役立つだけでなく、コード開発の標準化にも役立ちます。

JSHint は、JavaScript で書かれたプログラムをスキャンし、一般的なエラーと潜在的なバグを報告します。根本的な問題は、構文エラー、暗黙的な型変換によって引き起こされるエラー、変数のリーク、またはまったく別の何かである可能性があります。

JSHint は、JavaScript で記述されたプログラムをスキャンし、一般的なエラーと潜在的なエラーを報告します。根本的な問題は、構文エラー、暗黙的な型変換によるエラー、変数リーク、またはまったく別の何かである可能性があります。

次はサンプル関数です。これを使用して JSHint の動作を確認します:

7、BrowserStackアドレス: https://www.browserstack.com/

現在、独自のカーネルを搭載したブラウザが増えており、それぞれの機能も大きく異なります。フロントエンド シージ エンジニアとして、さまざまなオペレーティング システムやモバイル プラットフォームでの Web サイトのさまざまなブラウザの互換性をチェックしたい場合、それは非常に面倒です。自分のコンピュータに仮想マシンをインストールしてさまざまな環境を構築し、それを自分のコンピュータに構築して一つ一つテストしている人を見かけますが、結局のところ人間のエネルギーには限界があり、そんなに多くのシステムをインストールすることはできません。同じコンピュータなので、マルチブラウザです。幸いなことに、BrowserStack がリリースされました。これはフロントエンドにとって良いニュースです。

BrowserStack は、Web サイトのブラウザ互換性テストを提供するオンライン クラウド テスト ツールです。これにより、開発者とテスターは多数の仮想マシンや携帯電話シミュレーターを準備する必要がなくなります。

BrowserStack は、Web サイトのブラウザ互換性テストを提供するオンライン クラウド アプリケーションで、9 つの主要なオペレーティング システムで 100 以上のブラウザをサポートしています。ローカル テストと Visual Studio との統合をサポートします。または、http://modern.ie に直接アクセスしてオンラインでテストすることもできます。今すぐ登録すると、3 か月間無料で試すことができます。3 か月後は有料になります。3 か月後に使用したい場合は、使用しないでください。中国の開発者なら、お金は払いたくないでしょう。

8、ホイッスル公式の定義を引用

ホイッスル、ピンイン [wēisƒu]) Node に基づくクロスプラットフォームの Web デバッグ プロキシ ツールです。同様のツールには、Windows プラットフォームの Fiddler が含まれます。主に、HTTP、HTTPS、および WebSocket の要求と応答を表示および変更するために使用されます。また、使用することもできますHTTP プロキシ サーバーとして使用します。ブレークポイントを通じてリクエストの応答を変更する Fiddler の方法とは異なり、Whistle はシステム ホストの構成に似た方法を使用します。すべての操作は構成を通じて実装でき、ドメイン名、パス、正規表現、ワイルドカード、ワイルドカード パスなどのメソッドを使用し、Node モジュールを通じて機能を拡張できます。

一般に、Whistle には次の機能があります。

Node 実装に基づいて、クロスプラットフォーム Web デバッグ エージェント Windows、Linux、Mac
で使用できるツールは、HTTP、HTTPS、WebSocket のリクエストとレスポンスを表示および変更することができ、また、 HTTPプロキシサーバー
whistleはシステムホストの設定と同様の方法を採用しており、全ての操作は設定のみで実現可能です
機能拡張も可能Node モジュール経由

Whistle を選択する理由

まず、Whistle は非常に強力な機能を備えた Web デバッグ プロキシ ツールです。フロントエンドとして、プロトコルのアプリケーション層を扱うことが多く、モックデータ、クロスドメインの問題、Cookie の変更、モバイル端末のデバッグなどはすべて必要なスキルであり、Whistle は問題の 90% を解決できます。質問

私がよく使用するいくつかのシナリオは次のとおりです:

ホストのバインド
置換リクエスト (モックデータ) )
Weinre または vConsole を使用してモバイル ページをデバッグする
Cookie を変更する
スタイルを挿入するinto HTML
Insert script into HTML
...
以下は公式です。写真、誰もがそれを感じることができます

#

第 2 に、非常に強力であることに加えて、非常に使いやすいです。Web ページを開いてパケット キャプチャやその他の操作を実行するために必要なのは、単純なコマンドだけです。

第 3 に、ウィンドウ内の Fidder とは異なります。大量の CPU を消費します。無料ではない Mac 上の Charles とは異なり、無料、オープンソース、クロスプラットフォームの Web デバッグ プロキシ ツールです。

4 番目に、Node モジュールに基づいて実装されています。 。 Node モジュールを介して拡張することもできます。

上記ではまだ納得できない場合は、次の実戦でその威力を実感していただければ幸いです。

(学習ビデオ共有: ウェブフロントエンド）

以上がWeb フロントエンドにはどのようなデバッグ ツールが使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。