日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 Vue 正文

Vue提供的三種調試方式你知道嗎_vue.js

作者：長不大的大灰狼 ? 更新時間： 2022-03-31 Vue

一、在 VS Code 中配置調試

使用 Vue CLI 2搭建項目時：

更新 config/index.js 內的 devtool property：

devtool: 'source-map',

點擊在 Activity Bar 里的 Debugger 圖標來到 Debug 視圖：

在這里插入圖片描述

選擇Chrome/Firefox：Launch 環境。將 launch.json 的內容替換為：

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

開始調試：

設置斷點：

在這里插入圖片描述

#啟動項目
npm run dev

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

在這里插入圖片描述

二、debugger語句

推薦

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

瀏覽器：F12打開DevTools，當運行程序后，會停在debbger語句：

在這里插入圖片描述

注意：當安裝了Eslint插件時，點擊快速修復，Disable no-debugger for this line.不然，保存時會自動清除debugger語句。

在這里插入圖片描述

三、Vue Devtools

谷歌瀏覽器的插件。

詳情參考官方鏈接：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#Vue-Devtools

總結

原文鏈接：https://blog.csdn.net/glpghz/article/details/122462311

欄目分類
最近更新