フロントエンドブラウザのデバッグ

シェアする

市場には数多くのツールが存在しており、問題のトラブルシューティングや根本的な仕組みの理解に役立つ適切なツールを選択することが非常に重要です。 フロントエンド ブラウザーのデバッグに関連する問題のトラブルシューティングを行う際に役に立ったいくつかのツールを共有したいと思います。

Firefox 開発者ツールは、CSS、HTML、DOM、JavaScript のデバッグ、編集、監視に役立ちます。 Firefox 開発者ツールの中心となるツールは、JavaScript デバッガー、ページ インスペクター、Web コンソールです。

要素の検査は、特定の Web ページの基礎となるコードをチェックするためにブラウザーに埋め込まれたツールです。ブラウザーを右クリックするだけで、「検査」が表示され、クリックすると、 HTML、CSS、スタイル。 ドキュメント オブジェクト モデル (DOM) 内の要素を編集したり、CSS スタイルなどを変更したりできます。

さまざまなツールがあります デバッギング さまざまなブラウザ向け。

Firefox: Firefox 開発者ツール

Firefox 開発者ツール

Chrome: Chrome デベロッパー ツール

Chrome開発ツール

Safari: Safari Webインスペクタ

サファリ開発者ツール

Internet Explorer: Microsoft Edge F12 開発ツール

マイクロソフトエッジ

オペラ: Opera 開発者ツール

Opera 開発者ツール

JavaScript デバッガー: 最新の Web ブラウザにはすべて JavaScript デバッガが組み込まれています。 ブラウザがデバッグをサポートしている場合は、console.log() を使用してデバッガー ウィンドウに JavaScript 値を表示できます。 debugger キーワードは JavaScript の実行を停止し、デバッグ関数 (使用可能な場合) を呼び出します。

JavaScript コードにバグがないかどうかをチェックするには、コードが有効であること、および言語の公式構文規則に従っていることを確認するプログラムを実行して、JavaScript コードを実行します。 これらのプログラムは次のように呼ばれます パーサーの検証 または単に バリデーター 多くの場合、商用の HTML エディターや JavaScript エディターが付属しています。

JavaScript のそのようなバリデーターの XNUMX つは次のとおりです。 JavaScript リント。

JavaScript をデバッグする簡単な方法は、コード内でalert() メソッドと document.write() メソッドを使用することです。

CSS デバッガー: Pesticide は、CSS レイアウトをデバッグするためのシンプルなスタイルシートです。 Chrome 拡張機能としても利用できます。 すべての要素にアウトラインが配置されるので、レイアウトの何が問題なのかを把握するのに役立ちます。 これを入れると使えます 「 」 ヘッダータグ内にあります。

CSS lint は、JavaScript lint や他の CSS バリデータ サービスと同じように使用できます。

HTTPフォックス: HTTPFox は、Firefox または Edge ブラウザー用のパケット スニファー アドオンです。 HttpFox は、ブラウザと Web サーバー間の HTTP トラフィックを分析するために使用されます。

以下を監視できるようになります。

  • リクエストとレスポンスのヘッダー。
  • クッキー。
  • クエリ文字列。
  • データを投稿します。
  • コンテンツ

Firefox ブラウザで任意のページを開きます。 HttpFox を起動します (Mac OS では、上部の表示タブを開いて HttpFox をクリックします) スタートを押すと、Web URL にアクセスするとすぐにデータが表示され始めます。 ヘッダー、Cookie、クエリ文字列、投稿データ、コンテンツなどのさまざまなタブが表示されます。 これらは基本的に、閲覧している Web ページに関連しています。 ネットワーク ホップ、渡されるクエリ パラメータを理解し、各リクエストのリダイレクトを確認することは非常に役立ちます。

ヘッダ: これらにより、クライアントとサーバーはリクエストとレスポンス内で追加情報をやり取りできるようになります。 リクエスト ヘッダー タブには、サーバーからフェッチされたリソースに関する情報が表示され、レスポンス ヘッダーには、場所やクライアントに送信する必要がある応答などの応答に関する追加情報が表示されます。

ヘッダ

クッキー(Cookie)について: Cookie は基本的に、Web サーバーによってユーザーのマシンに保存されるテキスト ファイルです。 Cookie は、Cookie を作成したサーバーのみがアクセスできます。 [Cookie] タブには、サーバーによってブラウザに送信される受信した Cookie が含まれます。

クッキー

クエリ文字列: クエリ文字列は、クエリ文字列ウィンドウ内で確認できるパラメータ (キーと値のペア) です。 これらのキーと値のペアは、多くの場合、Web ページによって外部サーバーに渡されます。

クエリ文字列

投稿データ: 「投稿データ」タブでは、投稿されているデータを確認できます。たとえば、お問い合わせフォームから投稿されたデータは、すべてのデータが投稿されているかどうかを確認できます。

投稿データ

内容: HttpFox のコンテンツ タブには、監視している Web ページの HTML コンテンツが含まれています。 これは、Web ページ内のレイアウトとコンテンツの分析に非常に適した Inspect 要素を使用してさらに分析できます。

私たちの投稿を読んでください」dblink を使用してデータベース間のデータの一貫性を確保する」を参照して、Intentwise がデータ ソース間でのレプリケーションの課題にどのように対処しているかを理解してください。

提言

ニュースレターを購読する

eコマース専門家向けの製品アップデート、ウェビナー、ニュースについて学びましょう。