調(diào)試JavaScript 在Microsoft Edge 中可通過(guò)幾個(gè)常用工具和方法實(shí)現(xiàn)首先使用開(kāi)發(fā)者工具（DevTools）打斷點(diǎn)在Sources 標(biāo)籤頁(yè)中找到JS 文件單擊行號(hào)左側(cè)設(shè)置斷點(diǎn)或添加debugger; 語(yǔ)句其次利用Console 輸出信息通過(guò)console.log()、console.warn()、console.error() 查看變量及錯(cuò)誤堆?？山Y(jié)合console.table() 清晰顯示對(duì)像或數(shù)組再者通過(guò)Network 標(biāo)籤頁(yè)監(jiān)控網(wǎng)絡(luò)請(qǐng)求查看接口的請(qǐng)求頭、響應(yīng)數(shù)據(jù)、狀態(tài)碼等排查接口問(wèn)題最後調(diào)試移動(dòng)端頁(yè)面時(shí)可在電腦端edge://inspect 頁(yè)面開(kāi)啟遠(yuǎn)程調(diào)試連接同一局域網(wǎng)的手機(jī)設(shè)備進(jìn)行操作
調(diào)試JavaScript 在Microsoft Edge 中其實(shí)不難，關(guān)鍵是掌握幾個(gè)常用工具和方法。 Edge 基於Chromium 內(nèi)核，所以它的開(kāi)發(fā)者工具跟Chrome 差不多，但也有自己的特色。下面我來(lái)聊聊幾個(gè)實(shí)用的調(diào)試技巧。
使用開(kāi)發(fā)者工具（DevTools）打斷點(diǎn)
這是最基礎(chǔ)也最常用的調(diào)試方式。打開(kāi)頁(yè)面後按F12或者右鍵點(diǎn)擊頁(yè)面選擇“檢查”，進(jìn)入DevTools 界面。切換到Sources標(biāo)籤頁(yè)，找到你想要調(diào)試的JS 文件，然後在代碼行號(hào)左側(cè)單擊設(shè)置斷點(diǎn)。
- 頁(yè)面運(yùn)行到斷點(diǎn)位置會(huì)自動(dòng)暫停
- 可以查看當(dāng)前變量值、調(diào)用棧、作用域等信息
- 通過(guò)頂部的控制按鈕（如繼續(xù)、步進(jìn)、跳過(guò)等）進(jìn)行逐步執(zhí)行
如果你不確定哪段代碼出了問(wèn)題，可以在可疑的地方加個(gè)debugger;語(yǔ)句，刷新頁(yè)面時(shí)就會(huì)自動(dòng)停下來(lái)。
利用Console 輸出信息
有時(shí)候不需要打斷點(diǎn)，只需要輸出一些變量或者狀態(tài)看看是不是符合預(yù)期。這時(shí)候可以使用console.log() 、 console.warn() 、 console.error()這些方法。
-
console.log()輸出普通信息 -
console.warn()顯示警告信息 -
console.error()輸出錯(cuò)誤信息，並顯示堆棧追蹤
小技巧：如果要輸出對(duì)像或數(shù)組，可以用
console.table()讓結(jié)果更清晰易讀。
另外，你可以點(diǎn)擊Console 面板右側(cè)的過(guò)濾器，只看error 或warn 的內(nèi)容，方便快速定位問(wèn)題。
監(jiān)控網(wǎng)絡(luò)請(qǐng)求排查接口問(wèn)題
很多前端bug 來(lái)自接口返回的數(shù)據(jù)不對(duì)，這時(shí)候就要去看Network標(biāo)籤頁(yè)了。
- 打開(kāi)Network 面板後刷新頁(yè)面，就能看到所有請(qǐng)求
- 點(diǎn)擊某個(gè)請(qǐng)求可以看到詳細(xì)信息：請(qǐng)求頭、響應(yīng)數(shù)據(jù)、狀態(tài)碼等
- 如果是POST 請(qǐng)求，還可以查看發(fā)送的數(shù)據(jù)是否正確
常見(jiàn)問(wèn)題比如接口404、500 錯(cuò)誤、跨域問(wèn)題，在這裡都能第一時(shí)間發(fā)現(xiàn)。
調(diào)試移動(dòng)端頁(yè)面的小技巧
如果你是在調(diào)試手機(jī)上的網(wǎng)頁(yè)，Edge 提供了一個(gè)遠(yuǎn)程調(diào)試功能：
- 在手機(jī)上打開(kāi)Edge 瀏覽器訪問(wèn)目標(biāo)頁(yè)面
- 在電腦端Edge 輸入
edge://inspect，確?！癉iscover devices”已勾選 - 手機(jī)連接同一局域網(wǎng)後，應(yīng)該能看到設(shè)備和頁(yè)面列表
- 點(diǎn)擊“Inspect”就可以像本地調(diào)試一樣操作
這個(gè)方法對(duì)排查真機(jī)上的兼容性或性能問(wèn)題特別有用。
基本上就這些。調(diào)試JavaScript 不一定非得一步到位，關(guān)鍵是多嘗試、多觀察，慢慢就能看出規(guī)律來(lái)。
以上是如何在Microsoft Edge中調(diào)試JavaScript的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(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
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
熱門話題
Edge瀏覽器如何啟用自動(dòng)密碼儲(chǔ)存功能？
Jan 02, 2024 pm 12:28 PM
很多時(shí)候我們?cè)谑褂秒娔X時(shí)都會(huì)選擇Edge來(lái)查詢自己想要的信息，並且在登錄一些網(wǎng)站的時(shí)候是需要帳號(hào)密碼的，不過(guò)每次都要輸入就比較麻煩，這時(shí)我們要如何操作才能夠使Edge自動(dòng)儲(chǔ)存密碼呢？不清楚的小夥伴就一起來(lái)看看吧。 Edge自動(dòng)儲(chǔ)存密碼的方法1、開(kāi)啟軟體，點(diǎn)選右上角的三個(gè)點(diǎn)「...」按鈕，選擇下方選項(xiàng)清單中的「設(shè)定」。 2、在開(kāi)啟的視窗介面中，點(diǎn)選左側(cè)中的「?jìng)€(gè)人資料」選項(xiàng)。 3、然後找到右側(cè)的“讓我選擇儲(chǔ)存密碼”，將
如何在微軟Edge中啟用超級(jí)拖放模式
Mar 18, 2024 am 09:40 AM
MicrosoftEdge的拖放功能讓您可以輕鬆開(kāi)啟網(wǎng)頁(yè)上的連結(jié)或文本，這種功能既實(shí)用又省時(shí)。要使用此功能，只需將連結(jié)或文字拖放到網(wǎng)頁(yè)的任意位置即可。本文將向您介紹如何在MicrosoftEdge中啟用或停用超級(jí)拖放模式。什麼是MicrosoftEdge中的超級(jí)拖放模式？微軟Edge引進(jìn)了一項(xiàng)名為「超級(jí)拖放」的新功能，用戶只需簡(jiǎn)單地拖放連結(jié)即可在新分頁(yè)中快速開(kāi)啟。只需將連結(jié)拖曳到Edge瀏覽器視窗的任何位置即可輕鬆實(shí)現(xiàn)。 Edge會(huì)自動(dòng)在一個(gè)新的選項(xiàng)卡中載入該連結(jié)。此外，用戶還可以根據(jù)個(gè)人偏
如何在Edge中自訂右鍵選單
Jan 13, 2024 pm 11:57 PM
Edge如何設(shè)定右鍵選單？ Edge瀏覽器是微軟所推出的一款瀏覽器軟體，也是有不少小夥伴都在使用，而我們?cè)谑褂眠^(guò)程中也是會(huì)常用到右鍵選單的功能，不過(guò)還是有不少小夥伴不清楚其右鍵要如何設(shè)置，那麼下面就和小編一起看看Edge設(shè)定右鍵選單的方法，有需要的使用者可不要錯(cuò)過(guò)。 Edge設(shè)定右鍵選單的方法方法一首先，開(kāi)啟Edge瀏覽器，點(diǎn)選右上角的「...」按鈕。 2、接著打開(kāi)下面的“設(shè)定”，如圖所示。接下來(lái)，在遊戲介面的上方搜尋欄中輸入"右鍵"，點(diǎn)擊搜尋按鈕。這樣你就能找到右鍵選單的設(shè)定選項(xiàng)了。方
如何降低Edge瀏覽器的記憶體佔(zhàn)用？ Edge記憶體佔(zhàn)用問(wèn)題的解決方法
Jan 05, 2024 pm 05:54 PM
Edge瀏覽器記憶體佔(zhàn)用高怎麼辦？小編發(fā)現(xiàn)現(xiàn)在有非常多的小夥伴都喜歡使用微軟的Edge瀏覽器，因?yàn)槠洳粌H簡(jiǎn)潔，還能夠安裝各種瀏覽器插件，不過(guò)最近有部分小伙伴在使用Edge的時(shí)候發(fā)現(xiàn)其cpu佔(zhàn)用非常高，也就是佔(zhàn)用記憶體過(guò)於高，這時(shí)候要如何處理這種情況呢？下面就跟小編一起來(lái)看看解決方法吧。 Edge記憶體佔(zhàn)用高的解決方法1、關(guān)閉標(biāo)籤進(jìn)入edge瀏覽器點(diǎn)擊右上角三個(gè)點(diǎn)。在工作列中選擇“擴(kuò)展”。將不需要使用的插件關(guān)閉或卸載即可。 2、更新MicrosoftEdge瀏覽器請(qǐng)確保您的電腦上已經(jīng)安裝
解決edge瀏覽器在b站全螢?zāi)荒Ｊ较碌目D問(wèn)題
Jan 12, 2024 pm 11:00 PM
近期不少朋友在使用edge瀏覽器全螢?zāi)挥^看b站影片的時(shí)候都遇到了卡頓的狀況體驗(yàn)很不好，那該怎麼解決呢？下面就一起來(lái)看看詳細(xì)的解決方法吧。 edge瀏覽器b站全螢?zāi)豢D：1、開(kāi)啟瀏覽器輸入網(wǎng)址about:flags。 2、進(jìn)入開(kāi)發(fā)者設(shè)定。 3.點(diǎn)擊上方「將所有標(biāo)誌重設(shè)為預(yù)設(shè)」。 4.下滑到底，勾選「啟用實(shí)驗(yàn)性JavaScript功能」即可解決。
如何處理Microsoft尊重您隱私的edge彈窗
Jan 31, 2024 pm 02:14 PM
edge彈出Microsoft尊重您的隱私怎麼辦？最近有使用者回饋?zhàn)约菏褂玫膃dge瀏覽器經(jīng)常彈窗Microsoft尊重您的隱私，即使點(diǎn)擊了我接受，下次打開(kāi)瀏覽器還是會(huì)出現(xiàn)。那麼到底要怎麼關(guān)閉這個(gè)煩人的彈跳窗呢？出現(xiàn)這個(gè)問(wèn)題應(yīng)該是edge瀏覽器沒(méi)有接受msn.cn網(wǎng)站的cookie，下面小編就帶你去看看解決edge彈出Microsoft尊重您的隱私的方法，試下有沒(méi)有用。解決edge彈出Microsoft尊重您的隱私的方法開(kāi)啟Edge瀏覽器的設(shè)定：隱私、搜尋和服務(wù)，找到清除瀏覽資料這一項(xiàng)，點(diǎn)擊選擇每次關(guān)
簡(jiǎn)化三步驟，輕鬆刪除Microsoft Edge中的邊框
Sep 02, 2023 pm 02:57 PM
許多用戶對(duì)MicrosoftEdge中網(wǎng)頁(yè)周圍的白色邊框不滿意。他們認(rèn)為這是不必要的和分散注意力的，他們要求Microsoft完全刪除MicrosoftEdge的邊框。這類似於「不要修復(fù)沒(méi)有損壞的東西」的說(shuō)法，但Microsoft似乎沒(méi)有考慮到這一點(diǎn)。當(dāng)然，它是一種流行的網(wǎng)路瀏覽器，提供多種功能，包括內(nèi)建廣告攔截器、追蹤預(yù)防和密碼管理器。但是，某些用戶可能會(huì)發(fā)現(xiàn)瀏覽器在網(wǎng)頁(yè)周圍有邊框。此邊框可能會(huì)分散注意力或難看，有幾種方法可以將其刪除。在關(guān)於r/Edge的冗長(zhǎng)對(duì)話中，一些普通的非內(nèi)部用戶發(fā)現(xiàn)，
Edge瀏覽器插件安裝教學(xué)：如何安裝crx文件
Jan 05, 2024 pm 07:21 PM
Edge瀏覽器如何安裝crx檔案？ Crx檔案是瀏覽器擴(kuò)充應(yīng)用程式插件，而且許多瀏覽器的插件格式都是Crx的，連Edge瀏覽器也不例外，那麼我們要如何為Edge瀏覽器安裝crx檔案呢？其實(shí)這個(gè)操作起來(lái)十分簡(jiǎn)單，下面就跟小編一起來(lái)看看具體的操作方法吧。 Edge安裝crx檔案的方法1.先開(kāi)啟edge瀏覽器，點(diǎn)選頂部網(wǎng)址列。 2、在網(wǎng)址列輸入"edge://flags/#extensions-on-edge-urls"並按回車。 3.進(jìn)入後，將圖示選項(xiàng)改為「已停用」。 4.修改完成後，點(diǎn)選
