答案:通過安裝Debugger for Chrome擴(kuò)展並配置launch.json,可在VSCode中直接調(diào)試Chrome運(yùn)行的前端JavaScript。具體步驟包括:安裝擴(kuò)展、創(chuàng)建包含正確URL和webRoot的launch.json文件、啟動(dòng)本地服務(wù)器後按F5開始調(diào)試,並確保sourceMapPathOverrides適配項(xiàng)目結(jié)構(gòu)以支持?jǐn)帱c(diǎn)調(diào)試。
To debug JavaScript in Google Chrome directly from VSCode, you can use the Debugger for Chrome extension along with proper launch configuration. This lets you set breakpoints, inspect variables, and step through code in your frontend JavaScript while running in Chrome — all controlled from within VSCode.
Install Required Extension
Open VSCode and go to the Extensions view by clicking the Extensions icon in the Activity Bar or pressing Ctrl Shift X . Search for:
- Debugger for Chrome by Microsoft
Install it. This extension allows VSCode to communicate with a Chrome instance for debugging purposes.
Create a Launch Configuration
Set up how VSCode should launch Chrome and attach the debugger:
- In VSCode, open the Run and Debug view: click the Run icon in the Activity Bar or press Ctrl Shift D .
- Click create a launch.json file if you don't have one, then select Chrome as the environment.
- VSCode generates a launch.json file inside a .vscode folder in your project root.
Example launch.json configuration:
{ "version": "0.2.0", "configurations": [ { "name": "Launch Chrome against localhost", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", "sourceMapPathOverrides": { "webpack:///./.*": "${webRoot}/*", "webpack:///src/*": "${webRoot}/*", "webpack:///*": "*", "webpack:///./": "${webRoot}/" } } ] }Adjust the url to match your app's local server address (eg, http://localhost:8080 ).
Start Debugging
Make sure your web server is running (eg, npm start , vue dev server , etc.). Then:
- In VSCode, go to the Run view.
- Select the Launch Chrome against localhost configuration.
- Press F5 or click the Start Debugging button.
Chrome will open a new window connected to the debugger. Set breakpoints in your JavaScript files in VSCode — they'll be hit when the code runs.
Verify Source Maps and Paths
If breakpoints aren't being hit, ensure that:
- Your development server generates source maps (most do by default in dev mode).
- The webRoot in launch.json points to the correct folder containing your source files.
- You're using the right sourceMapPathOverrides if your app uses bundlers like Webpack.
For Create React App, Vue CLI, or similar tools, the example config above usually works as-is.
Basically, just install the debugger extension, configure launch.json , run your server, and hit F5. You'll be debugging client-side JavaScript from VSCode in no time.
以上是如何從 VSCode 調(diào)試 Google Chrome 中的 JavaScript?的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

熱AI工具

Undress AI Tool
免費(fèi)脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Stock Market GPT
人工智慧支援投資研究,做出更明智的決策

熱門文章

熱工具

記事本++7.3.1
好用且免費(fèi)的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)

VSCode的便攜模式允許從U盤或任意文件夾運(yùn)行,無需安裝,所有數(shù)據(jù)存儲(chǔ)在本地文件夾中。 1.下載ZIP版本並解壓到目標(biāo)位置;2.在可執(zhí)行文件同目錄創(chuàng)建名為data的文件夾;3.VSCode檢測到data文件夾後自動(dòng)啟用便攜模式,設(shè)置、擴(kuò)展、緩存等均保存其中;4.跨設(shè)備使用時(shí)保持環(huán)境一致,但需注意依賴系統(tǒng)工具的擴(kuò)展可能無法工作,且需手動(dòng)更新版本,最終實(shí)現(xiàn)完整的便攜開發(fā)環(huán)境。

配置launch.json文件以設(shè)置調(diào)試環(huán)境,確保program字段指向主入口文件;2.使用launch模式直接啟動(dòng)腳本並傳入args和env參數(shù);3.使用attach模式連接已通過node--inspect啟動(dòng)的運(yùn)行中進(jìn)程;4.調(diào)試npm腳本時(shí)設(shè)置runtimeExecutable為npm並啟用integratedTerminal;5.通過設(shè)置斷點(diǎn)、條件斷點(diǎn)、變量檢查、表達(dá)式求值及啟用AutoAttach提升調(diào)試效率;6.若遇問題,檢查路徑、啟動(dòng)參數(shù)、端口匹配、sourceMaps配置並重啟調(diào)

USEMULTI-ROOTWORKSPACESTOGROUPROUDPREDSBYADDIDEFOLDERSANDSASA.CODE-WORKSPACEFILEFILEFORSHAREDSETTINGS.2.OPENUNRELELEDPROEDPRODECTPROJECTSINSEPARATEVSCODEWSCODEWEWINDOWSNEDOWSANDSWITCHINGSANDSWITCHINGSANDSWITCHINGLINGCMD

IntellionSenseNabledBydefaultInvScodeForLanguagesLikeJavAscript,typescript,Python,andhtml,提供codecodecodecompletion,parameterinfo,QuickInfo,andMemberListsAsyOutype.2.senretheTheTefileHasthasthaStheStheCorrectence(E.

vscodeallowseasygitBranchManagementDirectlywithIntheeditor.youcanviewandswitchbranchesbybythebrickingthebrickingthebranchnameinthebottom-leftcornerandselecting“ chechboutto ... cookutto ...''

安裝VSCodeDocker擴(kuò)展後,通過點(diǎn)擊擴(kuò)展圖標(biāo)搜索並安裝由Microsoft發(fā)布的Docker擴(kuò)展,安裝完成後左側(cè)活動(dòng)欄會(huì)出現(xiàn)鯨魚圖標(biāo);2.確保本地已安裝並運(yùn)行DockerDesktop或DockerEngine,通過執(zhí)行docker--version和dockerps驗(yàn)證環(huán)境是否就緒;3.使用Docker面板查看容器、鏡像等資源,通過右鍵菜單可進(jìn)行啟停、查看日誌、進(jìn)入終端等操作;4.在項(xiàng)目中右鍵選擇"Docker:AddDockerFilestoWorkspace"可

安裝Remote-SSH擴(kuò)展;2.使用Ctrl Shift P輸入Remote-SSH:ConnecttoHost...添加SSH連接;3.保存配置到SSH配置文件以便復(fù)用;4.通過密碼或SSH密鑰認(rèn)證登錄;5.連接後打開遠(yuǎn)程文件夾即可編輯,所有操作在遠(yuǎn)程執(zhí)行,設(shè)置完成後VSCode可作為功能完整的遠(yuǎn)程IDE使用。

在VSCode中,將文本轉(zhuǎn)換為大寫的快捷方式是使用內(nèi)置快捷鍵。 Windows/Linux上為Ctrl Shift U,macOS上為Cmd Shift U,選中目標(biāo)文本後按下對(duì)應(yīng)快捷鍵即可一鍵轉(zhuǎn)為大寫;此操作不會(huì)影響剪貼板內(nèi)容,且能根據(jù)文本當(dāng)前狀態(tài)切換大小寫;常見場景包括統(tǒng)一變量命名、處理CSV數(shù)據(jù)、編輯需大寫鍵名的配置文件等;若快捷鍵無效,應(yīng)檢查鍵盤佈局、插件衝突或編輯器焦點(diǎn)問題,並可通過命令面板或自定義快捷鍵解決;此外,VSCode還支持轉(zhuǎn)小寫(Ctrl/Cmd Shift L)等功能,必要
