基于VSCode調(diào)試網(wǎng)頁(yè)JavaScript代碼過(guò)程詳解
一、調(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:重新打開(kāi)一個(gè)chrome來(lái)顯示應(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 的值要匹配。然后在瀏覽器中打開(kāi)本地服務(wù)器上的web頁(yè)面
步驟二:在vscode中打開(kāi)調(diào)試按鈕進(jìn)行調(diào)試,即可進(jìn)入調(diào)試模式。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 解決VScode配置遠(yuǎn)程調(diào)試Linux程序的問(wèn)題
- ros項(xiàng)目調(diào)試:vscode下配置開(kāi)發(fā)ROS項(xiàng)目的詳細(xì)教程
- 如何通過(guò)vscode運(yùn)行調(diào)試javascript代碼
- VSCode Golang dlv調(diào)試數(shù)據(jù)截?cái)鄦?wèn)題及處理方法
- VScode Remote SSH通過(guò)遠(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開(kāi)發(fā)和調(diào)試.NET Core程序的方法
- VSCode1.4 搭建Golang的開(kāi)發(fā)調(diào)試環(huán)境(遇到很多問(wèn)題)
- Vscode Remote Development遠(yuǎn)程開(kāi)發(fā)調(diào)試的實(shí)現(xiàn)思路
- VSCode 搭建 Arm 遠(yuǎn)程調(diào)試環(huán)境的步驟詳解
- 分享5個(gè)實(shí)用的vs調(diào)試技巧
相關(guān)文章
通過(guò)封裝scroll.js 獲取滾動(dòng)條的值
本文通過(guò)實(shí)例代碼給大家介紹了通過(guò)封裝scroll.js 獲取滾動(dòng)條的值的相關(guān)知識(shí),代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-07-07JS實(shí)現(xiàn)仿騰訊微博無(wú)刷新刪除微博效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)仿騰訊微博無(wú)刷新刪除微博效果代碼,涉及JavaScript實(shí)現(xiàn)Ajax無(wú)刷新刪除的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10動(dòng)態(tài)生成的IFRAME,設(shè)置SRC時(shí)的,不同位置帶來(lái)的影響
動(dòng)態(tài)生成的IFRAME,設(shè)置SRC時(shí)的,不同位置帶來(lái)的影響。 以下所說(shuō)的是在IE7下運(yùn)行的。IE6下也是同樣。 在這個(gè)blog中,直接點(diǎn)擊運(yùn)行代碼,和把下面代碼保存到為網(wǎng)頁(yè)在運(yùn)行(以本地文件或域名訪問(wèn)),效果不一樣。2008-03-03js常用方法、檢查是否有特殊字符串、倒序截取字符串操作完整示例
這篇文章主要介紹了js常用方法、檢查是否有特殊字符串、倒序截取字符串操作,結(jié)合完整實(shí)例形式分析了JavaScript字符串轉(zhuǎn)換、檢測(cè)、倒序、截取等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01JS實(shí)現(xiàn)的網(wǎng)頁(yè)背景閃電閃爍效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的網(wǎng)頁(yè)背景閃電閃爍效果代碼,涉及JavaScript定時(shí)函數(shù)結(jié)合頁(yè)面元素樣式操作的相關(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)更新,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12JavaScript 實(shí)現(xiàn)的 zip 壓縮和解壓縮工具包Zip.js使用詳解
今天給大家介紹的文章是js實(shí)現(xiàn)的解壓縮插件zip.js,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-12-12