淺析Visual Studio Code斷點(diǎn)調(diào)試Vue

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:18:43

淺析Visual Studio Code斷點(diǎn)調(diào)試Vue

淺析Visual Studio Code斷點(diǎn)調(diào)試Vue:很多人習(xí)慣在 Chrome 的調(diào)試窗口中調(diào)試 Vue 代碼，或者直接使用 console.log 來觀察變量值，這是非常痛苦的一件事，需要同時(shí)打開至少 3 個(gè)窗體。個(gè)人還是更加習(xí)慣于斷點(diǎn)調(diào)試。這篇文章將介紹如何配置 Visual Studio Code 和 Chrome 來完成

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀淺析Visual Studio Code斷點(diǎn)調(diào)試Vue:很多人習(xí)慣在 Chrome 的調(diào)試窗口中調(diào)試 Vue 代碼，或者直接使用 console.log 來觀察變量值，這是非常痛苦的一件事，需要同時(shí)打開至少 3 個(gè)窗體。個(gè)人還是更加習(xí)慣于斷點(diǎn)調(diào)試。這篇文章將介紹如何配置 Visual Studio Code 和 Chrome 來完成

Linux

打開控制臺(tái)執(zhí)行：

google-chrome --remote-debugging-port=9222

Visual Stuido Code 安裝插件

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

添加 Visual Studio Code 配置

點(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)容。

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

修改 webpack 的 sourcemap

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

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

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

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

開始調(diào)試吧

一切具備了，現(xiàn)在驗(yàn)收成果了

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

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

點(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)試了。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com