検索
ホームページウェブフロントエンドフロントエンドQ&AWeb フロントエンドにはどのようなデバッグ ツールが使用されますか?

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

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

このチュートリアルの動作環境: 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 を使用すると、リクエストを調整し、レスポンスを分析し、問題をデバッグできます。これは、問題がフロントエンドにあるのかバックエンドにあるのかが不明な場合に役立ちます。

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

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

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

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

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

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

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

#5.セントリー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
什么是web前端工程师什么是web前端工程师Aug 23, 2022 pm 05:10 PM

web前端工程师是从事Web前端开发工作的工程师,主要工作是进行网站的开发、优化、完善;主要职责是利用各种专业技术进行客户端产品的开发,然后结合后台开发技术模拟整体效果,为网站上提供的产品和服务实现一流的Web界面,优化代码并保持良好兼容性,致力于通过技术改善用户体验。

web前端有哪些框架web前端有哪些框架Aug 23, 2022 pm 03:31 PM

web前端框架有:1、Angular,一种用于创建单一应用程序界面的前端框架;2、react,一个用来构建用户界面的JavaScript开发框架;3、vue,一套用于构建用户界面的渐进式JavaScript框架;4、Bootstartp,是基于HTML、CSS、JavaScript的前端框架;5、QUICK UI,一套企业级web前端开发解决方案;6、SUI,一个前端组件库。

2023年精选Web前端面试题大全及答案(收藏)2023年精选Web前端面试题大全及答案(收藏)Apr 08, 2021 am 10:11 AM

本篇文章给大家总结一些值得收藏的精选Web前端面试题(附答案)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

【吐血整理】2023年最新前端面试题大全及答案(收藏)【吐血整理】2023年最新前端面试题大全及答案(收藏)Jun 29, 2022 am 11:20 AM

本篇文章给大家总结一些值得收藏的精选Web前端面试题(附答案)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

web标准有哪些好处web标准有哪些好处Sep 20, 2023 pm 03:34 PM

web标准的好处有提供更好的跨平台兼容性、可访问性、性能、搜索引擎排名、开发和维护成本、用户体验以及代码的可维护性和可重用性。详细说明:1、跨平台兼容性,确保网站在不同的操作系统、浏览器和设备上都能正确显示和运行;2、提高可访问性,可以确保网站对所有用户都是可访问的;3、加快网站加载速度,用户可以更快地访问和浏览网站,提供更好的用户体验;4、提高搜索引擎排名等等。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

如何区分H5,WEB前端,大前端,WEB全栈?如何区分H5,WEB前端,大前端,WEB全栈?Aug 03, 2022 pm 04:00 PM

本文带你快速区分H5、WEB前端、大前端、WEB全栈,希望对需要的朋友有所帮助!

web前端和后端开发有什么区别web前端和后端开发有什么区别Jan 29, 2023 am 10:27 AM

区别:1、前端指的是用户可见的界面,后端是指用户看不见的东西,考虑的是底层业务逻辑的实现,平台的稳定性与性能等。2、前端开发用到的技术包括html5、css3、js、jquery、Bootstrap、Node.js、Vue等;而后端开发用到的是java、php、Http协议等服务器技术。3、从应用范围来看,前端开发不仅被常人所知,且应用场景也要比后端广泛的太多太多。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン