VSCode 竟然可以無縫調試瀏覽器了!

大家好,我是若川。今天周末,分享一篇相對比較簡單的文章。學習源碼系列、面試、年度總結、JS基礎系列。


2021-07-16 微軟發布了一篇博客專門介紹了這個功能,VSCode 牛逼!

在此之前,你想要在 vscode 內調試 chrome 或者 edge 需要借助于 Chrome Debugger 或者 the Microsoft Edge Debugger extension 這兩款 vscode 擴展。

并且更重要的是,其僅能提供最基本的控制臺功能,其他的諸如 network,element 是無法查看的,我們仍然需要到瀏覽器中查看。

這是個什么功能

更新之后,我們可以直接在 vscode 中 open link in chrome or edge,并且「直接在 vscode 內完成諸如查看 element,network 等幾乎所有的常見調試需要用到的功能」

效果截圖:

(edge devtools)

(debug console)

如何使用

使用方式非常簡單,大家只需要在前端項目中按 F5 觸發調試并進行簡單的配置即可。這里給大家貼一份 lauch.json 配置,有了它就可以直接開啟調試瀏覽器了。

{"version":?"0.2.0","configurations":?[{"type":?"pwa-msedge","request":?"launch","name":?"Launch?Microsoft?Edge?and?open?the?Edge?DevTools","url":?"http://localhost:8080","webRoot":?"${workspaceFolder}"}]
}
?

大家需要根據自己的情況修改 url 和 webRoot 等參數。

?

原理

原理其實和 chrome debugger 擴展原理類似。也是基于 Chrome 的 devtool 協議,建立 「websocket 鏈接。通過發送格式化的 json 數據進行交互」,這樣 vscode 就可以動態拿到運行時的一些信息。比如瀏覽器網絡線程發送的請求以及 DOM 節點信息。

你可以通過 「chrome devtool protocol」 拿到很多信息,比如上面提到的 network 請求。

由于是 websocket 建立的雙向鏈接,因此在 VSCODE 中改變 dom 等觸發瀏覽器的修改也變得容易。我們只需要在 VSCODE(websocket client) 中操作后通過 websocket 發送一條 JSON 數據到瀏覽器(websocket server)即可。瀏覽器會根據收到的 JSON 數據進行一些操作,從效果上來看「和用戶直接在手動在瀏覽器中操作并無二致。」

值得注意的,chrome devtool protocol 的客戶端有很多,不僅僅是 NodeJS 客戶端,Python,Java,PHP 等各種客戶端一應俱全。

更多

  • Easier browser debugging with Developer Tools integration in Visual Studio Code

  • vscode-js-debug

  • chrome devtools-protocol

  • Microsoft Edge (Chromium) DevTools Protocol overview

最近組建了一個江西人的前端交流群,如果你是江西人可以加我微信?ruochuan12?私信 江西?拉你進群。


推薦閱讀

我在阿里招前端,該怎么幫你(可進面試群)
我讀源碼的經歷

在字節做前端一年后,有啥收獲~
老姚淺談:怎么學JavaScript?

·················?若川簡介?·················

你好,我是若川,畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》多篇,在知乎、掘金收獲超百萬閱讀。
從2014年起,每年都會寫一篇年度總結,已經寫了7篇,點擊查看年度總結。
同時,活躍在知乎@若川,掘金@若川。致力于分享前端開發經驗,愿景:幫助5年內前端人走向前列。

識別方二維碼加我微信、長期交流學習

今日話題

略。歡迎分享、收藏、點贊、在看我的公眾號文章~

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275622.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275622.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275622.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

最少的編碼

Knowing how to code HTML email can bring you many opportunities, such as working as a digital designer, collaborating with front end developers, finding freelancing projects.知道如何對HTML電子郵件進行編碼可以為您帶來許多機會,例如擔任數字設計師&a…

Hulu CEO預計網站本年營收將達5億美元

網易科技訊 3月2日動靜,據國外媒體報道,美國在線視頻網站Hulu CEO杰森吉拉爾(Jason Kilar)明天不日發揮分析,Hulu本年告白及訂閱營收將達5億美元,是去年的兩倍。吉拉爾周一在由互聯網告白局舉辦的“2011年年…

webRTC——瀏覽器里的音視頻通話

背景 webRTC是Google在2010年收購GIP公司之后獲得的一項技術。如下圖所示,它提供了音視頻的采集、處理(降噪,回聲消除等)、編解碼、傳輸等技術。webRTC的目標是實現無需安裝任何插件就可以通過瀏覽器進行P2P的實時音視頻通話及文件傳輸,來看看…

面對 this 指向丟失,尤雨溪在 Vuex 源碼中是怎么處理的

1. 前言大家好,我是若川。好久以前我有寫過《面試官問系列》,旨在幫助讀者提升JS基礎知識,包含new、call、apply、this、繼承相關知識。其中寫了 面試官問:this 指向 文章。在掘金等平臺收獲了還算不錯的反饋。最近有小伙伴看我的…

轉:Python: threading.local是全局變量但是它的值卻在當前調用它的線程當中

原文地址:http://www.cnblogs.com/fengmk2/archive/2008/06/04/1213958.html 在threading module中,有一個非常特別的類local。一旦在主線程實例化了一個local,它會一直活在主線程中,并且又主線程啟動的子線程調用這個local實例時&#xff0c…

matlab的邊緣檢測方法,常用圖像邊緣檢測方法及Matlab研究

2011 年 2 月 15 日第 34 卷第 4 期 現代電子技術 Modern Electronics Technique Feb. 2011 Vol. 34 No. 4 常用圖像邊緣檢測方法及 Matlab 研究 韋  煒 (西安文理學院 , 陜西 西安   710065) 摘  要 :邊緣檢測在數字圖像處理中有著重要的作用。為了在實際應用中能夠選擇最佳…

單選按鈕步驟流程向導 js_創建令人愉快的按鈕的6個步驟

單選按鈕步驟流程向導 jsThere is no modern interactive UI without buttons. They are an fundamental part of every digital solution. Learn how to improve the style of your buttons and delight users with perfect style.沒有按鈕,就沒有現代的交互式UI。…

Android 四大組件之 Activity

什么是 Activity? Activity 是 Android 的四大組件之一,是用戶操作的可視化界面,它為用戶提供了一個完成操作指令的窗口。 當我們創建完 Activity 之后,需要調用 setContentView(view) 方法來完成界面的顯示,以此來為用…

axios怎么封裝,才能提升效率?

大家好,我是若川。今天分享一篇axios封裝的文章。學習源碼系列、面試、年度總結、JS基礎系列。作為前端開發者,每個項目基本都需要和后臺交互,目前比較流行的ajax庫就是axios了,當然也有同學選擇request插件,這個蘿卜白…

圖片有花

http://www.56.com/u50/v_NTUwMzE1NDM.html http://www.56.com/u39/v_NTUwMzE2MjA.html http://www.cnblogs.com/coffee_cn/archive/2009/11/30/1613823.html http://www.imagemagick.org/script/binary-releases.php?ImageMagickmm3e9bn5mtos6eiaelh9d4aoe4#windows 轉載于:h…

java 代碼執行el,專屬于java的漏洞——EL表達式注入

前言“FSRC經驗分享”系列文章,旨在分享焦點科技信息安全部工作過程中的經驗總結,包括但不限于漏洞分析、運營技巧、sdl推行、等保合規、自研工具等等。歡迎各位安全從業者持續關注~0x01EL簡介表達式語言(Expression Language 以下簡稱EL)是以JSTL(JavaS…

護膚產生共鳴_通過以人為本的設計編織共鳴的20個指針

護膚產生共鳴Deep into a project right now, I can’t help but reflect on how I practice empathy in design. Human centered design means empathising with and designing for people, keeping our focus on people throughout. It is not just one stage, it is a minds…

谷歌已推送 Android Q Beta 1

開發四年只會寫業務代碼,分布式高并發都不會還做程序員? >>> 今日凌晨,谷歌正式推送了 Android Q 的首個 Beta 版本,Pixel 全系列手機可以嘗鮮體驗這款最新的系統。 據官方博客介紹,Android Q 為用戶帶來了…

對使用CodeSmith模板生成NHibernate的代碼的分析

CodeSmith是我們常用的代碼生成工具,其跟據不同的模板生成不同代碼的方式能大大加快我們的項目開發,減少重復勞動。NHibernate模板就是其常用模板之一。從這里可以下載到最新的模板文件。現在最新的版本為NHibernate-v1.2.1.2125,可以生成NHi…

若川誠邀你加源碼共讀群,每周一起學源碼

小提醒:若川視野公眾號面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕,歡迎點擊閱讀,也可以星標我的公眾號,便于查找。回復pdf,可以獲取前端優質書籍。最近我創建了一個源碼共讀的前端交流群,希望嘗試幫…

matlab 規范,matlab-代碼-規范

matlab-代碼-規范 1. 標識符命名原則 標識符的名字應當直觀,其長度應當符合“最小長度,最大信息量”原則。 1) 非矩陣變量: 變量名應該以小寫字母開頭的大小寫混合形式 譬如:shadowFadingTable,servingSector&#xf…

zoom視頻會議官網_人性化視頻會議的空間(Zoom等)

zoom視頻會議官網第二部分:房間的創造力 (Part Two: The Creativity of Rooms) In Part One I shared thoughts on how virtual spaces can often leave little room to embody our most human selves. The lack of a public sphere that parallels our shared publ…

KOFLive Postmortem

為期兩個月的團隊項目完成了,我們的游戲也已經發布。在這個名叫KOFLive的小游戲里,我們集成了五個真人角色,每個角色有拳腳基本招數以及三個小招、一個大招,硬值、防御、集氣、雙人對戰、人機對戰、練習模式等格斗游戲的Feature基…

單調隊列優化多重背包

就是按照 % 體積的余數來分組&#xff0c;每組單調隊列優化。 直接上模板好了。 1 #include <bits/stdc.h>2 3 typedef long long LL;4 const int N 100010;5 6 int n, V, cnt[N], cost[N];7 LL f[2][N], val[N], p[N], top, head;8 9 inline void Max(LL &a, const…

2021年7月 蝦皮、貨拉拉、有贊等面經總結

大家好&#xff0c;我是若川&#xff0c;加我微信 ruochuan12 進源碼交流群。今天分享一篇7月份新鮮出爐的面經&#xff0c;文章較長&#xff0c;可以收藏再看。學習源碼系列、面試、年度總結、JS基礎系列。本文來自作者幾米陽光 投稿 原文鏈接&#xff1a;https://juejin.cn/p…