快捷導(dǎo)航

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

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

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

安裝就不用說了，很簡(jiǎn)單，在FireFox上插件庫(kù)里找到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.
      簡(jiǎn)而言之，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é)果，使用很簡(jiǎn)單點(diǎn)Profile

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

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

您可能感興趣的文章:

相關(guān)文章

微信小程序-小說閱讀小程序?qū)嵗╠emo）
本篇文章主要介紹了微信小程序-閱讀小程序?qū)嵗╠emo），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-01-01
JScript 腳本實(shí)現(xiàn)文件下載一般用于下載木馬
腳本實(shí)現(xiàn)文件下載，這個(gè)是jscript的，腳本之家以前曾發(fā)布vbscript版本的,原理一樣的。
2009-10-10
微信網(wǎng)頁(yè)登錄邏輯與實(shí)現(xiàn)方法
這篇文章主要介紹了微信網(wǎng)頁(yè)登錄邏輯與實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-04-04
js判斷手機(jī)號(hào)運(yùn)營(yíng)商的方法
這篇文章主要介紹了js判斷手機(jī)號(hào)運(yùn)營(yíng)商的方法，需要的朋友可以參考下
2015-10-10
JavaScript去掉數(shù)組重復(fù)項(xiàng)的方法分析【測(cè)試可用】
這篇文章主要介紹了JavaScript去掉數(shù)組重復(fù)項(xiàng)的方法,結(jié)合實(shí)例形式分析了javascript使用object特性實(shí)現(xiàn)數(shù)組去除重復(fù)項(xiàng)功能的相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
CSS(js)限制頁(yè)面顯示的文本字符長(zhǎng)度
限制頁(yè)面顯示的字符長(zhǎng)度，一直被眾多網(wǎng)友傾睬，本人也是一fans利用閑暇時(shí)間搜集整理了一些實(shí)用技巧,需要了解的朋友可以參考下
2012-12-12
利用谷歌地圖API獲取點(diǎn)與點(diǎn)的距離的js代碼
下面是一段利用谷歌地圖API獲取點(diǎn)點(diǎn)之間距離的代碼，采用V3版本中的DirectionsService()
2012-10-10
js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法
這篇文章主要介紹了js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法,可實(shí)現(xiàn)文本框輸入加減運(yùn)算式同時(shí)右側(cè)實(shí)時(shí)顯示對(duì)應(yīng)計(jì)算結(jié)果的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
原生js實(shí)現(xiàn)公告滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)公告滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
微信小程序地圖標(biāo)記多個(gè)位置的方法詳解
地圖是我們平時(shí)經(jīng)常用到的組件,而且地圖是顯示在最高層的原生組件,下面這篇文章主要給大家介紹了關(guān)于微信小程序地圖標(biāo)記多個(gè)位置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04