成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vscode 調(diào)試node之npm與nodemon

eechen / 1583人閱讀

摘要：而模式，是連接已經(jīng)啟動(dòng)的服務(wù)。當(dāng)調(diào)試結(jié)束了，斷開連接就好，明顯比更方便一點(diǎn)?？墒牵覀儾⒉幌霑r(shí)刻開啟調(diào)試功能怎么辦這就需要使用上面說(shuō)的模式了。使用如下的命令正常的啟動(dòng)項(xiàng)目當(dāng)我們想要調(diào)試的時(shí)候，在的中運(yùn)行如下的配置完美參考資料我在

更多相關(guān)內(nèi)容見博客 https://github.com/zhuanyongxigua/blog

調(diào)試nodejs有很多方式，可以看這一篇How to Debug Node.js with the Best Tools Available，其中我最喜歡使用的還是V8 Inspector和vscode的方式。

在vscode中，點(diǎn)擊那個(gè)蜘蛛的按鈕

就能看出現(xiàn)debug的側(cè)欄，接下來(lái)添加配置

選擇環(huán)境

就能看到launch.json的文件了。

啟動(dòng)的時(shí)候，選擇相應(yīng)的配置，然后點(diǎn)擊指向右側(cè)的綠色三角

launch模式與attach模式 
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/index.js"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Port",
      "address": "localhost",
      "port": 5858
    }
  ]
}

當(dāng)request為launch時(shí)，就是launch模式了，這是程序是從vscode這里啟動(dòng)的，如果是在調(diào)試那將一直處于調(diào)試的模式。而attach模式，是連接已經(jīng)啟動(dòng)的服務(wù)。比如你已經(jīng)在外面將項(xiàng)目啟動(dòng)，突然需要調(diào)試，不需要關(guān)掉已經(jīng)啟動(dòng)的項(xiàng)目再去vscode中重新啟動(dòng)，只要以attach的模式啟動(dòng)，vscode可以連接到已經(jīng)啟動(dòng)的服務(wù)。當(dāng)調(diào)試結(jié)束了，斷開連接就好，明顯比launch更方便一點(diǎn)。

在debug中使用npm啟動(dòng)

很多時(shí)候我們將很長(zhǎng)的啟動(dòng)命令及配置寫在了package.json的scripts中，比如

"scripts": {
  "start": "NODE_ENV=production PORT=8080 babel-node ./bin/www",
  "dev": "nodemon --inspect --exec babel-node --presets env ./bin/www"
},

我們希望讓vscode使用npm的方式啟動(dòng)并調(diào)試，這就需要如下的配置

{
  "name": "Launch via NPM",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run-script", "dev"    //這里的dev就對(duì)應(yīng)package.json中的scripts中的dev
  ],
    "port": 9229    //這個(gè)端口是調(diào)試的端口，不是項(xiàng)目啟動(dòng)的端口
},
在debug中使用nodemon啟動(dòng)

僅僅使用npm啟動(dòng)，雖然在dev命令中使用了nodemon，程序也可以正常的重啟，可重啟了之后，調(diào)試就斷開了。所以需要讓vscode去使用nodemon啟動(dòng)項(xiàng)目。

{
  "type": "node",
  "request": "launch",
  "name": "nodemon",
  "runtimeExecutable": "nodemon",
  "args": ["${workspaceRoot}/bin/www"],
  "restart": true,
  "protocol": "inspector",    //相當(dāng)于--inspect了
  "sourceMaps": true,
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "runtimeArgs": [    //對(duì)應(yīng)nodemon --inspect之后除了啟動(dòng)文件之外的其他配置
    "--exec",
    "babel-node",
    "--presets",
    "env"
  ]
},

注意這里的runtimeArgs，如果這些配置是寫在package.json中的話，就是這樣的

nodemon --inspect --exec babel-node --presets env ./bin/www

這樣就很方便了，項(xiàng)目可以正常的重啟，每次重啟一樣會(huì)開啟調(diào)試功能。

可是，我們并不想時(shí)刻開啟調(diào)試功能怎么辦？

這就需要使用上面說(shuō)的attach模式了。

使用如下的命令正常的啟動(dòng)項(xiàng)目

nodemon --inspect --exec babel-node --presets env ./bin/www

當(dāng)我們想要調(diào)試的時(shí)候，在vscode的debug中運(yùn)行如下的配置

