Edge 聯(lián)動(dòng) VsCode,這功能愛(ài)了!
你們一定一定一定遇到過(guò)這樣一個(gè)情況：
假設(shè)我們?cè)跒g覽器的開(kāi)發(fā)者工具調(diào)試自己寫(xiě)的頁(yè)面樣式，調(diào)了半天終于調(diào)好了，于是打開(kāi)你本地的代碼找到對(duì)應(yīng)的代碼把你剛剛在瀏覽器調(diào)試修改的代碼一個(gè)個(gè)在本地代碼中再修改一遍。如下圖所示：
目前的操作流程確實(shí)怪麻煩的。你如果改的代碼少一點(diǎn)還好說(shuō)，要是改的多了，又碰上項(xiàng)目熱更新導(dǎo)致頁(yè)面刷新，你剛才改的所有代碼都找不到記錄了，得，瞎忙活！
基于這個(gè)痛點(diǎn)，Microsoft Edge團(tuán)隊(duì)提出了一個(gè)不錯(cuò)的點(diǎn)子，并且已經(jīng)正在實(shí)驗(yàn)這個(gè)功能了，那就是?"將Edge瀏覽器開(kāi)發(fā)者工具中代碼的修改同步到Vscode中"
這是怎樣一個(gè)操作呢？一個(gè)動(dòng)圖帶你了解（跟上一個(gè)動(dòng)圖的操作形成鮮明對(duì)比）
自動(dòng)同步看著又是個(gè)提高開(kāi)發(fā)效率的小功能！（此處應(yīng)有掌聲????）
使用
科普一下，Edge瀏覽器會(huì)將開(kāi)放的實(shí)驗(yàn)性功能放在?開(kāi)發(fā)者工具 => 設(shè)置 => 實(shí)驗(yàn)?里，我們作為用戶(hù)也可以提前體驗(yàn)這些非正式的功能
設(shè)置
實(shí)驗(yàn)功能為了保證嚴(yán)謹(jǐn)性，我特地去看了下，截至本文完稿Edge現(xiàn)在的最新版本是?95.0.1020.30
Edge最新版本因此，根據(jù)官方所述，應(yīng)該是會(huì)在下個(gè)版本更新時(shí)，將Edge瀏覽器開(kāi)發(fā)者工具中代碼的修改同步到Vscode中的實(shí)驗(yàn)功能發(fā)布
什么？現(xiàn)在還沒(méi)發(fā)布？別急嘛，本文就是帶你提前體驗(yàn)！！打好預(yù)防針，到時(shí)候體驗(yàn)功能時(shí)不迷路
首先在你調(diào)試的頁(yè)面中按F12打開(kāi)?開(kāi)發(fā)者工具（跟Chrome Devtools一樣），按照我剛才講的找到設(shè)置里的實(shí)驗(yàn)性功能，往下翻一翻就能看到一個(gè)名叫?Open source files in Visual Studio Code?的功能了
打開(kāi)以后，根據(jù)開(kāi)發(fā)者工具的提示，需要重啟開(kāi)發(fā)者工具才能使該功能生效，所以點(diǎn)擊按鈕重啟一下
重啟DevTools接下來(lái)就需要設(shè)置一下我們項(xiàng)目的目錄了，也就是告訴開(kāi)發(fā)者工具我們項(xiàng)目的根目錄在本地的哪個(gè)文件里，在調(diào)試工具里修改代碼后它好去直接修改我們本地的文件代碼
設(shè)置項(xiàng)目根目錄
設(shè)定完項(xiàng)目根目錄，Edge會(huì)有一個(gè)請(qǐng)求訪問(wèn)本地該文件目錄內(nèi)容的提示，點(diǎn)允許就可以了
允許訪問(wèn)至此，所有設(shè)置都搞定了，接下來(lái)你就可以像本文開(kāi)頭的動(dòng)圖演示一下，無(wú)論你在Devtools里調(diào)試什么代碼，它都會(huì)同步更新到你本地的項(xiàng)目代碼中
同步更新
你對(duì)于 Microsoft Edge 團(tuán)隊(duì)提出的這個(gè)功能怎么看？歡迎在評(píng)論區(qū)留言????！
- EOF -
推薦閱讀??點(diǎn)擊標(biāo)題可跳轉(zhuǎn)1、7 個(gè)使 vue 開(kāi)發(fā)如虎添翼的 VS Code 擴(kuò)展
2、重磅！微軟發(fā)布 vscode.dev，把 VSCode 帶入瀏覽器！
覺(jué)得本文對(duì)你有幫助？請(qǐng)分享給更多人
推薦關(guān)注「前端大全」，提升前端技能
點(diǎn)贊和在看就是最大的支持??