首頁  >  文章  >  開發工具  >  怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

青灯夜游
青灯夜游轉載
2021-09-26 11:15:554629瀏覽

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼?以下這篇文章跟大家介紹一下用 VSCode 調試網頁的 JS 程式碼的方法,希望對大家有幫助!

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

比起純看程式碼來說,我比較推薦結合 debugger 來看,它可以讓我們看到程式碼實際的執行路線,每一個變數的變化。可以大段大段程式碼跳著看,也可以對某段邏輯一步步的執行來看。 【推薦學習:《vscode教學》】

Javascript 程式碼主要有兩個運行環境,一個是 Node.js ,一個是瀏覽器。一般來說,調試 Node.js 上跑的 JS 程式碼我會用 VSCode 的 debugger,調試瀏覽器上的 JS 程式碼我會用 chrome devtools。直到有一天我發現 VSCode 也能調試瀏覽器上的 JS 程式碼,試了一下,是真的香。

具體有多香呢?我們一起來看一下。

在專案的根目錄下有個 .vscode/launch.json 的文件,保存了 VSCode 的調試配置。

我們點擊 Add Configuration 按鈕新增一個調試 chrome 的設定。

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

設定是這樣的:

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

#url 是網頁的位址,我們可以把本地的dev server 跑起來,然後把地址填在這裡。

然後點擊 debug 運行:

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

VSCode 就會起一個 Chrome 瀏覽器載入該網頁,並且在我們的斷點處斷住。會在左側面板顯示呼叫堆疊、作用域的變數等。

最底層當然是 webpack 的入口,我們可以單步調試 webpack 的 runtime 部分。

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

也可以看下從 render 的流程,例如 ReactDOM.render 到渲染到某個子元件,中間都做了什麼。

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

或看下某個元件的hooks 的值是怎麼變化的(hooks 的值都存在元件的fiberNode 的memerizedState 屬性上):

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

可以看到,偵錯webpack runtime 程式碼,或是偵錯React 原始碼、或是業務程式碼,都很方便。

可能你會說,這個在 chrome devtools 裡也可以啊,有啥特別的地方麼?

確實,chrome devtools 也能做到一樣的事情,但VSCode 來調試網頁程式碼有兩個主要的好處:

  1. 在編輯器裡面給程式碼打斷點,還可以邊調試邊改程式碼。

  2. 調試 Node.js 的程式碼和偵錯網頁的程式碼用同樣的工具,經驗可以重複使用,體驗也一致。

對於第一點,chrome devtools 的 sources 其實也可以修改程式碼然後儲存,但畢竟不是專門的編輯器,用它來寫程式碼比較彆扭。我個人是比較習慣邊 debug 邊改程式碼的,這點 VSCode 勝出。

調試Node.js 我們一般用VSCode,而調試網頁也可以用VSCode,那麼只要用熟了一個工具就行了,不用再去學chrome devtools 怎麼用,而且用VSCode 調試體驗也更好,畢竟是我們每天都用的編輯器,更順手,這點也是VSCode 勝出。

但你可能會說那我想看 profile 資訊呢?也就是每個函數的耗時,這對於分析程式碼效能很重要。

這點VSCode debugger 也支持了:

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

#點擊左側的按鈕,就可以錄製一段時間內的耗時訊息,可以手動停止、可以指定固定的時間、可以指定到某個斷點,這樣3 種方式來選擇某一段程式碼的執行過程來記錄profile 資訊。

它會在專案根目錄中保存一個 xxx.cpuprofile 的文件,裡面記錄了執行每一個函數的耗時,可以層層分析某段程式碼的耗時,來定位問題從而優化效能。

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

如果安裝了 vscode-js-profile-flame 的 VSCode extension 後,還可以換成火焰圖的展示。

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

有的同學可能看不懂火焰圖,我來講一下:

我們知道某個函數的執行路徑是有 call stack 的,可以看到從哪個函數一步一步呼叫過來的,是一條線。

怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

但其實這個函數呼叫的函數不只一個,可能是多個:

1怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

##呼叫堆疊只是保存了執行到某個函數的一條路線,而火焰圖則保存了所有的執行路線。

所以你會在火焰圖中看到這樣的分叉:

1怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

#其實就是這樣的執行過程:

1怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

#來算一題:

函數A 總耗時50 ms,它呼叫的函數B 耗時10 ms,它呼叫的函數C 耗時20 ms,問:函數A的其餘邏輯耗時多少ms?

1怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

很明顯可以算是 50 - 10 - 20= 20 ms,可能你覺得函數D 耗時太長了,那就去看下具體程式碼,然後看看是不是可以優化,之後再看下耗時。

就這麼簡單,profile 的效能分析就是這麼做的,簡單的加減法。

火焰圖中的每個方塊的寬度也反應了耗時,所以更直觀一些。

JS 引擎是 event loop 的方式不斷執行 JS 程式碼,因為火焰圖是反應所有的程式碼的執行時間,所以會看到每一個 event loop 的程式碼執行,具體耗時多少。

1怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

每個長條的寬度代表了每個 loop 的耗時,那當然是越細越好,這樣就不會阻塞渲染了。所以效能優化目標就是讓火焰圖變成一個個小細條,不能粗了。

繞回正題,VSCode 的 cpu profile 和火焰圖相比 chrome devtools 的 performance 其實更簡潔易用,可以滿足大多數的需求。

我覺得,除非你想看 rendering、memory 這些訊息,因為 VSCode 沒有支援需要用 chrome devtools 以外,調試 JS 程式碼,看 profile 資訊和火焰圖,用 VSCode 足夠了。

反正我覺得 VSCode 調試網頁的 JS 程式碼挺香的,你覺得呢?

.markdown-body pre,.markdown-body pre>code.hljs{color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style :italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:700}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr, .hljs-template-variable,.hljs-variable{color:teal}.hljs-doctag,.hljs-string{color:#d14}.hljs-section,.hljs-selector-id,.hljs-title{color: #900;font-weight:700}.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type{color:#458;font-weight:700}.hljs-attribute, .hljs-name,.hljs-tag{color:navy;font-weight:400}.hljs-link,.hljs-regexp{color:#009926}.hljs-bullet,.hljs-symbol{color:#990073} .hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background: #dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
原文網址:https://juejin.cn/post/7010768454458277924

作者:zxg_神說要有光

更多程式相關知識,請造訪:

程式設計影片! !

以上是怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:掘金-zxg_神说要有光。如有侵權,請聯絡admin@php.cn刪除