chrome瀏覽器如何斷點(diǎn)調(diào)試異步加載的JS
前言
在我們?nèi)粘ｉ_(kāi)發(fā)中，常常利用chrome強(qiáng)大的控制臺(tái)Sources下面進(jìn)行代碼斷點(diǎn)調(diào)試，但是通過(guò)$.getScript等異步加載JS的方式在Sources里面就是找不到，那如何進(jìn)行debug斷點(diǎn)調(diào)試呢？下面來(lái)一起看看。
這是我們用Sources斷點(diǎn)調(diào)試的實(shí)例圖：
圖中我們可以看到，在index.js中我們通過(guò)$.getScript引入test.js，看看表現(xiàn)如何：
我們?cè)贜etwork中看到test.js已經(jīng)成功引入，但是它卻屬于XHR類請(qǐng)求，這樣我們?cè)赟ources必然找不到它。
不出所料，Sources里果然沒(méi)有發(fā)現(xiàn)test.js的蹤跡！高潮來(lái)了，那還怎么進(jìn)行斷點(diǎn)調(diào)試呢？？？
我知道兩個(gè)方案，先來(lái)最簡(jiǎn)單的：
方案一： 在test.js代碼的頭部或者尾部加上//@ sourceURL=test.js，然后在(no domain)里面找到它進(jìn)行調(diào)試，看看結(jié)果：
方案二： 把$.getScript這種異步的方式換成創(chuàng)建script標(biāo)簽同步加載的方式，直接上圖：
總結(jié)
控制臺(tái)斷點(diǎn)對(duì)我們進(jìn)行代碼檢查、功能檢測(cè)、數(shù)據(jù)查看等等需求太有用了，我們盡量用斷點(diǎn)替換那煩人的console.log吧，以上就是這篇文章的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)和工作能有所幫助，如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
整理Javascript流程控制語(yǔ)句學(xué)習(xí)筆記
整理Javascript流程控制語(yǔ)句學(xué)習(xí)筆記，之前一系列的文章是跟我學(xué)習(xí)Javascript，本文就是進(jìn)一步學(xué)習(xí)javascript流程控制語(yǔ)句，希望大家繼續(xù)關(guān)注2015-11-11
在HTML中，<script>標(biāo)簽用于嵌入或引用JavaScript代碼，在HTML中，<script>標(biāo)簽用于嵌入或引用JavaScript代碼，本文將詳細(xì)的而介紹這兩個(gè)標(biāo)簽，感興趣的同學(xué)可以參考一下2023-04-04
微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件，滾動(dòng)選項(xiàng)卡效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
微信小程序?qū)崿F(xiàn)點(diǎn)擊卡片 翻轉(zhuǎn)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊卡片 翻轉(zhuǎn)效果本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript之map reduce_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript之map reduce的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
js中apply和Math.max()函數(shù)的問(wèn)題及區(qū)別介紹
這篇文章主要介紹了js中apply和Math.max()函數(shù)的問(wèn)題，本文給大家?guī)?lái)兩種答案，每一種答案給大家介紹的非常詳細(xì)，在文章底部給大家提到了js中Math.max.apply和Math.max的區(qū)別，感興趣的朋友一起看看吧2018-03-03
JavaScript中清空數(shù)組的方法總結(jié)
本文給大家總結(jié)了三種js清空數(shù)組的方法，每種方法都與眾不同，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了js觀察者模式的彈幕案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
js實(shí)現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
這篇文章主要介紹了js實(shí)現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法,結(jié)合實(shí)例形式分析了vue.js及jQuery數(shù)據(jù)綁定相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-02-02
React+Typescript實(shí)現(xiàn)倒計(jì)時(shí)Hook的方法
本文主要介紹了React+Typescript實(shí)現(xiàn)倒計(jì)時(shí)Hook的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09