基于VSCode調(diào)試網(wǎng)頁JavaScript代碼過程詳解
一、調(diào)試準(zhǔn)備
Windows10 64bits
IDE:Visual Studio Code1.28.2
安裝插件:Chrome(安裝方法:Debug -> Install Additional Debuggers... -> Debugger for Chrome,重新啟動(dòng)vscode即可。)
二、調(diào)試配置
首先該插件運(yùn)行需要安裝有本地服務(wù)器,其次有兩種配置方式,分別為:
(1)launch:重新打開一個(gè)chrome來顯示應(yīng)用程序
(2)attach:在已經(jīng)運(yùn)行的chrome中顯示應(yīng)用程序
2.1、Launch配置
按F5并選擇chrome進(jìn)入配置文件launch.json,我的Launch配置如下所示:
"version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost/文件路徑", "webRoot": "${workspaceFolder}" } ]
2.2、Attach配置
attach的launch.json配置如下所示:
{ "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "sourceMaps": true, "webRoot": "${workspaceFolder}" }
步驟一:讓chrome進(jìn)入調(diào)試模式:
方法一:在命令行中進(jìn)行設(shè)置:
路徑/chrome.exe --remote-debugging-port=9222
方法二:chrome桌面圖標(biāo)右鍵 -> 屬性 -> 目標(biāo) -> 在路徑后面添加 --remote-debugging-port=9222 即可。
其中 --remote-debugging-port 的值與lanuch.json中的 port 的值要匹配。然后在瀏覽器中打開本地服務(wù)器上的web頁面
步驟二:在vscode中打開調(diào)試按鈕進(jìn)行調(diào)試,即可進(jìn)入調(diào)試模式。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 解決VScode配置遠(yuǎn)程調(diào)試Linux程序的問題
- ros項(xiàng)目調(diào)試:vscode下配置開發(fā)ROS項(xiàng)目的詳細(xì)教程
- 如何通過vscode運(yùn)行調(diào)試javascript代碼
- VSCode Golang dlv調(diào)試數(shù)據(jù)截?cái)鄦栴}及處理方法
- VScode Remote SSH通過遠(yuǎn)程編輯與調(diào)試代碼
- 使用VSCode和VS2017編譯調(diào)試STM32程序的實(shí)現(xiàn)
- VsCode搭建Spring Boot項(xiàng)目并進(jìn)行創(chuàng)建、運(yùn)行、調(diào)試
- 使用VSCode開發(fā)和調(diào)試.NET Core程序的方法
- VSCode1.4 搭建Golang的開發(fā)調(diào)試環(huán)境(遇到很多問題)
- Vscode Remote Development遠(yuǎn)程開發(fā)調(diào)試的實(shí)現(xiàn)思路
- VSCode 搭建 Arm 遠(yuǎn)程調(diào)試環(huán)境的步驟詳解
- 分享5個(gè)實(shí)用的vs調(diào)試技巧
相關(guān)文章
JS實(shí)現(xiàn)仿騰訊微博無刷新刪除微博效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)仿騰訊微博無刷新刪除微博效果代碼,涉及JavaScript實(shí)現(xiàn)Ajax無刷新刪除的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10動(dòng)態(tài)生成的IFRAME,設(shè)置SRC時(shí)的,不同位置帶來的影響
動(dòng)態(tài)生成的IFRAME,設(shè)置SRC時(shí)的,不同位置帶來的影響。 以下所說的是在IE7下運(yùn)行的。IE6下也是同樣。 在這個(gè)blog中,直接點(diǎn)擊運(yùn)行代碼,和把下面代碼保存到為網(wǎng)頁在運(yùn)行(以本地文件或域名訪問),效果不一樣。2008-03-03js常用方法、檢查是否有特殊字符串、倒序截取字符串操作完整示例
這篇文章主要介紹了js常用方法、檢查是否有特殊字符串、倒序截取字符串操作,結(jié)合完整實(shí)例形式分析了JavaScript字符串轉(zhuǎn)換、檢測、倒序、截取等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01JS實(shí)現(xiàn)的網(wǎng)頁背景閃電閃爍效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的網(wǎng)頁背景閃電閃爍效果代碼,涉及JavaScript定時(shí)函數(shù)結(jié)合頁面元素樣式操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三):鏈表
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三):鏈表,本文分別講解了單鏈表與雙鏈表以及增加節(jié)和刪除節(jié)的代碼實(shí)例,需要的朋友可以參考下2015-06-06如何使用electron-builder及electron-updater給項(xiàng)目配置自動(dòng)更新
這篇文章主要介紹了如何使用electron-builder及electron-updater給項(xiàng)目配置自動(dòng)更新,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12JavaScript 實(shí)現(xiàn)的 zip 壓縮和解壓縮工具包Zip.js使用詳解
今天給大家介紹的文章是js實(shí)現(xiàn)的解壓縮插件zip.js,非常的簡單實(shí)用,有需要的小伙伴可以參考下。2015-12-12