怎麼使用 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 的設定。

設定是這樣的：

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

然後點擊 debug 運行：

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

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

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

或看下某個元件的hooks 的值是怎麼變化的（hooks 的值都存在元件的fiberNode 的memerizedState 屬性上）：

可以看到，偵錯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 也支持了：

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

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

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

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

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

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

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

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

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

#來算一題：

函數A 總耗時50 ms，它呼叫的函數B 耗時10 ms，它呼叫的函數C 耗時20 ms，問：函數A的其餘邏輯耗時多少ms？

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

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

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

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

每個長條的寬度代表了每個 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中文網其他相關文章！