Code Runner
- 在應用商店中搜索
Code Runner插件進行安裝。
- 選中你要執行的Javascript腳本，右鍵選擇
Run Code，利用Console.log在下方的輸出窗口里可以看到輸出結果。 - 如果不小心點擊了關閉按鈕
X關閉了輸出窗口可以點擊左上方的調試控制台重新打開。 - 通常我用它快速輸出一段JS代碼的運算結果。
- 寫算法的時候有時候出岔子
Run Code會死循環一直在跑，此時在下方的輸出窗口中，右鍵菜單里選擇stop code run即可強制退出。
Node.js
- Node.js® 是一個基於 Chrome V8 引擎 的 JavaScript 運行時。
- 上Node.js官方網站下載Node.js並進行安裝。
- 初次
F5調試時，會在工作區目錄下生成一個.vscode文件夾和launch.json文件。 - launch.json文件內容大概如下所示：
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node.js 調試",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\LeetCode\\removeElement.js"
}
]
}
- 我們主要是修改
program這個字段，修改成我們要調試的js文件路徑即可。
- 打上斷點，就可以利用我們常用的
F5，F10，F11等快捷鍵進行調試了，調試結果會輸出到調試控制台上。 - 注意如果你安裝了其他的調試環境，需要手動選擇上方的復選框中的
Node.js調試，選成你配置的Node.js環境。 - 代碼死循環了直接點擊上方工具條中的
停止(shift+F5)即可直接退出。 - 每當
Code Runner輸出結果出乎我意料之外的時候我就會用Node.js進行調試。
Debugger for Chrome
- 在應用商店中搜索
Debugger for Chrome，Debugger for Firefox等進行安裝。 - 同樣會生成一個
.vscode文件夾和launch.json文件，在launch.json文件中進行配置，其配置大概如下所示：
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
//這一段是Node.js的配置
{
"type": "node",
"request": "launch",
"name": "Node.js 調試",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\LeetCode\\removeElement.js"
},
//這一段是Debugger for chrome的配置
{
"name": "使用本機 Chrome 調試",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/ChromeTest/index.html",
//使用外部服務器時,請注釋掉 file, 改用 url, 並將 useBuildInServer 設置為 false "http://mysite.com/index.html
// "url": "http://mysite.com/index.html",
"runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安裝路徑
"sourceMaps": true,
"webRoot": "${workspaceRoot}/ChromeTest",
// "preLaunchTask":"build",
"userDataDir": "${tmpdir}",
"port": 5433
}
]
}
- 需要手工創建一個html文件，這里我們在
file里配置的值是index.html，因此我們創建的是index.html文件。並在文件中用script:src引入你需要調試的js文件，之后就可以打斷點進行調試了。 - 在上方的復選框中選擇
使用本機 Chrome 調試，因為我們在launch.json文件配置的name屬性叫這個，F5啟動調試即可。
- 可以在瀏覽器
Console和vscode中的調試控制台分別看到調試結果。 - 如果用這種方式使用控件的話，我會選擇直接在我要調試的js文件下隨便建立一個html文件，引入js文件，然后用需要的瀏覽器打開html，進入開發者工具，直接進行調試，因為現代瀏覽器已經提供了非常完善的調試環境。
- 可能這些控件有其他的應用場景，后續有用到了再隨時補充。
結束語
寧可裝傻，也不要自作聰明。寧可辛苦，也不要貪圖享樂。
寧可裝窮，也不要炫耀財富。寧可光輸，也不要只贏不輸。
寧可吃虧，也不要占小便宜。寧可平庸，也不要沽名釣譽。
寧可自信，也不要盲目悲觀。寧要健康，也不要功名利祿。
寧可勤奮，也不能無所事事。寧可偏執，也不能放棄理想。