軟件工程師-Web開發(fā)者可能不知道的12個Firebug技巧

1、Web開發(fā)發(fā)者可能不不知道的112個Fireebug技技巧Fireffox搭配配Fireebug在在web程程序設(shè)計中中，可謂是是“雙劍合合壁”，功功能強大，本本文選取了了其中的一一些技巧予予以介紹,幫助大家家更好的掌掌握Webb開發(fā)的技技能，讓開開發(fā)事半功功倍！相信很多從從事Webb開發(fā)工作作的開發(fā)者者都聽說和和使用過FFirebbug，但但可能大部部分人還不不知道，其其實它是一一個在網(wǎng)頁頁設(shè)計方面面功能相當(dāng)當(dāng)強大的編編輯器，它它可以對HHTML、DOM、CSS、HTTPP和Javvascrript進進行全面的的跟蹤和調(diào)調(diào)試。它是是Fireefox瀏瀏覽器的一一個插件，所所以建議各各位Web

2、b開發(fā)者，要要充分利用用FireeFox瀏瀏覽器和FFirebbug插件件進行日常常的調(diào)試工工作。本文文選取了112個Weeb開發(fā)者者應(yīng)該掌握握的Firrebugg的初級使使用技巧，介介紹給大家家。1、使用FFirebbug可以以找到頁面面中的任何何內(nèi)容不知道各位位有無遇到到過這樣的的情況，在在一個復(fù)雜雜的HTMML頁面中中，當(dāng)你想想找某個頁頁面元素的的實際對應(yīng)應(yīng)的HTMML時，你你不得不在在一大堆HHTML代代碼中去查查找，十分分麻煩。有有了Firrebugg，現(xiàn)在你你只需要在在頁面中，用用鼠標(biāo)右鍵鍵選中某個個元素，然然后在彈出出的菜單中中，選擇“查看元素素”，馬上上就會在HHTML頁頁面代

3、碼中中找到該元元素對應(yīng)的的代碼了，十十分方便，如如下圖所示示：同樣，也提提供了更快快速的方法法：只需要要點Firrebugg插件左上上方的箭頭頭，如下圖圖所示，則則每當(dāng)鼠標(biāo)標(biāo)在頁面中中移動時，在在Fireebug控控制臺中就就馬上顯示示移動時經(jīng)經(jīng)過的HTTML元素素的代碼：2、可以使使用Firrebugg修改HTTML和CCSS通過Firrebugg，可以直直接修改HHTML，增增加HTMML的屬性性，刪除元元素，增加加CSS樣樣式及實現(xiàn)現(xiàn)更多功能能，如下圖圖：在上圖的菜菜單中可以以清楚看到到，你可以以對HTMML元素進進行各樣的的修改操作作，方法是是先點擊HHTML部部分的代碼碼，然后鼠鼠標(biāo)

4、右鍵即即可在彈出出的菜單中中進行操作作。3、可以通通過Firrebugg查看DOOM元素和和對XMLL進行操作作當(dāng)打開一個個HTMLL頁通過FFirebbug查看看HTMLL代碼時，你你可以同時時點在控制制面板中的的DOM樹樹，就會以以DOM的的樹型結(jié)構(gòu)構(gòu)方式看到到整個HTTML的結(jié)結(jié)構(gòu)。而如如果你是打打開了一個個XML文文件，那么么鼠標(biāo)右鍵鍵點XMLL文件中的的任何一個個元素，在在彈出的菜菜單中同樣樣可以選擇擇對XMLL進行相關(guān)關(guān)操作，如如下圖：4、使用FFirebbug調(diào)試試Javaascriipt代碼碼在Fireebug控控制臺中，如如果要執(zhí)行行調(diào)試Jaavasccriptt代碼，只只需

5、要首先先將Scrript控控制面版啟啟動，然后后在點擊CConsoole按鈕鈕，在下拉拉菜單中選選擇顯示JJavassciptt及HTMML錯誤(還可以讓讓用戶選擇擇顯示更多多的錯誤)，接著在在底部會發(fā)發(fā)現(xiàn)出現(xiàn)的箭箭頭，在這這里，你可可以輸入JJavassciptt代碼，輸輸入后，馬馬上按回車車鍵，就可可以執(zhí)行了了，十分方方便，如下下圖：一個小技巧巧是，在輸輸入Javvasciipt的時時候，還支支持使用ttab鍵的的自動完成成提醒功能能，比如對對于一個很很長的Jaavasccipt函函數(shù)，在沒沒輸入完的的時候只要要按tabb鍵firrebugg就會幫助助你自動補補充完整。5、多次加加載頁面后

