摘要:在開(kāi)發(fā)的過(guò)程中,幾乎不可能一次性就能寫出毫無(wú)破綻的程序,斷點(diǎn)調(diào)試代碼是一個(gè)普遍的需求。作為前端開(kāi)發(fā)工程師,以往我們開(kāi)發(fā)的程序都運(yùn)行在瀏覽器端,利用提供的開(kāi)發(fā)者工具就可以方便的進(jìn)行源碼斷點(diǎn)調(diào)試。這幾個(gè)都是常見(jiàn)的斷點(diǎn)調(diào)試指令。
在開(kāi)發(fā)的過(guò)程中,幾乎不可能一次性就能寫出毫無(wú)破綻的程序,斷點(diǎn)調(diào)試代碼是一個(gè)普遍的需求。
作為前端開(kāi)發(fā)工程師,以往我們開(kāi)發(fā)的JavaScript程序都運(yùn)行在瀏覽器端,利用Chrome提供的開(kāi)發(fā)者工具就可以方便的進(jìn)行源碼斷點(diǎn)調(diào)試。其步驟有四,詳情不表,粗略概括如下:
打開(kāi)Chrome開(kāi)發(fā)者工具;
點(diǎn)擊進(jìn)入Sources標(biāo)簽頁(yè),在頁(yè)面的左側(cè)就能看到JS代碼的目錄;
找到需要設(shè)置斷點(diǎn)的源文件,在需要中斷的哪行代碼左側(cè)單擊鼠標(biāo)左鍵,就可以設(shè)置斷點(diǎn),如果你的代碼是uglify過(guò)的,則需導(dǎo)入相應(yīng)的source-map來(lái)映射源碼。
刷新頁(yè)面(如果設(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開(kāi)發(fā)運(yùn)行在服務(wù)端的Node.js程序時(shí),Chrome開(kāi)發(fā)者工具暫時(shí)派不上用場(chǎng)了。雖然也有辦法實(shí)現(xiàn)在Chrome上調(diào)試,不過(guò)這不是今天我們討論的范圍。
還有,說(shuō)用console.log的那位同學(xué),請(qǐng)你先不要說(shuō)話...
實(shí)際上,許多IDE都集成了Debug的功能,包括較新版本的WebStorm就對(duì)Node.js調(diào)試支持得很好。
但是很多開(kāi)發(fā)人員會(huì)覺(jué)得IDE太重,有沒(méi)有更輕量級(jí)一些的工具來(lái)實(shí)現(xiàn)斷點(diǎn)調(diào)試呢?今天就要給大家安利一下在VScode上進(jìn)行斷點(diǎn)調(diào)試的方法。
VScode除了out-of-box支持JavaScript和TypeScript,還支持Node.js調(diào)試,簡(jiǎn)直就是為前端工程師而生的,對(duì)不對(duì)...
要調(diào)試Node.js的前提是,你的電腦上已經(jīng)安裝了Node.js的環(huán)境。
什么?怎么安裝Node.js?給你一點(diǎn)小提示:打開(kāi)百度,搜索【安裝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-generatora.打開(kāi)終端,輸入:
npm install express-generator -g
MacBook用戶全局安裝的時(shí)候記得在前面加上sudo
b.安裝完成之后,在終端輸入
express -v
如果看到下圖所示的信息,說(shuō)明已經(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)目目錄并安裝所有依賴,這一步可能需要比較長(zhǎng)的時(shí)間,耐心等待安裝完成。
b.然后輸入指令
npm start
就可以啟動(dòng)應(yīng)用。
這時(shí)我們?cè)跒g覽器中訪問(wèn)localhost:3000,即可看到如下頁(yè)面:
這就說(shuō)明express應(yīng)用可以正常運(yùn)行,接下來(lái)我們就可以使用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)擊頁(yè)面上方“沒(méi)有配置”下拉菜單,選擇“添加配置”。
3.選擇Node.js環(huán)境。
4.選擇完成之后,在項(xiàng)目的根目錄中會(huì)生成一個(gè).vscode的目錄,這個(gè)目錄中存放了各種各樣的VScode編輯器的配置。現(xiàn)在這個(gè)目錄中就包含了一個(gè)文件名為lanuch.json的配置文件,配置文件的內(nèi)容如下:
其中最重要的配置項(xiàng)就是“Program”字段,這個(gè)字段定義了整個(gè)應(yīng)用的入口,開(kāi)啟調(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)擊開(kāi)始調(diào)試按鈕(綠色三角形),就可以開(kāi)始調(diào)試。這時(shí)界面上方就會(huì)出現(xiàn)一個(gè)調(diào)試控制的面板,頁(yè)面右下方會(huì)出現(xiàn)一個(gè)調(diào)試控制臺(tái),可以查看你輸出的信息,在界面下放會(huì)出現(xiàn)一個(gè)狀態(tài)欄,當(dāng)前的橘黃色表示應(yīng)用在正常運(yùn)行,如下圖所示:
6.我們?cè)俅卧跒g覽中訪問(wèn)localhost:3000,會(huì)發(fā)現(xiàn)頁(yè)面可以打開(kāi),應(yīng)用已經(jīng)正常啟動(dòng)了。
7.接下來(lái)我們開(kāi)始給應(yīng)用設(shè)置斷點(diǎn)。我們打開(kāi)myapp/routes/index.js文件,這個(gè)文件配置了應(yīng)用根路徑的路由,當(dāng)前的處理是返回一個(gè)頁(yè)面,傳入字符串"Express"作為視圖的參數(shù)。
8.我們用鼠標(biāo)在行號(hà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)試,然后在瀏覽器中訪問(wèn)localhost:3000,這時(shí)候,斷點(diǎn)的形狀發(fā)生了變化,程序停留在了斷點(diǎn),調(diào)試控制面板的按鈕也發(fā)生了變化,從左到右依次是單步跳過(guò),單步調(diào)試,單步跳出,重啟,停止調(diào)試。這幾個(gè)都是常見(jiàn)的斷點(diǎn)調(diào)試指令。設(shè)置完斷點(diǎn)之后,重新啟動(dòng)調(diào)試,然后在瀏覽器中訪問(wèn)localhost:3000,這時(shí)候,斷點(diǎn)的形狀發(fā)生了變化,程序停留在了斷點(diǎn),調(diào)試控制面板的按鈕也發(fā)生了變化,從左到右依次是單步跳過(guò),單步調(diào)試,單步跳出,重啟,停止調(diào)試。這幾個(gè)都是常見(jiàn)的斷點(diǎn)調(diào)試指令。
10.在界面的左邊,可以查看當(dāng)前上下文環(huán)境,也可以設(shè)置變量監(jiān)聽(tīng)。
11.將鼠標(biāo)防止在斷點(diǎn)前的變量或者參數(shù)上,也可以查看該變量當(dāng)前的數(shù)值,體驗(yàn)與Chrome開(kāi)發(fā)者工具的調(diào)試一致。
Well,開(kāi)啟VScode的Node.js調(diào)試之旅吧!!
那個(gè)console.log的同學(xué),你可以說(shuō)話了...
作者:方浩,轉(zhuǎn)載請(qǐng)注明出處!!!
我的微信公眾號(hào):webcoding ,歡迎掃碼關(guān)注
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/82514.html
摘要:接下來(lái)的內(nèi)容將從以下幾方面進(jìn)行展開(kāi)調(diào)試前端代碼調(diào)試通過(guò)啟動(dòng)的服務(wù)器要使用的調(diào)試功能,首先就得配置文件。調(diào)試前端代碼通過(guò)調(diào)試前端代碼主要依賴于一個(gè)插件,該插件主要利用所開(kāi)放出來(lái)的接口來(lái)實(shí)現(xiàn)對(duì)其渲染的頁(yè)面進(jìn)行調(diào)試。 本文最初發(fā)布于我的個(gè)人博客:咀嚼之味 Visual Studio Code (以下簡(jiǎn)稱 vscode) 如今已經(jīng)代替 Sublime,成為前端工程師們最喜愛(ài)的代碼編輯器。它作為...
摘要:更好的斷點(diǎn)控制啟用禁用重新啟用可以在調(diào)試視圖中的斷點(diǎn)區(qū)域設(shè)置。編輯器邊距中的斷點(diǎn)一般用紅色的實(shí)心圓表示。前端開(kāi)發(fā)必備插件功能性插件匹配標(biāo)簽,關(guān)閉對(duì)應(yīng)的標(biāo)簽。這可以使得團(tuán)隊(duì)內(nèi)的書寫更為規(guī)范且具有一致性。 Visual Studio Code是個(gè)現(xiàn)下比較流行的編輯器,啟動(dòng)非常快,完全可以用來(lái)代替其他文本文件編輯工具。又可以用來(lái)做開(kāi)發(fā),支持各種語(yǔ)言,相比其他IDE,輕量級(jí)完全可配置還集成Gi...
摘要:個(gè)人還是更加習(xí)慣于斷點(diǎn)調(diào)試。這篇文章將介紹如何配置和來(lái)完成直接在斷點(diǎn)調(diào)試代碼并且在的調(diào)試窗口看到中相同的值。現(xiàn)在就可以在文件的代碼中打斷點(diǎn)進(jìn)行調(diào)試了。 很多人習(xí)慣在 Chrome 的調(diào)試窗口中調(diào)試 Vue 代碼, 或者直接使用 console.log 來(lái)觀察變量值, 這是非常痛苦的一件事,需要同時(shí)打開(kāi)至少 3 個(gè)窗體。個(gè)人還是更加習(xí)慣于斷點(diǎn)調(diào)試。這篇文章將介紹如何配置 Visual S...
摘要:在這個(gè)編輯器中,和是其中排名靠前的兩個(gè)。是一個(gè)免費(fèi)的輕量級(jí)編輯器和,用于和開(kāi)發(fā)。對(duì)于免費(fèi)的代碼編輯器來(lái)說(shuō),是一個(gè)很好的選擇。可以安裝兩個(gè)命令行實(shí)用程序,用于從啟動(dòng)編輯器,用于管理的軟件包。 對(duì)于JavaScript程序員來(lái)說(shuō),目前有很多很棒的工具可供選擇。本文將會(huì)討論10個(gè)優(yōu)秀的支持javascript,HTML5和CSS開(kāi)發(fā),并且可以使用Markdown進(jìn)行文檔編寫的文本編輯器。為什...
摘要:最近由于工作關(guān)系,開(kāi)始寫程序,同事有用的,有用的。第一種適合及以上版本,因?yàn)樵诎姹酒穑霈F(xiàn)了文件,配置可以寫成用文件啟動(dòng)程序,實(shí)測(cè)可以觸發(fā)斷點(diǎn)。 最近由于工作關(guān)系,開(kāi)始寫flask web程序,同事有用Vim的,有用PyCharm的。在調(diào)研了一通python的編輯器,IDE之后,發(fā)現(xiàn)Visual Studio Code相對(duì)比較適合我。 VSC有相對(duì)較全的功能,比較好看舒服的主題,良好的...
閱讀 3441·2023-04-25 23:25
閱讀 2069·2021-11-12 10:36
閱讀 2816·2019-08-30 12:47
閱讀 2037·2019-08-29 18:45
閱讀 435·2019-08-29 17:28
閱讀 1785·2019-08-29 17:15
閱讀 1707·2019-08-29 16:05
閱讀 1405·2019-08-29 14:17