瀏覽器調(diào)試動態(tài)js腳本的方法(圖解)
前兩天拉取公司前端代碼修改,發(fā)現(xiàn)在開發(fā)者工具的sources選項里邊,居然沒有列出來我要調(diào)試的js腳本,后來觀察了一下,腳本是動態(tài)在頁面里引入的,可能是因為這樣所以不顯示出來,但是如果不能斷點調(diào)試,只靠打印日志真要把人累死了,效率太低,網(wǎng)絡(luò)搜索試驗了一下,有兩種方式可以解決:
1、在腳本里邊增加 //# sourceURL=xxxxxxxxx.js,名稱自己命名,可以直接使用文件名,如下圖:
然后在網(wǎng)頁里打開包含這個js的頁面,這樣就在開發(fā)者工具里能夠看到了,可以像普通js一樣正常打斷點并進(jìn)行調(diào)試
2、第二種方法是利用 console.log("讓我調(diào)試吧!") 打印日志,在瀏覽器console里看到輸出后,點擊后面的鏈接,即跳入動態(tài)腳本。名字一般為vmXXX,如下圖:
總結(jié)
以上所述是小編給大家介紹的瀏覽器調(diào)試動態(tài)js腳本的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
淺談javascript獲取元素transform參數(shù)
本文主要給大家簡單介紹了javascript獲取元素的transform參數(shù)的方法以及個人的理解,記錄下來分享給大家。2015-07-07javascript中select下拉框的用法總結(jié)
這篇文章主要為大家介紹了javascript中select下拉框的用法,select在開發(fā)中經(jīng)常被用到,用于進(jìn)行選項選擇,需要的朋友可以參考下2016-01-01JavaScript實現(xiàn)簡易放大鏡最全代碼解析(ES5)
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡易放大鏡最全代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09關(guān)于innerHTML后丟失動態(tài)綁定的EVENT問題解決方法
用innerHTML取出一段內(nèi)容后再innerHTML回去,那么原來動態(tài)綁定的事件就會丟失,下面與大家分享下解決方法,感興趣的朋友可以參考下哈2013-05-05JavaScript中instanceof運算符的用法總結(jié)
這篇文章主要是對JavaScript中instanceof運算符的用法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11JavaScript冒泡算法原理與實現(xiàn)方法深入理解
這篇文章主要介紹了JavaScript冒泡算法,結(jié)合實例形式詳細(xì)分析了JavaScript冒泡算法基本原理、實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下2020-06-06