vscode 調試node.js

来源:http://www.cnblogs.com/klsw/archive/2017/11/01/7765427.html
-Advertisement-
Play Games

在開發的過程中,幾乎不可能一次性就能寫出毫無破綻的程式,斷點調試代碼是一個普遍的需求。 作為前端開發工程師,以往我們開發的JavaScript程式都運行在瀏覽器端,利用Chrome提供的開發者工具就可以方便的進行源碼斷點調試。其步驟有四,詳情不表,粗略概括如下: 但是,當我們用JavaScript開 ...


在開發的過程中,幾乎不可能一次性就能寫出毫無破綻的程式,斷點調試代碼是一個普遍的需求。

作為前端開發工程師,以往我們開發的JavaScript程式都運行在瀏覽器端,利用Chrome提供的開發者工具就可以方便的進行源碼斷點調試。其步驟有四,詳情不表,粗略概括如下:

  1. 打開Chrome開發者工具;
  2. 點擊進入Sources標簽頁,在頁面的左側就能看到JS代碼的目錄;
  3. 找到需要設置斷點的源文件,在需要中斷的哪行代碼左側單擊滑鼠左鍵,就可以設置斷點,如果你的代碼是uglify過的,則需導入相應的source-map來映射源碼。
  4. 刷新頁面(如果設置斷點的位置是一個事件處理函數,則直接觸發這個事件即可),代碼運行到斷點處的時候,程式就會掛起,這時候用滑鼠hover就可以查看當前各個變數的數值,並以此判斷程式是否正常運行了。

1.png

但是,當我們用JavaScript開發運行在服務端的Node.js程式時,Chrome開發者工具暫時派不上用場了。雖然也有辦法實現在Chrome上調試,不過這不是今天我們討論的範圍。

還有,說用console.log的那位同學,請你先不要說話…

實際上,許多IDE都集成了Debug的功能,包括較新版本的WebStorm就對Node.js調試支持得很好。

但是很多開發人員會覺得IDE太重,有沒有更輕量級一些的工具來實現斷點調試呢?今天就要給大家安利一下在VScode上進行斷點調試的方法。

2.png

VScode除了out-of-box支持JavaScript和TypeScript,還支持Node.js調試,簡直就是為前端工程師而生的,對不對…

要調試Node.js的前提是,你的電腦上已經安裝了Node.js的環境。

什麼?怎麼安裝Node.js?給你一點小提示:打開百度,搜索【安裝Node.js】,好了,不能提示更多了。

本文以調試express應用為例,並假設您已經安裝好了Node.js運行環境。

創建express應用

我們使用express-generator創建一個新的express應用。

1.在全局安裝express-generator

a.打開終端,輸入: npm install express-generator -g MacBook用戶全局安裝的時候記得在前面加上sudo

b.安裝完成之後,在終端輸入 express -v 如果看到下圖所示的信息,說明已經安裝成功了。

3.png

2.生成express應用目錄,假設這個應用的名稱為myapp 在終端輸入 express myapp 在當前目錄就生成了一個myapp目錄,目錄結構如下:

4.png

可以看到,這個小應用已經五臟俱全,有Node伺服器配置,公共資源文件夾,師徒文件夾,以及路由配置。

3.運行express應用

a.在終端中輸入指令

`cd myapp && npm install`

就可以進入項目目錄並安裝所有依賴,這一步可能需要比較長的時間,耐心等待安裝完成。

b.然後輸入指令

`npm start`

就可以啟動應用。

這時我們在瀏覽器中訪問localhost:3000,即可看到如下頁面:

5.png

這就說明express應用可以正常運行,接下來我們就可以使用VScode調試代碼了。

提示:為了避免調試時的埠衝突,我們先回到剛剛運行express應用的終端,ctrl+c關閉正在運行的express應用。

調試express應用

1.進入VScode界面,點擊界面左邊的第四個類似蟲子的按鈕,進入調試界面:

6.png

2.點擊頁面上方“沒有配置”下拉菜單,選擇“添加配置”。

7.png

3.選擇Node.js環境。

8.png

4.選擇完成之後,在項目的根目錄中會生成一個.vscode的目錄,這個目錄中存放了各種各樣的VScode編輯器的配置。現在這個目錄中就包含了一個文件名為lanuch.json的配置文件,配置文件的內容如下:

9.png

其中最重要的配置項就是“Program”欄位,這個欄位定義了整個應用的入口,開啟調試器的時候會從這個入口啟動應用。

我們發現當前這個欄位已經有值了,不要慌,那是因為VScode在初始化這個配置文件的時候,會查看package.json中是否有包含了鍵名為start的scripts,如果有的話,就會把start配置的內容作為“program”欄位的值。

