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中文網其他相關文章！
Visual Studio：探索定價和許可選項Apr 13, 2025 am 12:03 AMVisualStudio提供三種版本：Community免費版適用於個人和小型團隊，Professional付費版適合專業開發者和中小型團隊，Enterprise旗艦版面向大型企業和復雜項目。
Visual Studio的價值：權衡成本與其收益Apr 12, 2025 am 12:06 AMVisualStudio在.NET开发中价值高，因其功能强大且全面。尽管成本和资源消耗较高，但其带来的效率提升和开发体验改善显著。对于个人开发者和小型团队，Community版是理想选择；大型企业则适合Professional或Enterprise版。
Visual Studio的可用性：哪些版本是免費的？Apr 10, 2025 am 09:44 AMVisualStudio的免費版本包括VisualStudioCommunity和VisualStudioCode。 1.VisualStudioCommunity適用於個人開發者、開源項目和小型團隊，功能強大，適合個人項目和學習編程。 2.VisualStudioCode是一個輕量級的代碼編輯器，支持多種編程語言和擴展，啟動速度快，資源佔用少，適合需要靈活性和可擴展性的開發者。
如何為Windows 8安裝Visual Studio？Apr 09, 2025 am 12:19 AM在Windows8上安裝VisualStudio的步驟如下：1.從微軟官方網站下載VisualStudioCommunity2019安裝包。 2.運行安裝程序並選擇所需組件。 3.完成安裝後即可使用。注意選擇與Windows8兼容的組件，並確保有足夠的磁盤空間和管理員權限。
我的計算機可以運行與代碼嗎？Apr 08, 2025 am 12:16 AMVSCode可以在大多數現代電腦上運行，只要滿足基本系統要求：1.操作系統：Windows7及以上，macOS10.9及以上，Linux；2.處理器：1.6GHz或更快；3.內存：至少2GBRAM（推薦4GB或更高）；4.存儲空間：至少200MB可用空間。通過優化設置和減少擴展使用，可以在低配置電腦上獲得流暢的使用體驗。
如何使程序與Windows 8兼容？Apr 07, 2025 am 12:09 AM要讓程序在Windows8上順暢運行，需採取以下步驟：1.使用兼容性模式，通過代碼檢測並啟用該模式。 2.調整API調用，根據Windows版本選擇適當的API。 3.進行性能優化，盡量避免使用兼容性模式，優化API調用並使用通用控件。
VS代碼在Windows 8上有效嗎？Apr 06, 2025 am 12:13 AMYes,VSCodeiscompatiblewithWindows8.1)DownloadtheinstallerfromtheVSCodewebsiteandensurethelatest.NETFrameworkisinstalled.2)Installextensionsusingthecommandline,notingsomemayloadslower.3)Manageperformancebyclosingunnecessaryextensions,usinglightweightt
VS代碼和Visual Studio有什麼區別？Apr 05, 2025 am 12:07 AMVSCode是輕量級代碼編輯器，適用於多種語言和擴展；VisualStudio是功能強大的IDE，主要用於.NET開發。 1.VSCode基於Electron，支持跨平台，使用Monaco編輯器。 2.VisualStudio使用微軟自主技術棧，集成調試和編譯器。 3.VSCode適合簡單任務，VisualStudio適合大型項目。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
記事本++7.3.1
好用且免費的程式碼編輯器
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
SublimeText3漢化版
中文版，非常好用
