Vue提供的三種調(diào)試方式是什么

這篇文章主要講解了“Vue提供的三種調(diào)試方式是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue提供的三種調(diào)試方式是什么”吧！

一、在 VS Code 中配置調(diào)試

使用 Vue CLI 2搭建項(xiàng)目時(shí)：

更新 config/index.js 內(nèi)的 devtool property：

devtool: 'source-map',

點(diǎn)擊在 Activity Bar 里的 Debugger 圖標(biāo)來到 Debug 視圖：

選擇Chrome/Firefox：Launch 環(huán)境。將 launch.json 的內(nèi)容替換為：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

開始調(diào)試：

設(shè)置斷點(diǎn)：

#啟動(dòng)項(xiàng)目
npm run dev

在debug頁面選擇“vuejs：chrome”：

二、debugger語句

推薦

function potentiallyBuggyCode() {
    debugger
    // do potentially buggy stuff to examine, step through, etc.
}

瀏覽器：F12打開DevTools，當(dāng)運(yùn)行程序后，會(huì)停在debbger語句：

注意：當(dāng)安裝了Eslint插件時(shí)，點(diǎn)擊快速修復(fù)，Disable no-debugger for this line.不然，保存時(shí)會(huì)自動(dòng)清除debugger語句。

三、Vue Devtools

谷歌瀏覽器的插件。

感謝各位的閱讀，以上就是“Vue提供的三種調(diào)試方式是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Vue提供的三種調(diào)試方式是什么這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！