6、后Fireebug會會記得加載載前的位置置無論你重復(fù)復(fù)加載多少少次頁面，F(xiàn)Firebbug在每每次加載頁頁面后總會會自己記得得加載前頁頁面所在的的位置(比比如你已經(jīng)經(jīng)在瀏覽頁頁面的底部部，此時再再加載頁面面，則新的的頁面加載載后，依然然把你帶到到頁面底部部)。6、使用$標(biāo)記去方方便訪問變變量在上面的第第4點中，我我們提到了了在這個命令令行下可以以進行Jaavasccriptt的調(diào)試，而而另外一個個技巧是可可以使用如如$1去訪訪問曾經(jīng)訪訪問過的變變量中的最最后一個，如如此類推，可可以使用$2訪問曾曾經(jīng)訪問過過的變量中中的倒數(shù)第第二個。如如下圖：7、Firrebugg會高亮度度顯示修改改過的內(nèi)容容

7、在Fireebug中中，只要你你修改過頁頁面中的內(nèi)內(nèi)容，就會會以黃色高高亮度顯示示曾經(jīng)修改改過的內(nèi)容容，如下圖圖：8、監(jiān)視JJavasscrippt的運行行性能在Fireebug中中，你可以以點控制臺臺中的“pprofiile(概概況)”選選項，這將將開啟Fiirebuug的性能能監(jiān)視功能能，之后你你可以進行行頁面的一一系列操作作，當(dāng)再次次點proofilee按鈕后，將將停止對性性能的監(jiān)測測活動，接接著Firrebugg會顯示一一個列表，其其中會清楚楚列明操作作過程中所所涉及的函函數(shù)，調(diào)用用次數(shù)，占占用時間、平均時間間，最小時時間，最大大時間等，如如下圖所示示：9、Firrebugg強大的網(wǎng)網(wǎng)

8、絡(luò)數(shù)據(jù)監(jiān)監(jiān)視功能Firebbug還提提供了十分分功能強大大的網(wǎng)絡(luò)數(shù)數(shù)據(jù)監(jiān)功能能。開發(fā)者者在開發(fā)wweb應(yīng)用用時，經(jīng)常常要觀察各各類HTTTP請求和和回應(yīng)，在在這方面FFirebbug的功功能十分強強大。首先先，只需要要開啟控制制面板中的的網(wǎng)絡(luò)功能能，然后在在每次運行行頁面時，都都可以清楚楚看到每個個HTTPP的請求和和HTTPP回應(yīng)的具具體細節(jié)。如下圖：在上圖中，只只要點每一一個請求旁旁邊的+號號，就可以以看到該請請求的具體體細節(jié)，如如下圖：可以看到，能能看到HTTTP的頭頭部的各種種信息。同同樣，如果果要看當(dāng)前前頁面中的的比如圖片片，F(xiàn)LAASH等元元素的信息息等，也可可以通過上上圖去點不不

9、同的選項項卡去篩選選查看，十十分方便。10、使用用Fireebug的的Log功功能在設(shè)計頁面面時，經(jīng)常常要記錄下下頁面的一一些信息，這這個時候，可可以使用FFirebbug中的的log日日志功能，把把一些信息息輸出到ffirebbug的控控制臺中，這這樣就方便便調(diào)試了。Fireebug提提供了一個個conssole對對象，在插插件加載的的時候就注注冊到Jaavasccriptt的運行環(huán)環(huán)境中去了了，可以在在程序中直直接使用。conssole對對象提供了了一個loog方法，舉舉例說明如如下：在Fireefox中中執(zhí)行如下下代碼，會會看到Fiirebuug的控制制臺中出現(xiàn)現(xiàn)如下信息息：可以看到，各

10、各個級別的的日志輸出出，都帶有有一個彩色色的圖標(biāo)，能能給用戶很很醒目的提提醒。同時時，connsolee.logg 還支持持格式化字字符串的輸輸出，你可可以用類似似C語言中中prinntf的語語法來調(diào)用用這個函數(shù)數(shù)：connsolee.logg(“%ss is %d yyearss oldd.”, “Bobb”, 442)。11、可以以在Firrebugg中調(diào)試程程序在Fireebug控控制臺的的的Javaascriipt控制制面板中，可可以對頁面面中的Jaavasccriptt進行調(diào)試試，方法很很簡單，只只需要在要要調(diào)試的行行的左邊單單擊，就會會出現(xiàn)斷點點了，之后后請記住下下面常件的的快捷鍵

11、：(1) FF10 進進入下一行行;(2) FF8繼續(xù)調(diào)調(diào)試;(3) FF11進入入Javaascriipt中的的函數(shù)體調(diào)調(diào)試;(4) SShiftt+F111跳出函數(shù)數(shù)體。12、在FFirebbug中可可以設(shè)置帶帶條件的斷斷點在Fireebug中中，還可以以設(shè)置帶條條件判斷的的斷點，如如下圖：FireBBugFirebbug 是是網(wǎng)頁瀏覽覽器 Moozillla Fiirefoox 下的的一款開發(fā)發(fā)類插件，現(xiàn)現(xiàn)屬于Fiirefoox的五星星級強力推推薦插件之之一。它集集HTMLL查看和編編輯、Jaavasccriptt控制臺、網(wǎng)絡(luò)狀況況監(jiān)視器于于一體，是是開發(fā)JaavaSccriptt、CSSS、HTMML和Ajjax的得得力助手。Fireebug如如同一把精