快捷導(dǎo)航

FireBug 調(diào)試JS入門教程如何調(diào)試JS

更新時(shí)間：2013年12月23日 00:05:28 作者：

這篇文章主要為大家介紹下通過firefox的FireBug調(diào)試JS，需要的朋友可以參考下

安裝就不用說了，很簡單，在FireFox上插件庫里找到FireBug就Ok了。下圖是FireBug Debug 窗口。

     FireBug美工用的非常普遍，公司美工妹妹用的非常熟練呵呵，而對(duì)于我們開發(fā)人員，主要用它來Debug JS?？纯垂俜綄?duì)Debug功能的介紹。
Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and see what each variable looked like at that moment. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.
      簡而言之，F(xiàn)ireBug 可以讓我們?cè)谌魏螘r(shí)候debugJS 并查看變量，同時(shí)可以通過它找出JS中性能瓶頸。
      下圖是如何找到Web應(yīng)用的JS，激活Firebug，點(diǎn)Script，然后在All 旁邊選擇你要Debug的JS。

下圖是如何打斷點(diǎn) 基本跟Eclipse一樣，點(diǎn)擊行號(hào)就Ok了。

下圖是如何在斷點(diǎn)上設(shè)定條件，如果條件符合，就進(jìn)入斷點(diǎn)，這個(gè)功能很不錯(cuò)，特別是Debug很復(fù)雜的Function時(shí)候。

下圖是如何單步調(diào)試，跟Eclipse一樣 F11單步

下圖是查看調(diào)用的Stack，對(duì)以復(fù)雜的JS Debug很有幫助。

下圖是查看變量基本跟EclipseDebug 一樣。

下圖是在斷點(diǎn)處查看變量。

有個(gè)很好用的功能，代碼行之間快速調(diào)轉(zhuǎn)，使得對(duì)上千行的JS調(diào)試很輕松。

下圖就是Performance 測(cè)試結(jié)果，使用很簡單點(diǎn)Profile

還有一個(gè)Log功能比較實(shí)用，看下圖如果你不想每次都進(jìn)入斷點(diǎn)，用這個(gè)就再好不過了。

基本用法就這些了，希望對(duì)大家有幫助。

您可能感興趣的文章:

相關(guān)文章

判斷JS對(duì)象是否擁有某屬性的方法推薦
下面小編就為大家了一篇判斷JS對(duì)象是否擁有某屬性的方法推薦。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
JS+CSS制作DIV層可(最小化/拖拽/排序)功能實(shí)現(xiàn)代碼
DIV層最小化和隨意拖拽排序，很多的愛好者都想實(shí)現(xiàn)這個(gè)功能，小編整理搜集了一下，希望本文的知識(shí)點(diǎn)可以幫助到你
2013-02-02
微信小程序頂部導(dǎo)航欄可滑動(dòng)并選中放大
這篇文章主要介紹了微信小程序頂部導(dǎo)航欄可滑動(dòng)并選中放大,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
javascript數(shù)組遍歷的方法實(shí)例分析
這篇文章主要介紹了javascript數(shù)組遍歷的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組遍歷及相關(guān)的some、every、filter、map等方法的使用技巧,需要的朋友可以參考下
2016-09-09
js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片
此功能用js實(shí)現(xiàn)，然后在fileupload控件的change事件中調(diào)用，這樣當(dāng)用fileupload選擇完圖片以后，圖片就會(huì)自動(dòng)顯示出來了，感興趣的各位可以參考下哈
2013-03-03
使用element-ui的upload組件上傳代碼包時(shí)遇到的問題小結(jié)
這篇文章主要介紹了使用element-ui的upload組件上傳代碼包時(shí)遇到的問題及總結(jié),本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12
Javascript 高性能之遞歸，迭代，查表法詳解及實(shí)例
這篇文章主要介紹了Javascript 高性能之遞歸，迭代，查表法詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下
2017-01-01
JS時(shí)間戳與日期格式的轉(zhuǎn)換小結(jié)
這篇文章主要介紹了JS時(shí)間戳與日期格式的轉(zhuǎn)換小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
JS實(shí)現(xiàn)定時(shí)任務(wù)每隔N秒請(qǐng)求后臺(tái)setInterval定時(shí)和ajax請(qǐng)求問題
這篇文章主要介紹了JS實(shí)現(xiàn)定時(shí)任務(wù)每隔N秒請(qǐng)求后臺(tái)setInterval定時(shí)和ajax請(qǐng)求的相關(guān)資料,需要的朋友可以參考下
2017-10-10
echarts報(bào)錯(cuò):Error?in?mounted?hook的解決方法
最近又遇到了寫echarts的時(shí)候常遇到的一個(gè)錯(cuò)誤,這篇文章主要給大家介紹了關(guān)于echarts報(bào)錯(cuò):Error?in?mounted?hook:?“TypeError:?Cannot?read?properties?of?undefined?(reading?‘init‘)“的解決方法,需要的朋友可以參考下
2022-07-07