{
  "type": "node",
  "request": "attach",
  "name": "Attach to node",
  "restart": true,
  "port": 9229
}

完美！

參考資料

Debugging

Node.js Debugging in VS Code

Nodemon + Babel + VSCode

我在github https://github.com/zhuanyongx...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107686.html

相關(guān)文章

  • Visual Studio Code 前端調(diào)試不完全指南

    摘要：接下來(lái)的內(nèi)容將從以下幾方面進(jìn)行展開調(diào)試前端代碼調(diào)試通過(guò)啟動(dòng)的服務(wù)器要使用的調(diào)試功能，首先就得配置文件。調(diào)試前端代碼通過(guò)調(diào)試前端代碼主要依賴于一個(gè)插件，該插件主要利用所開放出來(lái)的接口來(lái)實(shí)現(xiàn)對(duì)其渲染的頁(yè)面進(jìn)行調(diào)試。 本文最初發(fā)布于我的個(gè)人博客：咀嚼之味 Visual Studio Code (以下簡(jiǎn)稱 vscode) 如今已經(jīng)代替 Sublime，成為前端工程師們最喜愛的代碼編輯器。它作為...

    dongfangyiyu 評(píng)論0 收藏0

  • 開始使用 VSCode 調(diào)試

    一些由淺入深的 VScode 調(diào)試?yán)?，能讓你快速理解和上?VSCode 調(diào)試。 為什么使用 VSCode ? 我是深度 vi 用戶，之前 Atom 深度使用者，現(xiàn)在基本上轉(zhuǎn)到 VSCode，下面是我選擇 VSCode 的原因： 顏值高，早期不如 Atom，現(xiàn)在已經(jīng)逐漸趕上 vi 支持度好，和 Atom 還差點(diǎn)，但已夠用 調(diào)試體驗(yàn)好，完爆 Vim 和 Atom 插件多，和 Vim 和 Atom...

    阿羅 評(píng)論0 收藏0

  • 如何搭建Electron開發(fā)環(huán)境

    摘要：原文發(fā)表于如何搭建開發(fā)環(huán)境這個(gè)項(xiàng)目結(jié)構(gòu)是我在編寫基于和的七牛文件上傳總結(jié)出來(lái)的本文主要介紹如何從零開始搭建高效的開發(fā)環(huán)境主要內(nèi)容如下通過(guò)合理的目錄劃分來(lái)組織代碼使用簡(jiǎn)化開發(fā)如何在渲染進(jìn)程開發(fā)時(shí)使用熱更新如何在主進(jìn)程開發(fā)時(shí)使用自動(dòng)重啟如何在主 原文發(fā)表于 https://lleohao.github.io/2017/09/02/如何搭建Electron開發(fā)環(huán)境/ 這個(gè)項(xiàng)目結(jié)構(gòu)是我在編寫...

    TwIStOy 評(píng)論0 收藏0

  • vue+koa2+mongo前后端分離restful，配置和部署到云

    摘要：前端項(xiàng)目使用搭建項(xiàng)目，這里就不發(fā)了安裝和配置或加載。目錄下文件修改來(lái)個(gè)請(qǐng)求，查看結(jié)果。 一。前端項(xiàng)目 1.使用vue-cli（vue2.0）搭建項(xiàng)目，這里就不發(fā)了. axios安裝和配置 ～ npm install axios 1. main.js或app.js加載axios。 import axios from axios Vue.prototype.$axios =...

    miracledan 評(píng)論0 收藏0

  • Nuxt項(xiàng)目支持eslint+pritter+typescript

    摘要：腳手架安裝好的基本項(xiàng)目項(xiàng)目名，如，按照提示安裝你想要的東西，本次項(xiàng)目預(yù)裝模式下，默認(rèn)的項(xiàng)目目錄如下保存自動(dòng)格式化修復(fù)本人習(xí)慣縮進(jìn)為個(gè)空格，但是生成的項(xiàng)目默認(rèn)為個(gè)，因此需要更改配置文件下的更改為保存時(shí)自動(dòng)修復(fù)錯(cuò)誤保存自動(dòng)格式化開啟支 腳手架安裝好nuxt的基本項(xiàng)目 npx create-nuxt-app ，如：npx create-nuxt-app nuxt-ts，按照提示安裝你想要的...

    draveness 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<