国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用Visual Studio Code對(duì)Node.js進(jìn)行斷點(diǎn)調(diào)試

gityuan / 849人閱讀

摘要:在開(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-generator

a.打開(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

相關(guān)文章

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

    摘要:接下來(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)的代碼編輯器。它作為...

    dongfangyiyu 評(píng)論0 收藏0
  • Visual Studio Code前端開(kāi)發(fā)使用之旅

    摘要:更好的斷點(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...

    stormjun 評(píng)論0 收藏0
  • Visual Studio Code 斷點(diǎn)調(diào)試 Vue

    摘要:個(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...

    qpwoeiru96 評(píng)論0 收藏0
  • Top 10 JavaScript編輯器,你在用哪個(gè)?

    摘要:在這個(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)行文檔編寫的文本編輯器。為什...

    zombieda 評(píng)論0 收藏0
  • 使用Visual Studio Code編寫調(diào)試Python Flask程序

    摘要:最近由于工作關(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ì)較全的功能,比較好看舒服的主題,良好的...

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

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

0條評(píng)論

gityuan

|高級(jí)講師

TA的文章

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