vscode如何斷點(diǎn)調(diào)試

這篇文章給大家分享的是有關(guān)vscode如何斷點(diǎn)調(diào)試的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

1、開啟 Chrome 遠(yuǎn)程調(diào)試端口

首先我們需要在遠(yuǎn)程調(diào)試打開的狀態(tài)下啟動(dòng) Chrome, 這樣 VS Code 才能 attach 到 Chrome 上。

Windows

右鍵點(diǎn)擊 Chrome 的快捷方式圖標(biāo)，選擇屬性在目標(biāo)一欄，最后加上 --remote-debugging-port=9222，注意要用空格隔開

macOS

打開控制臺(tái)

執(zhí)行命令 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

打開控制臺(tái)執(zhí)行命令 google-chrome --remote-debugging-port=9222

2、安裝 Chrome Debug 插件

點(diǎn)擊 Visual Studio Code 左側(cè)邊欄的擴(kuò)展按鈕， 然后在搜索框輸入Debugger for Chrome 并安裝插件，再輸入，安裝完成后點(diǎn)擊 reload 重啟。

3、創(chuàng)建 Debug 配置文件

點(diǎn)擊 Visual Studio Code 左側(cè)邊欄的 調(diào)試 按鈕， 在彈出的調(diào)試配置窗口中點(diǎn)擊 設(shè)置 小齒輪， 然后選擇 chrome, VS Code 將會(huì)在工作區(qū)根目錄生成.vscode 目錄，里面會(huì)有一個(gè) lanch.json 文件并會(huì)自動(dòng)打開

用下面的配置文件覆蓋自動(dòng)生成的 lanch.json 文件內(nèi)容。

注意：URL中的端口號(hào)要跟WEBPACK配置的啟動(dòng)端口號(hào)一致。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}/src",
      "url": "http://localhost:8080/#/",　
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

4、修改 webpack 配置

如果是基于 webpack 打包的 vue 項(xiàng)目， 可能會(huì)存在斷點(diǎn)不匹配的問題, 還需要做些修改：

（1）打開根目錄下的 config 目錄下的 index.js 文件

（2）將dev 節(jié)點(diǎn)下的 devtool 值改為 'eval-source-map'

（3）將dev節(jié)點(diǎn)下的 cacheBusting 值改為 false

5、開啟調(diào)試

上述配置完成之后：

（1）通過第一步的方式以遠(yuǎn)程調(diào)試打開的方式打開 Chrome

（2）在 vue 項(xiàng)目中執(zhí)行 npm run dev 以調(diào)試方式啟動(dòng)項(xiàng)目

（3）點(diǎn)擊 VS Code 左側(cè)邊欄的調(diào)試按鈕，選擇 Attach to Chrome 并點(diǎn)擊綠色開始按鈕，正常情況下就會(huì)出現(xiàn)調(diào)試控制條。

現(xiàn)在就可以在 vue 文件的 js 代碼中打斷點(diǎn)進(jìn)行調(diào)試了。

感謝各位的閱讀！關(guān)于“vscode如何斷點(diǎn)調(diào)試”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！