答應(yīng)我，不要再用console.log調(diào)試了

    

     
    
大廠技術(shù)  高級前端  Node進(jìn)階
點擊上方 程序員成長指北，關(guān)注公眾號
回復(fù)1，加入高級Node交流群

故事背景

事情是這樣的，因為我經(jīng)常會接到一些 CR，就時常會看到推上來的 console.log 寫在代碼里沒刪...
這太要命了，要知道這在明治維新時期可是要浸豬籠的

所以，今天正好趁這個機會，分享一下我平時是怎么調(diào)試代碼的

注意：我用的是 vscode,其它IDE按照這個思路，大差不差

1. 調(diào)試配置

要實現(xiàn)最基本的配置其實很簡單,你只需要在你的項目根目錄文件夾下創(chuàng)建一個 .vscode/launch.json 文件就行，然后里面寫入你想要調(diào)試的那個頁面，也就是你本的開發(fā)環(huán)境起用的鏈接，比如我下面舉個??：

{
  "configurations": [
    {
      "type": "chrome",       // 模式：chrome、edge 可選
      "name": "lambo",        // 調(diào)試的名稱，可以自定義
      "request": "launch",    // 請求配置類型：可以是 attach 或者 launch
      "url": "http://localhost:8000/meta"   // 你當(dāng)前想要調(diào)試的頁面地址
    },
    ...   // 你可以創(chuàng)建多個調(diào)試配置，方便快速啟動
  ]
}

2. 打斷點

進(jìn)入想要修改的代碼頁面，把鼠標(biāo)移到想要打斷點的那一行，把鼠標(biāo)懸浮在這一行的最前面，會出現(xiàn)一個點，提示你打斷點，你點擊就會變紅，比如：

這個時候你打開vscode的拓展菜單上的那個小蜘蛛（根據(jù)你使用的icon庫的不同，可能會有些區(qū)別）：

你會發(fā)現(xiàn)你所有打的斷點都會在左下角的斷點面板內(nèi)，你可以點擊前面的勾選框選擇是否需要使用這個斷點：

3. 啟動調(diào)試

確定好你需要調(diào)試的斷點位置之后，點擊運行，這里運行你之前配置的那個名稱的腳本：

然后不出意外，會新開一個chrome的頁面，因為這個是vscode自帶的chrome瀏覽器，所以它非常的純粹，任何的數(shù)據(jù)都是一次性的，就像無痕模式一樣，你關(guān)掉就徹底清除了，所以調(diào)試起來很方便。

當(dāng)你跳轉(zhuǎn)到你對應(yīng)節(jié)點的時候，左側(cè)變量面板，會給你展示當(dāng)前斷點位置所的所有變量（包括組件，全局），我們大多數(shù)時候看local面板就行：

然后按F5跳到下一個斷點，一直調(diào)試到你覺得滿意的結(jié)果為止。

結(jié)語

如果你想增加你的工作效率，并且往更高階的前端進(jìn)發(fā)，調(diào)試的能力是必不可少的，另外debug還有很多拓展性的功能，你可以借這個機會去了解一下，比如它的監(jiān)視，還有調(diào)用堆棧...等等

Node 社群

    

     

      

       

        

       
       

        

       
      
     
    
我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
   “分享、點贊、在看” 支持一下