建站
咨詢
售后
建站咨詢
新聞中心
在開發(fā)的過程中，幾乎不可能一次性就能寫出毫無破綻的程序，斷點(diǎn)調(diào)試代碼是一個(gè)普遍的需求。
創(chuàng)新互聯(lián)建站的客戶來自各行各業(yè)，為了共同目標(biāo)，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括做網(wǎng)站、網(wǎng)站設(shè)計(jì)、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。
作為前端開發(fā)工程師，以往我們開發(fā)的JavaScript程序都運(yùn)行在瀏覽器端，利用Chrome提供的開發(fā)者工具就可以方便的進(jìn)行源碼斷點(diǎn)調(diào)試。其步驟有四，詳情不表，粗略概括如下：
- 打開Chrome開發(fā)者工具;
- 點(diǎn)擊進(jìn)入Sources標(biāo)簽頁，在頁面的左側(cè)就能看到JS代碼的目錄;
- 找到需要設(shè)置斷點(diǎn)的源文件，在需要中斷的哪行代碼左側(cè)單擊鼠標(biāo)左鍵，就可以設(shè)置斷點(diǎn)，如果你的代碼是uglify過的，則需導(dǎo)入相應(yīng)的source-map來映射源碼。
- 刷新頁面(如果設(shè)置斷點(diǎn)的位置是一個(gè)事件處理函數(shù)，則直接觸發(fā)這個(gè)事件即可)，代碼運(yùn)行到斷點(diǎn)處的時(shí)候，程序就會(huì)掛起，這時(shí)候用鼠標(biāo)hover就可以查看當(dāng)前各個(gè)變量的數(shù)值，并以此判斷程序是否正常運(yùn)行了。
但是，當(dāng)我們用JavaScript開發(fā)運(yùn)行在服務(wù)端的Node.js程序時(shí)，Chrome開發(fā)者工具暫時(shí)派不上用場了。雖然也有辦法實(shí)現(xiàn)在Chrome上調(diào)試，不過這不是今天我們討論的范圍。
還有，說用console.log的那位同學(xué)，請你先不要說話...
實(shí)際上，許多IDE都集成了Debug的功能，包括較新版本的WebStorm就對Node.js調(diào)試支持得很好。
但是很多開發(fā)人員會(huì)覺得IDE太重，有沒有更輕量級一些的工具來實(shí)現(xiàn)斷點(diǎn)調(diào)試呢?今天就要給大家安利一下在VScode上進(jìn)行斷點(diǎn)調(diào)試的方法。
VScode除了out-of-box支持JavaScript和TypeScript，還支持Node.js調(diào)試，簡直就是為前端工程師而生的，對不對...
要調(diào)試Node.js的前提是，你的電腦上已經(jīng)安裝了Node.js的環(huán)境。
什么?怎么安裝Node.js?給你一點(diǎn)小提示：打開百度，搜索【安裝Node.js】，好了，不能提示更多了。
本文以調(diào)試express應(yīng)用為例，并假設(shè)您已經(jīng)安裝好了Node.js運(yùn)行環(huán)境。
創(chuàng)建express應(yīng)用
我們使用express-generator創(chuàng)建一個(gè)新的express應(yīng)用。
1.在全局安裝express-generator
a.打開終端，輸入：
- npm install express-generator -g
MacBook用戶全局安裝的時(shí)候記得在前面加上sudo
b.安裝完成之后，在終端輸入
- express -v
如果看到下圖所示的信息，說明已經(jīng)安裝成功了。
2.生成express應(yīng)用目錄，假設(shè)這個(gè)應(yīng)用的名稱為myapp
在終端輸入
- express myapp
在當(dāng)前目錄就生成了一個(gè)myapp目錄，目錄結(jié)構(gòu)如下：
可以看到，這個(gè)小應(yīng)用已經(jīng)五臟俱全，有Node服務(wù)器配置，公共資源文件夾，師徒文件夾，以及路由配置。
3.運(yùn)行express應(yīng)用
a.在終端中輸入指令
- cd myapp && npm install
就可以進(jìn)入項(xiàng)目目錄并安裝所有依賴，這一步可能需要比較長的時(shí)間，耐心等待安裝完成。
b.然后輸入指令
- npm start
就可以啟動(dòng)應(yīng)用。
這時(shí)我們在瀏覽器中訪問localhost:3000，即可看到如下頁面：
這就說明express應(yīng)用可以正常運(yùn)行，接下來我們就可以使用VScode調(diào)試代碼了。
提示：為了避免調(diào)試時(shí)的端口沖突，我們先回到剛剛運(yùn)行express應(yīng)用的終端，ctrl+c關(guān)閉正在運(yùn)行的express應(yīng)用。
調(diào)試express應(yīng)用
1.進(jìn)入VScode界面，點(diǎn)擊界面左邊的第四個(gè)類似蟲子的按鈕，進(jìn)入調(diào)試界面：
2.點(diǎn)擊頁面上方“沒有配置”下拉菜單，選擇“添加配置”。
3.選擇Node.js環(huán)境。
4.選擇完成之后，在項(xiàng)目的根目錄中會(huì)生成一個(gè).vscode的目錄，這個(gè)目錄中存放了各種各樣的VScode編輯器的配置?，F(xiàn)在這個(gè)目錄中就包含了一個(gè)文件名為lanuch.json的配置文件，配置文件的內(nèi)容如下：
其中最重要的配置項(xiàng)就是“Program”字段，這個(gè)字段定義了整個(gè)應(yīng)用的入口，開啟調(diào)試器的時(shí)候會(huì)從這個(gè)入口啟動(dòng)應(yīng)用。
我們發(fā)現(xiàn)當(dāng)前這個(gè)字段已經(jīng)有值了，不要慌，那是因?yàn)閂Scode在初始化這個(gè)配置文件的時(shí)候，會(huì)查看package.json中是否有包含了鍵名為start的scripts，如果有的話，就會(huì)把start配置的內(nèi)容作為“program”字段的值。
5.點(diǎn)擊開始調(diào)試按鈕(綠色三角形)，就可以開始調(diào)試。這時(shí)界面上方就會(huì)出現(xiàn)一個(gè)調(diào)試控制的面板，頁面右下方會(huì)出現(xiàn)一個(gè)調(diào)試控制臺，可以查看你輸出的信息，在界面下放會(huì)出現(xiàn)一個(gè)狀態(tài)欄，當(dāng)前的橘黃色表示應(yīng)用在正常運(yùn)行，如下圖所示：
6.我們再次在瀏覽中訪問localhost:3000，會(huì)發(fā)現(xiàn)頁面可以打開，應(yīng)用已經(jīng)正常啟動(dòng)了。
7.接下來我們開始給應(yīng)用設(shè)置斷點(diǎn)。我們打開myapp/routes/index.js文件，這個(gè)文件配置了應(yīng)用根路徑的路由，當(dāng)前的處理是返回一個(gè)頁面，傳入字符串"Express"作為視圖的參數(shù)。
8.我們用鼠標(biāo)在行號6的左邊單擊左鍵，就可以設(shè)置一個(gè)斷點(diǎn)。注意，添加斷點(diǎn)之前要先關(guān)閉調(diào)試，關(guān)閉的方法是點(diǎn)擊界面上方的調(diào)試控制面板中的停止按鈕(紅色正方形)。
9.設(shè)置完斷點(diǎn)之后，重新啟動(dòng)調(diào)試，然后在瀏覽器中訪問localhost:3000，這時(shí)候，斷點(diǎn)的形狀發(fā)生了變化，程序停留在了斷點(diǎn)，調(diào)試控制面板的按鈕也發(fā)生了變化，從左到右依次是單步跳過，單步調(diào)試，單步跳出，重啟，停止調(diào)試。這幾個(gè)都是常見的斷點(diǎn)調(diào)試指令。設(shè)置完斷點(diǎn)之后，重新啟動(dòng)調(diào)試，然后在瀏覽器中訪問localhost:3000，這時(shí)候，斷點(diǎn)的形狀發(fā)生了變化，程序停留在了斷點(diǎn)，調(diào)試控制面板的按鈕也發(fā)生了變化，從左到右依次是單步跳過，單步調(diào)試，單步跳出，重啟，停止調(diào)試。這幾個(gè)都是常見的斷點(diǎn)調(diào)試指令。
10.在界面的左邊，可以查看當(dāng)前上下文環(huán)境，也可以設(shè)置變量監(jiān)聽。
11.將鼠標(biāo)防止在斷點(diǎn)前的變量或者參數(shù)上，也可以查看該變量當(dāng)前的數(shù)值，體驗(yàn)與Chrome開發(fā)者工具的調(diào)試一致。
Well，開啟VScode的Node.js調(diào)試之旅吧!!那個(gè)console.log的同學(xué)，你可以說話了...
當(dāng)前名稱：使用VisualStudioCode對Node.js進(jìn)行斷點(diǎn)調(diào)試
分享地址：http://m.fisionsoft.com.cn/article/ccdgphg.html
