使用vscode進行斷點調試的方法

這篇文章給大家分享的是有關使用vscode進行斷點調試的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

目的：

在VSCode里，直接F5打開html頁面，并且可以在編輯器里，進行斷點調試js代碼。

準備工作：

1、VSCode 軟件

2、js項目

3、VSCode 上裝一個插件：Debugger for Chrome

配置文件更改：

1、用VSCode裝載項目

2、然后按F5，出現這個框，選擇 Chrome

3、然后出現個配置的提示，并打開了launch.json這個文件

添加如下信息：

       {
            "name": "使用本機 Chrome 調試",
            "type": "chrome",
            "request": "launch",
             "file": "${workspaceRoot}/index.html",
        //  "url": "http://mysite.com/index.html", 
        //使用外部服務器時,請注釋掉 file, 改用 url, 并將 useBuildInServer 設置為 false "http://mysite.com/index.html
            "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", 
            // 改成您的 Chrome 安裝路徑
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
        //  "preLaunchTask":"build",
            "userDataDir":"${tmpdir}",
            "port":5433
        }

結果如圖：

4、更改調試方式

如圖：選擇左邊的圓形按鈕，然后出來這個調試配置管理界面，選擇“使用本機 Chrome 調試”

5、最后在項目的 js 處設置好斷點，按 F5，就可以進行斷點調試了。

感謝各位的閱讀！關于使用vscode進行斷點調試的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！