精品秘无码一区二区三区老师-精品秘一区二三区免费雷安-精品蜜桃秘一区二区三区-精品蜜桃秘一区二区三区粉嫩-精品蜜桃一区二区三区-精品蜜臀国产aⅴ一区二区三区

作者：世界哪有真情

https://juejin.cn/post/7446578471901872180

說真的，做了5年前端我也換過幾家公司

我發(fā)現(xiàn)我的前端同事都不會debug，都是用的console.log，那我也不學(xué)

這里說的是在vscode里debug，不是代碼里寫debugger后用瀏覽器調(diào)試

反正console也能勉強用

反正前端大多時候也不怎么寫復(fù)雜的業(yè)務(wù)邏輯

就算寫 那我就多console幾下，到時候一起刪了好了

就這樣，我console了5年。。。

期間中途也有忍不住的時候，但是我還是忍了。

直到今天，又接手到這種代碼，然后又是在一個加班的夜里，我忍不了了，死活我都要學(xué)會用vscode調(diào)試vue項目。

debug有那么方便嗎

這么說吧，100個后端開發(fā)，100個都必須會debug，連項目啟動都規(guī)定只能用debug模式啟動，方便調(diào)試。

因為業(yè)務(wù)邏輯復(fù)雜的地方，你不debug，就不知道代碼的走向，去到哪個作用域你都不知道，你一個個console，每個作用域都寫一遍嗎，然后去比對先執(zhí)行的哪個console?

正片開始

灰常簡單，3步搞定

1. 開啟sourcemap

vue.config.js文件中，添加如下配置:

configureWebpack: {
   devtool: process.env.NODE_ENV !== "production" ? "source-map" : '',
 }

原理：暴露未編譯前的目錄結(jié)構(gòu)，使程序能夠精確定位代碼斷點位置（大概這個意思）

2.啟動項目 記錄下訪問端口

3.新建debug配置

{
  // 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
      "name": "Launch Edge",
      "request": "launch",
      "type": "msedge",
      "url": "http://localhost:8081",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

切記，要用debug這里啟動后彈出的瀏覽器窗口進行操作調(diào)試，這是個單獨的瀏覽器窗口

調(diào)試操作

在上述通過debug打開的瀏覽器中操作你的項目

需要在哪調(diào)試就在哪打斷點

斷點有普通斷點和條件斷點（用于比如循環(huán)操作時 當(dāng)變量為什么條件時激活斷點，避免一次一次點斷點執(zhí)行循環(huán)）

當(dāng)執(zhí)行到你打端點的代碼時，程序就會暫停，并且輸出當(dāng)前執(zhí)行狀態(tài)的所有信息了

大家看圖應(yīng)該都能看懂，我就不多說了，下面主要講一下斷點的操作

?

 用于從當(dāng)前斷點跳到下一個斷點（沒有下一個斷點程序就執(zhí)行結(jié)束）

一行一行的往下執(zhí)行

執(zhí)行到方法時，點擊第一個會進入方法里面去，點擊第二個會退出方法棧

最后當(dāng)你關(guān)閉通過調(diào)試打開的瀏覽器窗口時，vscode里的調(diào)試也就結(jié)束了。

總結(jié)

這樣比console方便多了吧，點一下就知道這行程序的前后所有變量的狀態(tài)以及接下來的走動

也許這些東西很簡單很基礎(chǔ)，但是也總有人不會的，那就存在分享的意義