VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明-VSCode-php.cn

VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明

青灯夜游

リリース： 2021-10-28 09:42:37

転載

12400 人が閲覧しました

VSCode で JS コードをデバッグするにはどうすればよいですか?次の記事では、VSCode で JS コードをデバッグするいくつかの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明

関連する推奨事項: 「vscode チュートリアル」

VS Code で js をデバッグする 2 つの方法を紹介します:

Quokka.js プラグイン
ライブサーバーを備えた Chrome 用デバッガー

#Quokka.js プラグイン

プラグインのアドレス: https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

拡張機能ストアで検索してインストールします:

VS コードでショートカットキー ctrl Shift P を使用してパネルを表示し、## と入力します。 #quo:

2 つのオプションがあることがわかります。1 つは js をデバッグするもので、もう 1 つは ts をデバッグするものです。最初のものを選択します。

プロバージョンを購入するかどうかを尋ねるプロンプトが表示される場合がありますが、オフにして無視することも、購入することを選択することもできます。

開いた編集ボックスに数行のコードを入力してみてください:

コードがリアルタイムで実行されることがわかります。左側の緑色の四角はステートメントが正常に実行されたことを示し、実行が失敗した場合は赤色に変わります。

Debugger for Chrome は Live Server とペアになっています

Debugger for Chrome プラグインのアドレス: https ://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Live Server プラグインのアドレス: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

最初にこれら 2 つのプラグインをダウンロードしてインストールしてください。この方法には Google Chrome のインストールが必要です。

次のようなフロントエンドプロジェクトがあるとします。

Live Server をインストールすると、VS Code が見つかります。右下隅に

Go Live という小さなボタンがあります:

これをクリックしてください。

Live Srever はローカル開発サーバーを作成し、ブラウザウィンドウに次のようなアドレスをポップアップ表示します:

http://127.0.0.1:5500/

プロンプトも表示されます:

このブラウザウィンドウは一時的に閉じても問題ありません。右下隅にある小さなボタンをクリックするか、VS Code を閉じても、

http://127.0.0.1:5500/ を通じて先ほどの Web ページを開くことができます。

このポート番号

5500 は後で使用するため、覚えておいてください。 Live Server またはこのポート番号を占有する他のプログラムを開くと、ポート番号は自動的に 1 になります。

名前が示すように、ライブサーバーはリアルタイムで更新されます。プロジェクトファイルまたはコードを変更すると、Live Server はすぐに更新され、ページが自動的に更新されます。

エディターに戻ります。

順番にクリック: 実行アイコン -> launch.json ファイルの作成:

元の構成を次の構成で上書きして保存:

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "chrome 调试",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

ログイン後にコピー

VS コードは、プロジェクトが存在するディレクトリに関連する設定を保存します:

注: "url" フィールドのポート番号 5500 は、Live Server によって提供されるポート番号に対応する必要があります。

クリック:

表示されます:

ご希望どおり、動作しています。通常は。

マウスをアイコンの位置に移動し、クリックしてブレークポイントを設定します:

次に、Web ページ上のボタンをクリックします:

你会看到打上的断点成功拦截执行：

细心的你可能会发现，当点击一次 Go Live 按钮时会打开一个浏览器窗口，再点击一次调试按钮时（快捷键 F5），会打开第二个用于调试的窗口。这可能是没有必要的，我们只需要一个窗口就行了。

下面我们来编辑配置，使这个过程只需打开一次浏览器窗口。

点击 “chrome 调试” 旁边的齿轮：

VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明

在打开的编辑框依次点击：

VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明

得到如下配置并保存：

VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明

在扩展商店搜索 Live Server 并打开它的扩展设置：

VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明

需要修改的配置有两个：

VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明

1、Chrome Debugging Attachment

VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明

点击进入，将 "liveServer.settings.ChromeDebuggingAttachment": false 改为 true。

"liveServer.settings.ChromeDebuggingAttachment": true

2、Custom Browser

点击此选项中的下拉框，我们选择 chrome：

VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明

修改完成！

接下来我们重启 Live Srever 服务：

VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明

回到 VS Code，按下 F5 键，启动调试：

VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明

之后本项目的每次调试你只需要点击 Go Live 按钮并回到 VS Code 按下 F5 键就行了。

当然，chrome 调试选项可能还是生效的，当你关掉 Live Server 打开的浏览器窗口时，可以尝试使用这个选项再次打开。

VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明

如果遇到端口号被占用的情况，可以点击调试旁边的齿轮来修改。

祝：

永无 BUG！

使用到的代码：

<!-- ./index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="time">请点击下方按钮以获取当前时间</div>
    <button id="getTime">获取时间</button>
    <script src="./js/index.js"></script>
</body>
</html>

ログイン後にコピー

// ./js/index.js
let getTimeBtn = document.getElementById("getTime");
getTimeBtn.onclick = function (e) {
    let time = document.getElementById("time");
    let now = new Date().toLocaleString();
    time.innerHTML = now;
}

ログイン後にコピー

// ./.vscode/launch.json
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome",
            "port": 9222,
            "request": "attach",
            "type": "pwa-chrome",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "chrome 调试",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

ログイン後にコピー

更多编程相关知识，请访问：编程课程！！

以上がVSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。