狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

作者：世界哪有真情

https://juejin.cn/post/7446578471901872180

說(shuō)真的，做了5年前端我也換過(guò)幾家公司

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

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

反正console也能勉強(qiáng)用

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

就算寫(xiě) 那我就多console幾下，到時(shí)候一起刪了好了

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

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

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

debug有那么方便嗎

這么說(shuō)吧，100個(gè)后端開(kāi)發(fā)，100個(gè)都必須會(huì)debug，連項(xiàng)目啟動(dòng)都規(guī)定只能用debug模式啟動(dòng)，方便調(diào)試。

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

正片開(kāi)始

灰常簡(jiǎn)單，3步搞定

1. 開(kāi)啟sourcemap

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

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

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

2.啟動(dòng)項(xiàng)目 記錄下訪(fǎng)問(wèn)端口

3.新建debug配置

{
  // 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述。
// 欲了解更多信息，請(qǐng)?jiān)L問(wè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這里啟動(dòng)后彈出的瀏覽器窗口進(jìn)行操作調(diào)試，這是個(gè)單獨(dú)的瀏覽器窗口

調(diào)試操作

在上述通過(guò)debug打開(kāi)的瀏覽器中操作你的項(xiàng)目

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

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

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

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

?

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

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

執(zhí)行到方法時(shí)，點(diǎn)擊第一個(gè)會(huì)進(jìn)入方法里面去，點(diǎn)擊第二個(gè)會(huì)退出方法棧

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

總結(jié)

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

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