利用vscode調試nodejs代碼實踐總結

chenatu 發布于2019-08-21 17:42 / 2501人閱讀

摘要：支持，和三種環境，并且可以安裝擴展插件，因而可以滿足絕大多數人的要求，安裝配置非本文所要講述的內容，請自行查找，本文著重討論如何用更好的調試代碼，希望能對大家有所幫助。

2018.5.12更新

最近在用vscode 1.23版本的時候發現outDir不可以使用了，建議這么改吧，直接program采用編譯后的文件，然后打開sourceMaps，同時在babel編譯的時候自己搞--watch及時生成.map文件便于vscode索引;如果你要編譯其他語言，其實可以在package.json當中添加scripts，通過tasks.json來在debug之前進行編譯，下面展示出.vscode下的兩個文件，此為babel方法，其他類似

.launch.json

"configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "啟動程序",
      "program": "${workspaceFolder}/lib/login.js",
      "sourceMaps": true,
      "preLaunchTask": "build" // 等于下面`label`值
    }
  ]

tasks.json

{
  "version": "2.0.0",
  "command": "npm",
  "tasks": [
    {
      "label": "build",
      // 合起來就是`npm run build`
      "type": "npm",
      "script": "build"
    }
  ]
}

package.json

"scripts": {
    "build": "babel src --out-dir lib --source-maps"
  },

實際上這樣較慢，建議多帶帶在build加watch，然后直接不用preLaunchTask

前言

之前一直習慣了用瀏覽器來調試代碼，偶爾想調試一下node包中的代碼，或者自己想寫一個小的node插件無從下手，不知道該怎么調試，經過查找資料和向導師請教實踐了一下這個過程

1. vscode概述

Visual Studio Code(以下簡稱vscode)是一個很強大的編輯器，相對而言比較輕量，因為我通常喜歡webstorm，webstorm自動保存和錯誤提示的特性深受我喜愛，但是對于調試nodejs來說，vscode則更具有它的優勢所在。vscode支持windows，OS X和Linux三種環境，并且可以安裝擴展插件，因而可以滿足絕大多數人的要求，安裝配置非本文所要講述的內容，請自行查找，本文著重討論如何用vscode更好的調試node代碼，希望能對大家有所幫助。

2. vscode界面

左上角依次是項目目錄，搜索，版本管理git相關(左下角為當前分支)，調試，其他擴展插件，其他的均為中文標注，不解釋，都是咱們必要的，這幾個如果沒有的建議調出來這都是調試很必要的幾個東西，可以去到菜單欄的查看中逐一調出

3. 調試前置條件：launch.json配置

點擊圖中左數第四個按鈕，也就是調試，然后點擊圖中紅框即可打開launch.json

    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/src/extract-cli.js",
            "args": ["--output", "output.pot", "${workspaceFolder}/test/product_group.vm"],
            "outDir": "${workspaceFolder}/dist",
            "sourceMaps": true
        }
    ]

type和request不用改，默認就可以，request為launch時用F5直接可以啟動調試，request為attach按照官網解釋是關聯到已經運行的一個程序，但是此處可以不管，我們就用vscode自帶的調試器進行調試就好。

program這個參數是指定要運行的js入口文件，其中${workspaceFolder}為當前打開的項目目錄，.vscode目錄會自動生成在此目錄下，launch.json也在此目錄下

args也是個比較重要的，比如該例，我執行命令gettext-extract --output output.pot input.vm 那么args的作用其實就是傳入命令后面的參數，每個空格之間要分開，寫成args的某個子元素

sourceMaps對于編寫es5代碼來說這個參數沒有什么卵用，但是對于寫es6,TypeScript等就十分有必要了，這個參數的值為true時會利用編譯過程生成的map來進行源碼和編譯后的代碼進行對應，這樣在源碼打斷點，就可以愉快的進行我們的調試了

outDir是用來標注編譯后代碼的生成目錄的，幫助vscode進行查找

下面討論下關于編譯前后的對應關系這件事

我這邊是用的babel來進行編譯的，經過嘗試，program參數如果直接指向編譯后的文件，vscode奇跡般的可以自己去尋找到源碼文件，這對于我們的調試是最簡單的方式了

如果program指向你編寫的文件，那么需要提供一個outDir參數,只要配置到編譯生成目錄就好了。

