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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供天等企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為天等眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

vscode如何調(diào)試vue？

使用 VS Code 斷點(diǎn)調(diào)試

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

相關(guān)推薦：vscode教程

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

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

Windows

右鍵點(diǎn)擊 Chrome 的快捷方式圖標(biāo)，選擇屬性

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

macOS

打開控制臺

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

Linux

打開控制臺

執(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 將會在工作區(qū)根目錄生成.vscode 目錄，里面會有一個 lanch.json 文件并會自動打開

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

注意：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}/*"
      }
    }
  ]
}

4.修改 webpack 配置

如果是基于 webpack 打包的 vue 項(xiàng)目， 可能會存在斷點(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)試方式啟動項(xiàng)目

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享vscode調(diào)試vue的方法內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細(xì)的解決方法等著你來學(xué)習(xí)!

名稱欄目：vscode調(diào)試vue的方法-創(chuàng)新互聯(lián)
文章來源：http://jinyejixie.com/article40/ccehho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)頁設(shè)計公司、小程序開發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)