淺談VSCode調試js程式碼的幾種方法
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}"
}
]
}
#注意： "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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
vscode怎麼查看word文件 vscode檢視word文件的方法
May 09, 2024 am 09:37 AM
首先，在電腦上開啟vscode軟體，點選左邊的【Extension】(擴充)圖標，如圖中①所示然後，在擴充介面的搜尋框中輸入【officeviewer】，如圖中②所示接著，從搜尋結果中選擇【officeviewer】安裝，如圖中③所示最後，開啟文件，如docx,pdf等，如下圖
vscode怎麼繪製流程圖_visual_studio code繪製流程圖的方法
Apr 23, 2024 pm 02:13 PM
首先要開啟電腦中的visualstudiocode，點選左側四個方塊按鈕然後在搜尋方塊中輸入draw.io查詢插件，點選安裝安裝好後，新建一個test.drawio檔案接著選取test.drawio文件，進入編輯模式左側有各種圖形，隨意選擇，就可以繪製流程圖了繪製好後，點擊檔案→嵌入→svg下面再選擇嵌入複製svg程式碼將複製的svg程式碼貼到html程式碼中開啟html網頁，就可以看到繪製的流程圖了點擊網頁上的圖片，就可以跳轉頁面在該頁面可以放大縮小流程圖在這裡，我們選擇點擊右下角的鉛筆圖案，跳轉網
加州理工華人用AI顛覆數學證明！提速5倍震驚陶哲軒，80%數學步驟全自動化
Apr 23, 2024 pm 03:01 PM
LeanCopilot，讓陶哲軒等眾多數學家讚不絕口的這個形式化數學工具，又有超強進化了？就在剛剛，加州理工學院教授AnimaAnandkumar宣布，團隊發布了LeanCopilot論文的擴展版本，更新了程式碼庫。圖片論文地址：https://arxiv.org/pdf/2404.12534.pdf最新實驗表明，這個Copilot工具，可以自動化80%以上的數學證明步驟了！這個紀錄，比以前的基線aesop還要好2.3倍。並且，和以前一樣，它在MIT許可下是開源的。圖片他是一位華人小哥宋沛洋，他是
vscode工作區怎麼加入檔案 vscode工作區新增檔案的方法
May 09, 2024 am 09:43 AM
1.首先，打開vscode軟體，點擊資源管理器圖標，找到工作區視窗2.然後，點擊左上角的檔案選單，找到將資料夾新增至工作區選項3.最後，在本機磁碟中找到資料夾位置，點擊新增按鈕即可
vscode怎麼開啟後台更新 vscode開啟後台更新方法
May 09, 2024 am 09:52 AM
1.首先，開啟介面後，點選左上角的檔案選單2.隨後，在首選項欄目中點選設定按鈕3.接著，在跳轉的設定頁面中，找到更新板塊4.最後，滑鼠點選勾選啟用在Windows上後台下載和安裝新的VSCode版本按鈕，並重新啟動程式即可
vscode怎麼禁止wsl設定檔 vscode禁止wsl設定檔方法
May 09, 2024 am 10:30 AM
1.首先，開啟設定選單中的settings選項2.隨後，在跳轉的commonlyused頁面中找到terminal欄3.最後，在該欄位右側取消勾選usewslprofiles按鈕即可
VScode怎麼設定動畫平滑插入 VScode設定動畫平滑插入教學
May 09, 2024 am 09:49 AM
1.首先，開啟介面後，點選工作區介面2.然後，在開啟的編輯面板中，點選檔案選單3.隨後，點選首選項欄目下的設定按鈕4.最後，滑鼠點選勾選CursorSmoothCaretAnimation按鈕，儲存設定即可
Vscode怎麼開啟工作區信任權限 Vscode開啟工作區信任權限方法
May 09, 2024 am 10:34 AM
1.首先，打開編輯視窗後，點擊左下角的配置圖示2.隨後，在開啟的子選單中點擊管理工作區信任按鈕3.接著，在編輯視窗中找到該頁面4.最後，根據自己的辦公需求勾選相關指令即可
