vscode debugger 除錯服務

visual studio code(以下簡稱 vscode) 如今已經代替 sublime，成為前端工程師們最喜愛的**編輯器。它作為乙個大型的開源專案，不斷推陳出新；社群中湧現出大量優質的外掛程式，以支援我們更加舒服地進行開發工作。在近期的工作中，我嘗試通過 vscode 來提公升除錯**的幸福度，積累了一點點小心得在此與大家分享一下。

接下來的內容將從以下幾方面進行展開：

launch / attach

除錯前端**

除錯通過 nodemon 啟動的 node 伺服器

要使用 vscode 的除錯功能，首先就得配置.vscode/launch.json檔案。以最簡單的 node 除錯配置為例：

/index.js"},]
}

其中最重要的引數是request，它的取值有兩種launch和attach。

這兩種截然不同的模式到底有什麼具體的應用場景呢？且看後文。

其中除錯 chrome 頁面的配置如下所示：

/frontend"}]
}

如之前所述，通過第乙個 launch 配置就能啟動乙個通過 vscode 除錯的 chrome。大家可以直接使用我組織好的專案 zry656565/vscode-debug-sample 進行測試，測試方法在該項目的 readme 裡面寫得很清楚了。簡要步驟概括為：

npm run frontend

啟動除錯配置：「啟動乙個獨立的 chrome 以除錯 frontend」

在frontend/index.js中加斷點

訪問http://localhost:8091/frontend/

使用launch模式除錯前端**存在乙個問題，就是 vscode 會以新訪客的身份開啟乙個新的 chrome 程序，也就是說你之前在 chrome 上裝的外掛程式都沒法在這個頁面上生效（如下圖所示）。

在這種情況下attach模式就有它存在的意義了：對乙個已經啟動的 chrome 進行監聽除錯。

/frontend"}]
}

有一部分遇到的問題可以直接在 debugger for chrome 的 faq 中得到解答。

如今，使用 node 伺服器開發一些中間層的服務也慢慢納入了所謂「大前端」的範疇。而在開發 node 服務時，我們通常要借助類似於 nodemon 這樣的工具來避免頻繁手動重啟伺服器。在這種情況下，我們又如何利用 vscode 來進行斷點除錯呢？先來看看示例配置檔案：

,]}

首先，為了配合 nodemon 在監聽到檔案修改時重啟伺服器，此處需要新增乙個restart引數。同時大家可能注意到了，這裡給出了兩種模式，大家可能根據以下區別來選擇合適自己的協議：

runtime

『legacy protocol』

『inspector protocol』

io.js

allno

node.js

< 8.x

>= 6.3 (windows: >= 6.9)

electron

allnot yet

chakra

allnot yet

通俗來說，舊版 node (< 6.3) 推薦使用 legacy protocol (--debug模式，預設 5858 埠)，而新版的 node (>= 6.3) 推薦使用 inspector protocol (--inspect模式，預設 9229 埠)。

需要注意的是，在啟動 nodemon 程式時，也要新增對應的引數，比如：

詳細的例子同樣可以在 zry656565/vscode-debug-sample 中找到。

在我看完了這篇文章以後，試著去用了下vscode debugger for chrome，在debugger的時候瀏覽器彈出了乙個新的mini版的chrome視窗，然而用下來感覺還是沒有chrome瀏覽器裡面的控制台好用，說句實在的，以後還是用chrome控制台好了...

vscode debugger 除錯服務

spark調優 shuffle調優

Spark Spark調優資源調優

尾調遞迴，尾調優化

vscode debugger 除錯服務

spark調優 shuffle調優

Spark Spark調優 資源調優

尾調遞迴 ，尾調優化

相關推薦

Spark Spark調優資源調優

尾調遞迴，尾調優化