ブラウザをシームレスにデバッグできるVSCodeの使い方と原理分析を見てみましょう！

VSCodeエピック アップデートにより、ブラウザをシームレスにデバッグできます。次の記事では、この機能を理解し、使用方法を確認し、原理を簡単に分析します。

2021-07-16 Microsoft は、この機能を特に紹介するブログを公開しました、「VSCODE はすごい!」

これに先立って、vscode で chrome または Edge をデバッグする場合は、Chrome デバッガーまたは Microsoft Edge デバッガー拡張機能、つまり 2 つの vscode 拡張機能を使用する必要があります。

そしてさらに重要なのは、最も基本的なコンソール機能しか提供できず、ネットワークや要素などのその他の機能は表示できないため、ブラウザで表示する必要があります。 [推奨学習: "vscode チュートリアル"]

この関数とは何ですか

更新後は、vscode で直接開くことができますChrome または Edge でリンクを実行し、要素やネットワークなどの表示など、ほとんどすべての一般的なデバッグ機能を vscode 内で直接実行できます。 効果のスクリーンショット:

（エッジ開発ツール）

（デバッグコンソール）

使用方法

使用方法は非常に簡単で、フロントエンド プロジェクトで F5 キーを押すだけでデバッグが開始され、簡単な設定が実行されます。ここに全員向けの lauch.json 構成があり、これを使用すると、デバッグ ブラウザーを直接開くことができます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Microsoft Edge and open the Edge DevTools",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

各自の状況に応じて URL や webRoot などのパラメータを変更する必要があります。

原則

この原則は、実際には Chrome デバッガ拡張の原則と似ています。また、

websocket リンクを確立するための Chrome の devtool プロトコルにも基づいています。フォーマットされた json データ

を送信して対話し、vscode がランタイム情報を動的に取得できるようにします。たとえば、ブラウザのネットワーク スレッドによって送信されたリクエストや DOM ノードの情報などです。 前述のネットワーク リクエストなど、

chrome devtool プロトコル

を通じて多くの情報を取得できます。 これは WebSocket によって確立された双方向リンクであるため、VSCODE で dom を変更し、ブラウザの変更をトリガーするのは簡単です。 VSCODE (WebSocket クライアント) で操作し、WebSocket 経由で JSON データの一部をブラウザー (WebSocket サーバー) に送信するだけです。ブラウザは受信した JSON データに基づいて何らかの操作を実行しますが、効果という点ではユーザーがブラウザ上で直接手動で操作するのと変わりません。

Chrome devtool プロトコルには、NodeJS クライアントだけでなく、Python、Java、PHP、その他のクライアントなど、多くのクライアントがあることは注目に値します。

プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。 ！

以上がブラウザをシームレスにデバッグできるVSCodeの使い方と原理分析を見てみましょう！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。