淺談VSCode調試js程式碼的幾種方法
- 青灯夜游轉載
- 2021-01-02 17:49:2412311瀏覽
VSCode如何調試js程式碼？以下這篇文章跟大家介紹一下VSCode調試js程式碼的幾種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
相關推薦：《vscode教學》
介紹VS Code 偵錯js 的兩種方法：
Quokka.js 外掛程式
Debugger for Chrome 與Live Server 搭配
#Quokka.js 外掛程式
外掛程式位址：https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
在擴充商店搜尋安裝：
在VS code 中使用快速鍵ctrl shift P 調出面版，輸入quo：
可以看到有兩個選項，一個是偵錯js 的，一個是偵錯ts 的。我們選第一個。
可能會有一個詢問你是否購買 pro 版的提示，你可以關掉不用理會，也可以選擇購買。
嘗試在開啟的編輯框中輸入幾句程式碼：
你會發現，程式碼的運行是即時的。左邊的綠色方塊代表語句成功執行，如果執行不成功，就會變成紅色。
Debugger for Chrome 與Live Server 搭配
Debugger for Chrome 外掛程式位址：https:// marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Live Server 外掛程式位址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
請先下載安裝這兩個插件；本方法需要安裝Google瀏覽器。
假設你有這樣一個前端專案：
#當你安裝Live Server 後你會發現VS Code右下角有個Go Live 小按鈕：
點它！
Live Srever 會建立一個本機開發伺服器，並彈出一個瀏覽器窗口，位址類似：
http://127.0.0.1:5500/
同時也會有提示：
你可以暫時關掉這個瀏覽器窗口，不用擔心，在沒再點擊右下角的那個小按鈕或關掉VS Code 時，你依然可以透過http://127.0.0.1:5500/ 開啟剛才的網頁。
請記住這個連接埠號碼：5500，因為後面會用到。當你多開 Live Srever 或其他程式佔用了這個連接埠號碼時，連接埠號碼會自動 1 。
顧名思義，Live Server 是即時更新的。當你修改了專案的檔案或程式碼，Live Server 會馬上更新並自動刷新頁面。
回到編輯器。
依序點擊: 執行圖示-> 建立launch.json 檔案：
# 用下面的設定覆蓋掉原本的設定並儲存：###
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "chrome 调试",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}
]
}VS Code 就會在專案所在目錄中儲存相關的設定：
#注意： "url"欄位中的連接埠號碼5500 要與Live Server 提供的連接埠號碼對應。
你会看到打上的断点成功拦截执行：
细心的你可能会发现，当点击一次 Go Live 按钮时会打开一个浏览器窗口，再点击一次调试按钮时（快捷键 F5），会打开第二个用于调试的窗口。这可能是没有必要的，我们只需要一个窗口就行了。
下面我们来编辑配置，使这个过程只需打开一次浏览器窗口。
点击 “chrome 调试” 旁边的齿轮：
在打开的编辑框依次点击：
得到如下配置并保存：
在扩展商店搜索 Live Server 并打开它的扩展设置：
需要修改的配置有两个：
1、Chrome Debugging Attachment
点击进入，将 "liveServer.settings.ChromeDebuggingAttachment": false 改为 true。
"liveServer.settings.ChromeDebuggingAttachment": true
2、Custom Browser
点击此选项中的下拉框，我们选择 chrome：
修改完成！
接下来我们重启 Live Srever 服务：
回到 VS Code，按下 F5 键，启动调试：
之后本项目的每次调试你只需要点击 Go Live 按钮并回到 VS Code 按下 F5 键就行了。
当然，chrome 调试 选项可能还是生效的，当你关掉 Live Server 打开的浏览器窗口时，可以尝试使用这个选项再次打开。
如果遇到端口号被占用的情况，可以点击调试旁边的齿轮来修改。
祝：
永无 BUG！
使用到的代码：
<!-- ./index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="time">请点击下方按钮以获取当前时间</div>
<button id="getTime">获取时间</button>
<script src="./js/index.js"></script>
</body>
</html>// ./js/index.js
let getTimeBtn = document.getElementById("getTime");
getTimeBtn.onclick = function (e) {
let time = document.getElementById("time");
let now = new Date().toLocaleString();
time.innerHTML = now;
}// ./.vscode/launch.json
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "chrome 调试",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}
]
}更多编程相关知识，请访问：编程课程！！
以上是淺談VSCode調試js程式碼的幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！