vscode調試vue的方法-創新互聯

這篇文章主要介紹了vscode調試vue的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創新互聯公司是一家專業提供天等企業網站建設,專注與網站設計制作、成都網站制作、H5響應式網站、小程序制作等業務。10年已為天等眾多企業、政府機構等服務。創新互聯專業網站制作公司優惠進行中。

vscode如何調試vue？

使用 VS Code 斷點調試

直接在 Chrome 的調試窗口中調試 Vue 代碼有諸多不便，好在 Visual Studio Code 中提供了 Debugger for Chrome 插件，能夠通過配置直接在 VS Code 斷點調試代碼, 并且在 VS Code 的調試窗口看到 Chrome 中 console 相同的值，這篇文章就來介紹一下這個配置過程。

相關推薦：vscode教程

1.開啟 Chrome 遠程調試端口

首先我們需要在遠程調試打開的狀態下啟動 Chrome, 這樣 VS Code 才能 attach 到 Chrome 上。

Windows

右鍵點擊 Chrome 的快捷方式圖標，選擇屬性

在目標一欄，最后加上 --remote-debugging-port=9222，注意要用空格隔開

macOS

打開控制臺

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

Linux

打開控制臺

執行命令 google-chrome --remote-debugging-port=9222

2.安裝 Chrome Debug 插件

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

vscode調試vue的方法

3.創建 Debug 配置文件

點擊 Visual Studio Code 左側邊欄的調試按鈕，在彈出的調試配置窗口中點擊設置小齒輪，然后選擇 chrome, VS Code 將會在工作區根目錄生成.vscode 目錄，里面會有一個 lanch.json 文件并會自動打開

用下面的配置文件覆蓋自動生成的 lanch.json 文件內容。

注意：URL中的端口號要跟WEBPACK配置的啟動端口號一致。

{
  // 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}/*"
      }
    }
  ]
}

vscode調試vue的方法