5.點擊開始調試按鈕(綠色三角形),就可以開始調試。這時界面上方就會出現一個調試控制的面板,頁面右下方會出現一個調試控制台,可以查看你輸出的信息,在界面下放會出現一個狀態欄,當前的橘黃色表示應用在正常運行,如下圖所示:

10.png

6.我們再次在瀏覽中訪問localhost:3000,會發現頁面可以打開,應用已經正常啟動了。

7.接下來我們開始給應用設置斷點。我們打開myapp/routes/index.js文件,這個文件配置了應用根路徑的路由,當前的處理是返回一個頁面,傳入字元串"Express"作為視圖的參數。

11.png

8.我們用滑鼠在行號6的左邊單擊左鍵,就可以設置一個斷點。註意,添加斷點之前要先關閉調試,關閉的方法是點擊界面上方的調試控制面板中的停止按鈕(紅色正方形)。

12.png

9.設置完斷點之後,重新啟動調試,然後在瀏覽器中訪問localhost:3000,這時候,斷點的形狀發生了變化,程式停留在了斷點,調試控制面板的按鈕也發生了變化,從左到右依次是單步跳過,單步調試,單步跳出,重啟,停止調試。這幾個都是常見的斷點調試指令。設置完斷點之後,重新啟動調試,然後在瀏覽器中訪問localhost:3000,這時候,斷點的形狀發生了變化,程式停留在了斷點,調試控制面板的按鈕也發生了變化,從左到右依次是單步跳過,單步調試,單步跳出,重啟,停止調試。這幾個都是常見的斷點調試指令。

12.png13.png

10.在界面的左邊,可以查看當前上下文環境,也可以設置變數監聽。

14.png

11.將滑鼠防止在斷點前的變數或者參數上,也可以查看該變數當前的數值,體驗與Chrome開發者工具的調試一致。

15.png

Well,開啟VScode的Node.js調試之旅吧!!

轉自:https://cnodejs.org/topic/58f376fec749f63d48fe9548


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 首先你要知道什麼是php的魔術方法,它不是變魔術的,如果你想學習變魔術來錯地方了哦! 定義:PHP 將所有以 __(兩個下劃線)開頭的類方法保留為魔術方法。所以在定義類方法時,除了上述魔術方法,建議不要以 __ 為首碼。 作用:利用模式方法可以輕鬆實現PHP面向對象中重載(Overloading即動 ...
  • 對於進行nuget打包時,有時我們需要添加一個配置文件,就是一些文本文件,而這些文件我們在網站發佈時需要同時複製到輸出目錄,否則會出現文件丟失的問題,我們在打包時通過添加powershell腳本來解決它。 一般添加powershell包之後,包的格式如下 添加-〉工具-〉install.ps1腳本 ...
  • 首先不得不提的一個概念是, 類 與 對象; 這在 任何面向對象的語言中, 都是一個優先度極高的概念, 我首先瞭解到的概念則是: 類是對象的集合, 是對象的抽象化, 對象是類的實例, 是類的具象化. 在歸納總結中, 將具有某些共同屬性 及 方法的概念, 實物, 進行抽象化, 就是在 java 中常常談 ...
  • 實現網站驗證碼切換功能 一、樣例 樣例1、 樣例2、 二、實現原理 三、實現代碼 com.fry.servlet.VerifyCodeServlet verifyCode.html 要讓按鈕一直能點 ...
  • 創建類創建對象 一、什麼是成員變數 對象的一些狀態特征使用成員變數表示 二、行為什麼什麼表示 對象的 行為 使用 方法 表示 三、如何創建對象 class 類名{0 ~ N個成員變數0 ~ N個方法} 註意1:若類使用public修飾,則當前所在的文件名必須和類名相同2:類型必須符合標識符的命名規範 ...
  • 平時在寫的代碼過程中,經常會遇到對對象Object的數據處理。而在對對象的數據處理中,操作最頻繁的是“數據引用”、“值的修改”、“獲取關鍵字(屬性)”。平時最煩的也是“獲取關鍵字”,經常忘記怎麼去獲取,這裡做一下整理。 既然要"獲取關鍵字",那麼得首先有一個對象才行。創建對象的方式很多,我自己慣用的 ...
  • 一般我發現slot都是用在子組件 不知道對不對,不對的請留言指教 ,謝謝謝謝 使用slot場景一: 子組件Minput.vue 父組件 Minput 這種情況下 Minput標簽內的文字是不會渲染出來的 如果現在想在裡面把文字渲染出來怎麼辦 好 用slot 子組件 這樣的話,父組件的裡面的文字就可以 ...
  • 今天在調試bug的時候有一個需求,我需要知道我的代碼中有哪些地方在修改body的style,然後我想到了DOM節點監聽。 為body添加斷點然後開始調試,但是現在的前端技術棧太複雜,即使打了斷點也會跳進第三方包里。調用棧里有太多無關的js代碼,妨礙調試。 所以你可以選中文件右擊後,選擇Blackbo ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...