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

作者：世界哪有真情

https://juejin.cn/post/7446578471901872180

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

我發現我的前端同事都不會debug，都是用的console.log，那我也不學

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

反正console也能勉強用

反正前端大多時候也不怎么寫復雜的業務邏輯

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

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

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

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

debug有那么方便嗎

這么說吧，100個后端開發，100個都必須會debug，連項目啟動都規定只能用debug模式啟動，方便調試。

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

正片開始

灰常簡單，3步搞定

1. 開啟sourcemap

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

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

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

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

3.新建debug配置

{
  // 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息，請訪問: 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這里啟動后彈出的瀏覽器窗口進行操作調試，這是個單獨的瀏覽器窗口

調試操作

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

需要在哪調試就在哪打斷點

斷點有普通斷點和條件斷點（用于比如循環操作時 當變量為什么條件時激活斷點，避免一次一次點斷點執行循環）

當執行到你打端點的代碼時，程序就會暫停，并且輸出當前執行狀態的所有信息了

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

?

 用于從當前斷點跳到下一個斷點（沒有下一個斷點程序就執行結束）

一行一行的往下執行

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

最后當你關閉通過調試打開的瀏覽器窗口時，vscode里的調試也就結束了。

總結

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

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