其他：目測不需要sourceMaps還有編譯成成.js.map如果你調試遇到了問題請嘗試將sourceMaps設置為true并讓編譯工具生成map文件

4. 調試代碼

只要在你調試的代碼左邊點擊一下，只要是紅色的，說明此處斷點可行，如圖所示

直接按F5即可開始調試，會在界面上出現類似于chrome的那幾個單步跳過，單步調試等等，使用方法類似chrome,只是快捷鍵稍有不同

然后點擊左側上面介紹的調試按鈕，會看到運行到某一步的變量，還有調用堆棧情況，如圖所示

5. 其他

捎帶介紹一下本文使用的babel和命令行入口相關的知識

打開package.json，會發現有一個bin的配置,這么配置再npm install的時候就會將這兩個命令加入到node_modules/.bin當中，然后就可以用做命令行了

  "bin": {
    "gettext-compile": "./dist/compile-cli.js",
    "gettext-extract": "./dist/extract-cli.js"
  }

babel執行命令時可以加--source-maps true來生成map文件，如果遇到我上面說到問題的才會用到這個，估計其他的編譯工具也會有；另外，我們修改源文件之后，想立即重啟調試來進行驗證，每次都自己執行命令很麻煩，那么babel自身支持--watch參數，可以監控文件變化，這樣我們就可以實現簡單的自動化

babel或者其他的命令行命令寫的很長，不容易記住，那么我們就可以將其寫在package.json當中,如下就是講babel編譯寫在其中，可以執行npm run prepublish即可

  "scripts": {
    "prepublish": "babel  --watch --presets es2015 --plugins transform-object-assign --source-maps true src --out-dir dist/"
  }

參考資料：

官網提示文檔

[譯]Visual Studio Code文檔其4—調試

采用easygettext源碼來進行講解的

babel --help的幫助

GPU云服務器云服務器 nodejs模塊調試 java代碼性能總結 jni代碼調試 js代碼調試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89887.html

ELSE 技術周刊(2017.10.23期)

摘要：為目前使用范圍最廣的網絡保護協議。身處攻擊目標周邊的惡意人士能夠利用密鑰重裝攻擊，利用此類安全漏洞。本文和大家一起探討下如何在三年內快速成長為一名技術專家。業界動態 Vue 2.5 released Vue 2.5 正式發布，作者對于該版本的優化總結：更好的TypeScript 集成，更好的錯誤處理，更好的單文件功能組件支持以及更好的與環境無關的SSR WiFi爆驚天漏洞！KRACK...

galaxy_robot 2019-08-21 17:12 評論0 收藏0
精讀《如何在 nodejs 使用環境變量》

摘要：引言本期精讀的文章是如何在使用環境變量。介紹了開發與生產環境如何管理環境變量。本地通過調試環境變量既方便又安全。更多討論討論地址是精讀如何在使用環境變量如果你想參與討論，請點擊這里，每周都有新的主題，周末或周一發布。 1 引言本期精讀的文章是：如何在 nodejs 使用環境變量。介紹了開發與生產環境如何管理環境變量。這里環境變量指的是數據庫密碼等重要數據，而不是指普通變量傳參。 ...

aaron 2019-08-22 17:58 評論0 收藏0
使用typescript開發調試nodejs

摘要：原文地址這兩天在看也在入門中網上大部分教程都是前端配置開發調試這個也有很多相當成熟的實踐教程這篇文章主要是的配置說起來也是相當簡單的不涉及任何的語法與概念同時也可以根據本文配置的開發環境主要是模塊部分的使用說起大家應該都挺熟悉了是一個原文地址 https://github.com/xiadd/blog/issues/8 這兩天在看ts,也在入門中, 網上大部分教程都是前端配置ts開發...

張春雷 2019-08-21 16:54 評論0 收藏0
vscode調試node.js c++擴展

摘要：類似的，如果我們想要調試擴展，我們也需要擴展源文件的調試符號信息。配置安裝插件這里我們將用來調試擴展。配置輸入配置一個任務，該任務會執行，生成帶調試信息的擴展文件。 Debugging NodeJS C++ addons using VS Code 之前筆者寫了一篇用NAN寫一個nodejs的c++擴展, 實際開發過程中，肯定是有單步調試的需求。這里簡單介紹用如何用vscode調試...

王偉廷 2019-08-23 14:40 評論0 收藏0