如何對jQuery代碼進行簡單的調試

在html開發(fā)中,jQuery可以說得上是神器了,幾乎沒有WEB開發(fā)者沒有聽過jQuery,它的強大無需多言!用發(fā)它,可以幫我們大大加快開發(fā)速度.

那么,對于初學者來說,有沒有啥好用的小工具,方便我們對jQuery進行調試學習的呢?

有!當然有!!!那就是 jQueryPad!

看名字就知道它的用途了,我們一起來學習下吧,相信你會喜歡的!!

工具/原料
jQueryPad
方法/步驟
1
今天我們使用的工具是一個相對小眾的,非著名的工具,
建議您關注/私信我,查看共享(一般我在百度經(jīng)驗中使用到的軟件類工具,都可以在共享網(wǎng)盤中找到),因此這里不演示下載,相信您能很容易得到它的.
下載打開它,界面如下:

2
在默認的情況下,軟件已經(jīng)幫我們寫好了示例代碼,可以直接F5測試一下效果!

3
我們再修改一下jQuery代碼,比如修改它的背景色,邊框,文字顏色等,如圖:

4
它的還可以直接在瀏覽器中直接打開測試,如圖:

5
保存成文件導出看看,如圖,是自動生成的代碼:

6
是不是很輕巧,簡便?本工具是jQuery初學者的好幫手,調試jQuery代碼非常方便,同時,要更改jQuery的不同版本也很方便,直接替換掉程序目錄中的 Templates\jQuery.js就可以了;
或者是修改jQueryPad.exe.config 配置文件中的文件路徑就可以了;
您還可以修改生成文件的模板,非常輕巧實用!趕快試試吧!
========

jquery的調試利器：Firebug使用詳解

http://www.cnblogs.com/zgqys1980/archive/2010/12/21/1913080.html
? ? ? ?Javascript的調試，是開發(fā)Web應用尤其是AJAX應用很重要的一環(huán)，目前對Javascript進行調試的工具很多，我比較喜歡使用的是Firebug。Firebug是Joe Hewitt開發(fā)的一套與Firefox集成在一起的功能強大的web開發(fā)工具，可以實時編輯、調試和監(jiān)測任何頁面的CSS、HTML和JavaScript。

本文主要是為初學者介紹一下Firebug的基本功能與如何使用Firebug。由于本人水平與能力有限，在文章中的可能會有很多錯誤與遺漏，希望大家能諒解和指正！

<!--[if !supportLists]-->1、 <!--[endif]-->安裝

Firebug是與Firefox集成的，所以我們首先要安裝的事Firefox瀏覽器。安裝好瀏覽器后，打開瀏覽器，選擇菜單欄上的“工具”菜單，選擇“附加軟件”，在彈出窗口中點擊右下角的“獲取擴展”鏈接。在打開的頁面的search輸入框中輸入“firebug”。等搜索結果出來后點擊Firbug鏈接（圖1-1紅色圈住部分）進入Firebug的下載安裝頁面。

<!--[if !vml]--><!--[endif]-->

圖1-1

在頁面中點擊Install Now（圖1-2）按鈕。

<!--[if !vml]--><!--[endif]-->

圖1-2

在彈出窗口（圖1-3）中等待3秒后單擊“立即安裝”按鈕。

<!--[if !vml]--><!--[endif]-->

圖1-3

等待安裝完成后會單擊窗口（圖1-4）中的“重啟 Firefox”按鈕重新啟動Firefox。

<!--[if !vml]--><!--[endif]-->

圖1-4

當Firefox重啟完后我們可以在狀態(tài)欄最右邊發(fā)現(xiàn)一個灰色圓形圖標（ <!--[if !vml]--><!--[endif]-->），這就表示Firebug已經(jīng)安裝好了。灰色圖標表示Firebug未開啟對當前網(wǎng)站的編輯、調試和監(jiān)測功能。而綠色（ <!--[if !vml]--><!--[endif]-->）則表示Firebug已開啟對當前網(wǎng)站進行編輯、調試和監(jiān)測的功能。而紅色圖標（ <!--[if !vml]--><!--[endif]-->）表示已開啟對當前網(wǎng)站進行編輯、調試和監(jiān)測的功能，而且檢查到當前頁面有錯誤，當前圖標表示有5個錯誤。

<!--[if !supportLists]-->2、 <!--[endif]-->開啟或關閉Firebug

單擊Firebug的圖標或者按F12鍵你會發(fā)現(xiàn)頁面窗口被分成了兩部分，上半部分是瀏覽的頁面，下半部分則是Firebug的控制窗口（圖2-1）。如果你不喜歡這樣，可以按CTRL+F12或在前面操作后單擊右上角的上箭頭按鈕，彈出一個新窗口作為Firebug的控制窗口。

<!--[if !vml]--><!--[endif]-->

圖2-1

從圖2-1中我們可以看到，因為我們開啟Firebug的編輯、調試和監(jiān)測功能，所以目前只有兩個可以選擇的鏈接：“Enable Firebug”與“Enable Firebug for this web site”。如果你想對所有的網(wǎng)站進行編輯、調試和檢測，你可以點擊“Enable Firebug”開啟Firebug，則以后無論瀏覽任何網(wǎng)站，Firebug都處于活動狀態(tài)，隨時可以進行編輯、調試和檢測。不過一般的習慣我們只是對自己開發(fā)的網(wǎng)站進行編輯、調試和檢測，所以我們只單擊“Enable Firebug for this web site”開啟Firebug就行了。

開啟Firebug窗口（圖2-2）后，我們可以看到窗口主要有兩個區(qū)域，一個是功能區(qū)，一個是信息區(qū)。選擇功能區(qū)第二行的不同標簽，信息區(qū)的顯示會有不同，Options的選項也會不同，搜索框的搜索方式也會不同。

<!--[if !vml]--><!--[endif]-->

圖2-2

要關閉Firebug控制窗口單擊功能區(qū)最右邊的關閉圖標或按F12鍵就行了。如果要關閉Firebug的編輯、調試和監(jiān)測功能，則需要單擊功能區(qū)最左邊的臭蟲圖標，打開主菜單，選擇“Disable Firebug”或“Disable Firebug for xxxxx”。


<!--[if !supportLists]-->3、 <!--[endif]-->Firebug主菜單

單擊功能區(qū)最左邊的臭蟲圖標可打開主菜單（圖3-1），其主要功能描述請看表1。

<!--[if !vml]--><!--[endif]-->

圖3-1

菜單選項

說明

Disable Firebug
關閉/開啟Firebug對所有網(wǎng)頁的編輯、調試和檢測功能

Disable Firebug for xxxxx

關閉/開啟Firebug對xxxxx網(wǎng)站的編輯、調試和檢測功能

Allowed Sites

設置允許編輯、調試和檢測的網(wǎng)站

Text Size：Increase text size

增大信息區(qū)域顯示文本的字號

Text Size：Decrease text size

減少信息區(qū)域顯示文本的字號

Text Size：Normal text size

信息區(qū)域以正常字體顯示

Options：Always Open in New Window

設置Firebug控制窗口永遠在新窗口打開

Show Preview tooltips

設置是否顯示預覽提示。

Shade Box Model

當前查看狀態(tài)為HTML，鼠標在HTML element標簽上移動時，頁面會相應在當前標簽顯示位置顯示一個邊框表示該標簽范圍。這個選項的作用是設置是否用不同顏色背景表示標簽范圍。

Firebug Website..

打開Firebug主頁。

Documentation..

打開Firebug文檔頁。


Discussion Group


打開Firebug討論組。


Contribute


打開捐助Firebug 頁面。

表1

<!--[if !supportLists]-->4、 <!--[endif]-->控制臺（Console）

單擊功能區(qū)第二欄的“Console”標簽可切換到控制臺（圖4-1）。控制臺的作用是顯示各種錯誤信息（可在Options里定義），顯示腳本代碼中內嵌的控制臺調試信息，通過命令行對腳本進行調試，通過單擊Profile對腳本進行性能測試。 控制臺分兩個區(qū)域，一個是信息區(qū)，一個是命令行，通過Options菜單的“Larger Command Line”可改變命令行位置。

<!--[if !vml]--><!--[endif]-->

圖4-1

? ? Options菜單的選項請看表2。

菜單選項

說明

Show JavaScript Errors 顯示腳本錯誤。
Show JavaScript Warnings

顯示腳本警告。

Show CSS Errors

顯示CSS錯誤。

Show XML Errors

顯示XML錯誤。

Show XMLHttpRequests

顯示XMLHttpRequests。

Larger Command Line

將命令行顯示從控制窗口底部移動右邊，擴大輸入?yún)^(qū)域。

表2

單擊“Clear”按鈕可清除控制臺的控制信息。


<!--[if !supportLists]-->5、 <!--[endif]-->頁面源代碼查看功能


單擊功能區(qū)第二欄的“HTML”標簽可切換到源代碼查看功能（圖5-1）。雖然Firefox也提供了查看頁面源代碼的功能，但它顯示的只是頁面文件本身的源代碼，通過腳本輸出的HTML源碼是看不到。而Firebug則是所見即所得，是最終的源代碼。


<!--[if !vml]--><!--[endif]-->


圖5-1


我們來看一個例子，文件源代碼如下：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html>

<head>

?<title>簡單的例子</title>

? ? ? ?<meta http-equiv="content-type" content="text/html; charset=utf-8">

? ? ? ?<style>

? ? ? ? ? ? ? #div1{background:red;width:100px;height:100px;}

? ? ? ? ? ? ? #div2{background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;}

? ? ? ? ? ? ? #div3{background:yellow;width:50px;height:50px;margin-left:25px;}

? ? ? ?</style>

</head>

<body scroll="no">

?<div id="div1">方塊一</div>

?<div id="div2">方塊二</div>

?<script>

? ? document.getElementById('div1').innerHTML+='<div id="div3">方塊三</div>';

?</script>?

</body>

</html>

在例子中我們通過JavaScript在“div1”中加入了“div3”，在Firefox中查看源代碼你是看不到“div1”中包含有代碼“<div id="div3">方塊三</div>”的，但是Firebug中我們是可以看見的（圖5-2選中部分）。

<!--[if !vml]--><!--[endif]-->

圖5-2

從圖5-1中我們可以看到，信息區(qū)被分成了兩個部分，左邊是顯示源代碼，右邊是一個功能區(qū)，可以從這里查看到HTML Element中的CSS定義、布局情況和DOM結構。

從圖5-2中我們可以看到，源代碼按DOM結構分層次顯示的，通過層次折疊功能，我們就可以很方便分析代碼。在功能區(qū)的第一行還根據(jù)你的選擇，清晰的按子、父、根列出了當前源代碼的層次（圖5-2紅色部分），單擊各部分，則會即刻轉到該部分的源代碼。

<!--[if !vml]--><!--[endif]-->

圖5-3

在源代碼上移動鼠標，頁面就會出現(xiàn)一個半透明的方塊，指示當前鼠標所指源代碼的顯示區(qū)域，當選擇。在圖5-4中，鼠標正指向“div1”，而在頁面中“div1”的顯示區(qū)域上被一個半透明的方塊遮蓋了。

<!--[if !vml]--><!--[endif]-->

圖5-4

如果你把“Inspect”按鈕按下，功能正好相反，在頁面中移動鼠標，則當前顯示區(qū)域的源代碼會被加亮顯示出來。在圖5-5中，我們可以看到鼠標指針正指向“方塊二”，而在源代碼中可以看到，“方塊二”的源代碼“<div id="div2">方塊二</div>”已被加亮顯示（紅色部分）。如果你單擊某個顯示區(qū)域，則該區(qū)域的源代碼會被選中。

<!--[if !vml]--><!--[endif]-->


圖5-5

是不是很方便？方便是方便，但是我的源代碼很多，而且有些區(qū)域在頁面中不方便鼠標指定，怎么辦？沒關系，我們還有一個厲害武器，搜索功能。譬如我們知道某個HTML Element的ID是“div2”，但在層層疊疊的源代碼中不好找，在頁面中鼠標也很難找到，那我們就在功能區(qū)的搜索框中輸入“div2”，再看看源代碼區(qū)域，“div2”被加亮顯示出來了（圖5-6紅色部分）。在這個簡單的例子可能看不出很好的效果，大家可以嘗試一下把“div1”先折疊起來，然后在搜索框輸入“div3”，你可以看到“div1”會自動展開，并將“div3”加亮顯示，如果還覺得不夠理想，可以找一個源代碼比較多的例子測試一下。

<!--[if !vml]--><!--[endif]-->


圖5-6


除了通過按下“Inspect”按鈕，單擊顯示區(qū)域選擇源代碼，我們還可以通過單擊源代碼中的HTML標記（開始或結束標記都可以）來選擇。我們嘗試一下把鼠標移動到HTML標記，會發(fā)現(xiàn)鼠標指針變成了手的形狀，這說明我們可以通過單擊選擇該源代碼。選擇源代碼后，我們就可以通過右邊的功能區(qū)查看、編輯和調試它的CSS定義和盒子模型（CSS盒子模型請參閱相關說明，這里就不再贅述了），還有一個很好的功能就是當外部編輯器修改了源代碼（沒有刪除該源代碼，只是修改），我們在瀏覽器重新加載頁面后，選擇的源代碼不會改變，我們可以很方便的觀察源代碼的變化與效果。


有沒有經(jīng)常為調試某個頁面效果在源代碼編輯器和瀏覽器之間切換，一次又一次的刷新而感到懊惱？有了Firebug你就不用再懊惱了。你可以直接在源代碼中進行編輯，然后查看效果。如果只是修改已經(jīng)存在的屬性，例如要修改“div2”的內部文本，則直接將鼠標移動到文本上面，等鼠標指針換成“I”，單擊即可進行編輯了。其它已存在的屬性和屬性值也可以這樣直接進行編輯。如果要為某Element添加屬性，請將鼠標移動到該Element上，等光標變?yōu)椤癐”的時候，單擊鼠標右鍵，從菜單中選擇“New Attribute..”，在顯示的編輯框中輸入你要添加的屬性名稱就可以了。


<!--[if !vml]--><!--[endif]-->


圖5-7


<!--[if !vml]--><!--[endif]-->


圖5-8


我們嘗試一下為“div2”增加一個“onclick”屬性，單擊的結果是將“div2”的顯示文本修改為“單擊”。把光標移動到“div2”上，然后單擊鼠標右鍵，選擇“New Attribute..”（圖5-7），在編輯框中輸入“onclick”，最后按一下回車鍵（圖5-8），出現(xiàn)屬性值輸入框后，輸入“this.innerHTML=’單擊’”，回車后我們可以繼續(xù)添加下一個屬性，這次測試不需要，所以按ESC結束我們的輸入。我們來檢驗一下修改結果，單擊頁面“div2”的區(qū)域（圖5-9），“div2”的顯示文本已修改為“單擊”了，而源代碼也改變了。有沒有發(fā)現(xiàn)，“div2”被加亮顯示了？這又是Firebug的一個功能。只要我們通過頁面中的操作修改了Element的屬性，Firebug就會在源代碼中通過加亮的方式指示當前操作修改那些屬性值。譬如我們單擊某個鏈接修改了一個iframe里的src，那么這個src的屬性值就會被加亮顯示。 又譬如我們單擊某個鏈接修改了一個image里的圖像，那么它的src屬性值也會被加亮顯示。我們可以通過Options菜單里的“Highlight Changes”設置是否加亮顯示改變。而“Expand Changes”則是設置被改變的源代碼折疊起來看不見時展開讓它可見。而“Scroll Changes into view”則是源代碼很多，被改變的源代碼不在可視區(qū)域時，將被改變的源代碼滾動到可視區(qū)域。

<!--[if !vml]--><!--[endif]-->

圖5-9

有時候我們不單是要增加一兩個屬性，而是要做更多的修改，這怎么辦呢？很簡單，選擇你要更改Element，然后單擊功能區(qū)第一行的“Edit”按鈕或者直接將鼠標移動到要修改的Element上，單擊鼠標右鍵，選擇“Edit HTML..”，這時候，源代碼區(qū)域將切換到編輯狀態(tài)，你可以隨意的修改你選擇的源代碼了。我們嘗試修改一下“div2”，將被修改顯示文本修改回“方塊二”，我們選擇“div2”，然后單擊“Edit”按鈕（圖5-10），將顯示文本修改回“方塊二”，然后再次單擊“Edit”按鈕退出編輯狀態(tài)，如果要放棄修改，可以按ESC鍵退出。因為是所見即所得的，所以我們在修改的時候，頁面會同時刷新顯示。

<!--[if !vml]--><!--[endif]-->

圖5-10

如果要修改Element的CSS定義怎么辦？很簡單，選擇該Element，然后在右邊的窗口選擇“Style”標簽，這里顯示的就是當前Element的CSS定義了。我們在這里可以對CSS定義進行添加、編輯、刪除、禁止等操作。我們嘗試一下把“div2”的背景色禁止了看看。將鼠標移動到“background”這行（圖5-11），我們可以看到在這行的最右邊會有一個灰色的禁止圖標，只要單擊這個禁止圖標，就可以禁止了這個CSS屬性了。我們單擊這個圖標看看效果，頁面中的“div2”已經(jīng)變成白色背景了，而禁止圖標也變成紅色，而文本會則變成灰色（圖5-12），這說明已經(jīng)禁止了“background”了。當然了，這個操作也可以通過鼠標右鍵的“Disable XXXXX”來實現(xiàn)（XXXXX表示當前選擇的CSS屬性）。我們再次單擊禁止圖標，恢復“background”屬性。我們這次要把“background”的顏色由藍色（blue）修改為綠色（green）。我們把鼠標移動到“background”屬性值“blue”上（圖5-13）。怎么會出現(xiàn)一個藍色背景的方框？這是Firebug提供背景預覽功能，讓我們很直觀的知道當前背景是什么。如果背景是圖片的話，顯示的將是背景圖片的縮略圖。繼續(xù)我們的操作，單擊屬性值，在出現(xiàn)的編輯框中將“blue”修改為“green”。好了，背景已經(jīng)修改為綠色了。現(xiàn)在的顯示文本是左對齊的，我想讓它居中對齊，這需要在CSS里加一個“text-align”的屬性，值為“center”。請在CSS上單擊鼠標右鍵，在菜單中選擇“New Property..”，在編輯框中輸入“te”，Firebug已通過自動完成功能幫我們輸入“text-align”了（圖5-14），按Tab鍵或回車，在屬性值中我們輸入“c”，Firebug再次幫我們自動完成了“center”（圖5-15），按Tab鍵或回車完成輸入，如果不需要繼續(xù)輸入新屬性，按ESC或單擊鼠標取消輸入。文本“方塊二”現(xiàn)在已經(jīng)居中顯示了。如果忘記了某個屬性值有那些選項怎么辦？不要緊，在輸入屬性值的時候可以通過上、下箭頭選擇我們需要的屬性值。

在“Style”標簽里我們可以選擇“Options”菜單里的“Show Computed Style”查看瀏覽器默認的風格定義。

<!--[if !vml]--><!--[endif]-->


圖5-11


<!--[if !vml]--><!--[endif]-->


圖5-12


<!--[if !vml]--><!--[endif]-->


圖5-13


<!--[if !vml]--><!--[endif]-->


<!--[if !vml]--><!--[endif]-->


圖5-14


圖5-15


頁面設計中，我們有時候最頭疼的是什么？是盒子模型！為了調整一個Element的margin、border、padding和相對位置，我們往往需要花很多工夫去修改源代碼，然后刷新頁面查看效果。有了Firebug，你就可以輕松應對了。我們將右邊的區(qū)域切換到“Layout”標簽（圖5-16），你會看到一個盒子模型，里面從外到里通過不同的線和顏色劃分出了offset、margin、border、padding和內容五個區(qū)域，里面4個區(qū)域在每個邊上都有1個數(shù)值，表示該方向上的調整值。我們先在左邊選擇“div2”，然后把鼠標分別移動到“Layout”里的不同區(qū)域（圖5-17），然后留意一下頁面，頁面在頂部多了一條水平標尺，在左邊多一條垂直標尺，而4條實線指示出了當前鼠標指示的區(qū)域實際位置，通過與標尺的交點可以知道該區(qū)域離頁面顯示區(qū)域左上角的偏移量（單位是px），當然我們也可以通過layout中的數(shù)字計算出這些偏移量。在圖中，我們還可以看到，在內容區(qū)域的外面還有3個不同顏色的區(qū)域，它們從里到外用不同顏色表示了padding、border、margin的位置和偏移量。只要將鼠標移動到不同區(qū)域，頁面中的4條實線也會改變位置，指示出頁面中相應的區(qū)域。我們還可以通過修改Layout中的數(shù)值，對顯示效果進行調整。例如我們要將“div2”的內容顯示區(qū)域擴大到200×200，將鼠標移動最左邊的100上，光標變成“I”后，單擊鼠標，然后在輸入框中輸入200，按回車可繼續(xù)修改高度值，輸入200，回車后完成修改。頁面中的“div2”區(qū)域已經(jīng)擴展到200×200了，而源代碼也增加了“style="width: 200px; height: 200px;"”（圖5-18）。我們切換標簽到“Style”，會發(fā)現(xiàn)多了“element.style {height:200px;width:200px;}”(圖5-19)，而CSS定義里面的高度和寬度都劃了橫線，表示不起作用了，“element.style”表示直接定義在Element源代碼上的CSS屬性。有時候某些Element會有相同的屬性，也有自己特殊的屬性，而特殊的屬性想寫在Element的源代碼上，就可以在Style里單擊鼠標右鍵選擇“Edit Element Style..”進行添加。如果有興趣的話，大家可以嘗試修改“Layout”里的其它屬性值，看看頁面的變化，這里我就不再一一說明了。

? ? 如果不想在頁面中顯示標尺和4條實線，可以不選擇“Options”菜單里的“Show Rules and Guides”。

<!--[if !vml]--><!--[endif]-->

圖5-16

<!--[if !vml]--><!--[endif]-->

圖5-17

<!--[if !vml]--><!--[endif]-->


圖5-18


<!--[if !vml]--><!--[endif]-->


圖5-19


在源代碼顯示區(qū)域我們還可以通過鼠標右鍵復制源代碼和顯示內容，這里就不一一說明了。DOM的說明請看查看DOM結構一節(jié)，兩者是一樣的。在源代碼區(qū)域中如果覺得源代碼顯示太密，可以將“Options”菜單里的“Show White Space”選項打開，每個源代碼塊之間會用空白行隔離。如果要查看源代碼的注釋內容，請將“Options”菜單里的“Show Comments”選項打開。


這里要提醒大家一下，在HTML里調試出正確的源代碼和CSS后，別忘記將源代碼和CSS的修改結果復制到你的源代碼文件中，不然你的調試結果在頁面刷新后會付之東流。切記！切記！


<!--[if !supportLists]-->6、 <!--[endif]-->查看CSS定義


將功能區(qū)第二行的標簽切換到“CSS”，在這里我們可以查看頁面中所有的CSS定義，包括鏈接的CSS文件。通過功能區(qū)的文件選擇按鈕可以選擇不同的含有CSS的文件（圖6-1紅色圈住部分）。

<!--[if !vml]--><!--[endif]-->

圖6-1

CSS的定義的編輯這里就不再說明了，這個可以參考HTML的“Style”操作。

“Edit”按鈕功能和HTML的“Edit”功能類似。

<!--[if !supportLists]-->7、 <!--[endif]-->腳本調試

將功能區(qū)第二行的標簽切換到“Script”，在這里我們可以對頁面中所有的腳本進行調試，包括鏈接的腳本。和CSS一樣，可以通過文件選擇按鈕選擇不同的腳本文件。

如果要在腳本中設置一個斷點，可以單擊行號旁邊的空白區(qū)域，這時會出現(xiàn)一個紅色的點表示在這里設置了斷點（圖7-1），當腳本運行到此會停止運行，等待你的操作。在右邊的小窗口將標簽切換到“Breakpoints”可以查看我們設置的所有斷點（圖7-2），單擊左上角的checkbox可以讓斷點不起作用，如果要刪除斷點可以單擊右上角的刪除圖標。通過“Options”菜單的“Disable All Breakpoints”可暫時禁止所有斷點，而“Remove All Breakpoints”可刪除所有斷點。在斷點標記的紅點上單擊右鍵還可以設置斷點條件，在符合條件的時候才會停止腳本的執(zhí)行。

<!--[if !vml]--><!--[endif]-->

圖7-1

<!--[if !vml]--><!--[endif]-->

圖7-2

下面我們來嘗試一下斷點的功能。首先在測試頁腳本里增加一個test的函數(shù)，函數(shù)的主要操作是運行一個1000次的循環(huán)，將循環(huán)的參數(shù)值顯示在“div2”里：

? ? function test(){

? ? ? ? ? ? for(var i=0;i<1000;i++){

? ? ? ? ? ? ? ? ? ?document.getElementById('div2').innerHTML=i;

? ? ? ? ? ? }

? ? ? ? }


? ? 在“div2”里增加一個“onclick”屬性，單擊后執(zhí)行test：

<div id="div2" οnclick='test()'>方塊二</div>

刷新頁面，然后在“for(var i=0;i<1000;i++){”這行上設置一個斷點，并設置條件為“i=100”（圖7-3），然后單擊“div2”開始執(zhí)行函數(shù)test。

<!--[if !vml]--><!--[endif]-->

圖7-3

當腳本停下來后，我們將鼠標移動到變量“i”上，這時會出現(xiàn)一個小方框，里面有一個數(shù)值，這就是變量“i“的當前值（圖7-4）。在腳本調試的時候，你可以通過這個方法很方便的了解到當前變量的值。你還可以通過右邊窗口的“Watch”標簽查看到“i”的值（圖7-5）。

<!--[if !vml]--><!--[endif]-->

圖7-4

<!--[if !vml]--><!--[endif]-->

圖7-5

在“Watch”標簽窗口我們可以通過“Options”菜單選擇查看用戶自定義屬性（Show User-defined Properties）、用戶自定義函數(shù)（Show User-defined Functions）、DOM屬性（Show DOM Properties）、DOM函數(shù)(Show DOM Functions)和DOM常數(shù)(Show DOM Constants)。我們還可以通過單擊“New watch expression…”（圖7-6淡黃色背景部分）加入自己想跟蹤的內容。例如我們想跟蹤一下“div2”的顯示內容，就可以單擊“New watch expression…”，加入“document.getElementById('div2').innerHTML”，輸入中可通過TAB鍵自動完成關鍵字的輸入（圖7-7）。如果不想跟蹤了，可單擊最右邊的刪除圖標取消跟蹤。

<!--[if !vml]--><!--[endif]-->

圖7-6

<!--[if !vml]--><!--[endif]-->

圖7-7

腳本在斷點停止后，我們就可以利用搜索框旁的4個跟蹤按鈕進行代碼跟蹤了（圖7-7）。第一按鈕是繼續(xù)運行程序，不再執(zhí)行跟蹤，快捷鍵是F8。第二個按鈕是單步執(zhí)行方式，每次執(zhí)行一條語句，該方式在遇到函數(shù)調用時不進入調用函數(shù)內部進行跟蹤，快捷鍵是F10。第三個按鈕也是單步執(zhí)行方式，每次執(zhí)行一條語句，但它遇到函數(shù)調用時會進入調用函數(shù)內部進行跟蹤，快捷鍵是F11。當你進入調用函數(shù)內，想馬上跳出來時，可以單擊第四個按鈕，該按鈕沒有快捷鍵。

搜索框的作用和HTML源代碼查看是一樣的，不過有一個不同，就是輸入“#n”（n≥1），可以直接跳到腳本的第n行。

當執(zhí)行腳本在“console”標簽內顯示一個錯誤，而錯誤的提示行左邊出現(xiàn)一個暗紅色的圓點時（圖7-8），我們可以單擊改紅點在該行設置一個斷點。


<!--[if !vml]--><!--[endif]-->


圖7-8


我們可以通過“Script”標簽的“Options”菜單的“Break on All Errors”選項設置每當腳本發(fā)生錯誤時就中斷腳本，進入調試狀態(tài)。


有時候一個函數(shù)隨機出現(xiàn)錯誤，你不可能每次調用都去跟蹤一次，而產(chǎn)生錯誤的原因很可能是傳遞的參數(shù)錯誤，這時你可以通過跟蹤函數(shù)調用的功能去檢查每次調用函數(shù)時的參數(shù)情況。操作在函數(shù)腳本內單擊鼠標右鍵，在菜單中選擇“Log Calls to xxxxx”（xxxxx為函數(shù)名），然后可在“console”標簽中可查看函數(shù)調用情況。


<!--[if !supportLists]-->8、 <!--[endif]-->查看DOM結構


將功能區(qū)第二行的標簽切換到“DOM”可俺層次查看整個頁面的DOM結構。通過“Options”菜單可自定義選擇查看用戶自定義屬性（Show User-defined Properties）、用戶自定義函數(shù)（Show User-defined Functions）、DOM屬性（Show DOM Properties）、DOM函數(shù)(Show DOM Functions)或DOM常數(shù)(Show DOM Constants)等內容。


通過雙擊你可以修改DOM里面的屬性值。


<!--[if !supportLists]-->9、 <!--[endif]-->查看網(wǎng)絡狀況


作為開發(fā)人員，是否會經(jīng)常聽到老板或客戶抱怨頁面下載太慢了？于是你就懷疑是否腳本太多了？忘記壓縮圖片了？服務器太慢了？網(wǎng)絡太慢？確實是頭疼的事情。有了Firebug，你就可以很容易的對這個問題進行分析和判斷了。請將Firebug的當前標簽切換到“Net”（圖9-1）。


<!--[if !vml]--><!--[endif]-->


圖9-1


<!--[if !vml]--><!--[endif]-->


圖9-2


從圖中我們可以看到，頁面中每一個下載文件都用一個灰色條表示它相對其它文件是從什么時候開始下載的，下載時間是多少。在底部我們看到頁面發(fā)送了多少個請求，下載總量是多少，有多少是有緩存的，下載總共花費了多少時間等信息。


如果只想了解某一樣文件的下載情況，你可以單擊功能區(qū)第一欄的文件分類按鈕過濾文件（圖9-2紅色圈住區(qū)域1）。


將鼠標在文件中移動，如果是圖片，我們可以看到圖片的縮略圖（圖9-2紅色圈住區(qū)域3）。


如果顯示為紅色的文件名，則表示該文件在服務器中不存在，不能下載，這樣你就要檢查一下文件的路徑是否正確或者是否上傳了該文件（圖9-2紅色圈住區(qū)域2）。

我們可以展開某個文件，查看它的HTTP頭信息和返回結果的信息。如果請求的是一個動態(tài)頁面或XMLHttpRequest，則還可以查看提交的變量。通過查看提交的變量和返回信息，我們可以很方便的調試程序是否正確提交了需要的變量和返回了正確的數(shù)據(jù)。例如從圖36中，我們可以看到向“topics-remote.php”發(fā)送了一個請求，提交的參數(shù)有“_dc”、“callback”、“l(fā)imit”和“start”四個，值分別為“1188637444000”、“stcCallback1001”、“25”與“0”，從這里我們可以很方便的知道我們腳本操作提交的參數(shù)是否正確。切換到“Response”頁可以看到返回的結果（圖9-3），在這里你可以對返回結果進行檢查。如果你感覺在這里查看結果很亂，你可以單擊鼠標右鍵，在彈出菜單中選擇“Copy Response body”復制結果到編輯器查看，你還可以選擇“Open in New Tab”打開一個新標簽瀏覽。

<!--[if !vml]--><!--[endif]-->

圖9-3

通過右鍵菜單你可以復制文件地址（Copy Location）、HTTP請求頭信息(Copy Request Headers)和HTTP響應頭信息（Copy Response Headers）。

如果不想使用該功能，可以選擇Options菜單的“Disable Network Monitoring”關閉該功能。

<!--[if !supportLists]-->10、 ? ? ? ? ? ? ?<!--[endif]-->命令行調試


在“Console”標簽了有一個命令行工具，我們可以在這里運行一些腳本對頁面進行調試。


我們在命令行中輸入“document.getElementById('div2').innerHTML”看看效果（圖10-1），別忘了用TAB鍵實現(xiàn)快速輸入關鍵字。在信息區(qū)顯示了當前“div2”的顯示內容。


<!--[if !vml]--><!--[endif]-->


圖10-1


要輸入“document.getElementById”是不是覺得很麻煩？這里有一個簡單的辦法，用“$”符號代替“document.getElementById”，我們再在命令行中輸入“$('div2').innerHTML”，然后看看結果，是一樣（圖10-2）。


<!--[if !vml]--><!--[endif]-->


圖10-2


當你通過“Inspect”鎖定了一些HTML Element時，你可以通過“$1”來訪問最后一個Element，依次類推，我們可以通過“$n”(n>1)訪問依次倒序訪問鎖定的Element。


我們來實踐一下，刷新一下測試頁面，然后按下“Inspect”按鈕，鼠標單擊“方塊二”，然后在按下“Inspect”按鈕，單擊“方塊一”。將firebug窗口切換回“Console”標簽，然后輸入“$1”，回車后再輸入“$2”，查看一下結果（圖10-3），正是我們用鎖定過的Element。

<!--[if !vml]--><!--[endif]-->

圖10-3

在命令行還可以通過“$$(HTML 標記)”返回一個Element數(shù)組。我們在測試頁輸入“$$(‘div’)”看看（圖10-4）。我們再輸入“$$(‘div’)[0]”看看（圖10-5）。是不是很便于我們對HTML進行調試。


<!--[if !vml]--><!--[endif]-->


圖10-4


<!--[if !vml]--><!--[endif]-->


圖10-5


命令行的所有特殊函數(shù)請看表3：


命令
說明


$(id)


通過id返回Element。


$$(selector)


通過CSS選擇器返回Element數(shù)組。


$x(xpath)


通過xpath表達式返回Element數(shù)組。


dir(object)


列出對象的所有屬性，和在DOM標簽頁查看該對象的是一樣的。


dirxml(node)


列出節(jié)點的HTML或XML的源代碼樹，和在HTML標簽頁查看改節(jié)點一樣。


cd(window)


默認情況下，命令行相關的是頂層window對象，使用該命令可切換到frame里的window獨享。


clear()


清空信息顯示區(qū)，和單擊按鈕Clear功能一樣。


inspect(object[, tabName])


監(jiān)視一個對象。tabName表示在那個標簽頁對該對象進行監(jiān)視，可選值為“html”、“css”、“script”和“dom”。


keys(object)


返回由對象的屬性名組成的數(shù)組。


values(object)


返回由對象的屬性值組成的數(shù)組。


debug(fn)


在函數(shù)的第一行增加一個斷點。


undebug(fn)


移除在函數(shù)第一行的斷點。


monitor(fn)


跟蹤函數(shù)fn的調用。


unmonitor(fn)


不跟蹤函數(shù)fn的調用。


monitorEvents(object[, types])


跟蹤對象的事件。Types的可選值為“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “l(fā)oad”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。


unmonitorEvents(object[, types])


不跟蹤對象的事件。Types的可選值為“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “l(fā)oad”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。


profile([title])


開始對腳本進行性能測試，可選參數(shù)title將作為測試結果的標題。


profileEnd()


結束腳本性能測試。


表3


命令行有命令記憶功能，可通過上、下箭頭鍵選擇已經(jīng)輸入過的命令。


<!--[if !supportLists]-->11、 ? ? ? ? ? ? ?<!--[endif]-->在腳本文件中加入調試命令


有沒有對腳本調試中經(jīng)常需要alert感到厭煩？有了Firebug，你就可以放下alert了，因為Firebug有功能比alert更強大的console.log。


先讓我們來認識一下console.log，在測試文件腳本區(qū)域我們輸入一下代碼：


console.log('Hello');


? ?刷新一下頁面，將firebug切換到“console”標簽看看（圖11-1），在信息區(qū)顯示出了我們要輸出的信息“Hello”。當然了，單憑這個就說console.log有點夸大，我們修改一下test函數(shù)，把“document.getElementById('div2').innerHTML=i;”修改為：


console.log('當前的參數(shù)是：%d',i);


<!--[if !vml]--><!--[endif]-->


圖11-1


? ?刷新頁面后看看結果（圖11-2）。是不是挺不錯的？console.log可以象c語言的printf一樣實現(xiàn)格式化輸出。我們再在腳本區(qū)加入一個語句：


console.log(2,4,window,test,document);


<!--[if !vml]--><!--[endif]-->


圖11-2




刷新頁面后看看結果（圖11-3）。console.log可以連續(xù)輸出多個對象，而且如果對象是DOM、函數(shù)，還可以直接點擊去到該對象。


<!--[if !vml]--><!--[endif]-->


圖11-3


如果你覺得console.log輸出的文本太單調，不能表示出不同的信息，那么你可以通過console.debug、 console.info、 console.warn和console.error來代替console.log，這些函數(shù)分別會用不同的背景顏色和文字顏色來顯示信息。

我們來看看測試一下這些函數(shù)的輸出，在腳本中加入：

? ? ?console.debug('This is console.debug!');

? ? ?console.info('This is console.info!');

? ? ?console.warn('This is console.warn!');

? ? ?console.error('This is console.error!');
?

? ?刷新頁面看看結果（圖11-4）。
?

<!--[if !vml]--><!--[endif]-->

圖11-4??

有時候，為了更清楚方便的查看輸出信息，我們可能需要將一些調試信息進行分組輸出，那么可以使用console.group來對信息進行分組，在組信息輸出完成后用console.groupEnd結束分組。我們測試一下把剛才的4個輸出作為一個分組輸出，修改代碼為：

? ? ?console.group('開始分組：');

? ? ?console.debug('This is console.debug!');

? ? ?console.info('This is console.info!');

? ? ?console.warn('This is console.warn!');

? ? ?console.error('This is console.error!');


? ? ?console.groupEnd();



刷新頁面看看結果（圖11-5）。在console.group中，我們還可以加入一個組標題“開始分組：”。如果需要，我們還可以通過嵌套的方式，在組內再分組。



<!--[if !vml]--><!--[endif]-->


圖11-5


??


有時候，我們需要寫一個for循環(huán)列出一個對象的所有屬性或者某個HTML Element下的所有節(jié)點，有了firebug后，我們不需要再寫這個for循環(huán)了，我們只需要使用console.dir(object)或console.dirxml(element)就可以了。


在測試頁中加入代碼測試一下：



? ? ?console.dir(document.getElementById('div1'));

? ? ?console.dirxml(document.getElementById('div1'));



? ? 結果請看圖11-6和圖11-7。


<!--[if !vml]--><!--[endif]-->


圖11-6


<!--[if !vml]--><!--[endif]-->


圖11-7


??


是否想知道代碼的運行速度？很簡單，使用console.time和console.timeEnd就可以。


修改一下test函數(shù)的代碼，測試一下運行1000次循環(huán)需要多少時間：


? ? ?function test(){

? ? ? ? ? ? console.time('test');

? ? ? ? ? ? for(var i=0;i<1000;i++){

? ? ? ? ? ? ? ? ? ?document.getElementById('div2').innerHTML=i;

? ? ? ? ? ? ? ? ? ?//console.log('當前的參數(shù)是：%d',i);

? ? ? ? ? ? }

? ? ? ? ? ? console.timeEnd('test');

? ? ? ? }


刷新頁面，單擊“方塊二”，看看結果（圖11-8）。在這里要注意的是console.time和console.timeEnd里的參數(shù)要一致才會有正確的輸出，而該參數(shù)就是信息的標題。


<!--[if !vml]--><!--[endif]-->

圖11-8


是否想知道某個函數(shù)是從哪里調用的？console..trace可幫助我們進行追蹤。在test函數(shù)的結尾加入：


? ? ? ? ? ? console.trace();


刷新頁面，單擊“方塊二”，看看結果（圖11-9）。結果顯示是在坐標（97，187）的鼠標單擊事件執(zhí)行了test函數(shù)，而調用的腳本是在simple.html文件里的第1行。因為是在HTML里面的事件調用了test函數(shù)，所以顯示的行號是第1行。如果是腳本，則會顯示調用腳本的行號，通過單擊可以直接去到調用行。

<!--[if !vml]--><!--[endif]-->

圖11-9


如果想在腳本某個位置設置斷點，可以在腳本中輸入“debugger”作為一行。當腳本執(zhí)行到這一行時會停止執(zhí)行等待用戶操作，這時候可以通過切換到“Script”標簽對腳本進行調試。

? ? Firebug還有其它的一些調試函數(shù)，這里就不一一做介紹，有興趣可以自己測試。表4是所有函數(shù)的列表：

函數(shù)

說明
console.log(object[, object, ...])
向控制臺輸出一個信息。可以輸入多個參數(shù)，輸出將已空格分隔各參數(shù)輸出。

第一參數(shù)可以包含格式化文本，例如：

console.log(‘這里有%d個%s’,count,apple);

字符串格式：


%s ：字符串。


%d, %i：數(shù)字。


%f： 浮點數(shù)。


%o -超鏈接對象。


console.debug(object[, object, ...])


向控制臺輸出一個信息，信息包含一個超鏈接鏈接到輸出位置。


console.info(object[, object, ...])


向控制臺輸出一個帶信息圖標和背景顏色的信息，信息包含一個超鏈接鏈接到輸出位置。


console.warn(object[, object, ...])


向控制臺輸出一個帶警告圖標和背景顏色的信息，信息包含一個超鏈接鏈接到輸出位置。


console.error(object[, object, ...])


向控制臺輸出一個帶錯誤圖標和背景顏色的信息，信息包含一個超鏈接鏈接到輸出位置。


console.assert(expression[, object, ...])


測試一個表示是否為true，如果為false，提交一個例外信息到控制臺。


console.dir(object)


列出對象的所有屬性。

console.dirxml(node)

列出HTML或XML Element的XML源樹。

console.trace()

輸出堆棧的調用入口。

console.group(object[, object, ...])

將信息分組再輸出到控制臺。通過console.groupEnd()結束分組。

console.groupEnd()

結束分組輸出。

console.time(name)

創(chuàng)建一個名稱為name的計時器，計算代碼的執(zhí)行時間，調用console.timeEnd(name)停止計時器并輸出執(zhí)行時間。

console.timeEnd(name)

停止名稱為name的計時器并輸出執(zhí)行時間。

console.profile([title])

開始對腳本進行性能測試，title為測試標題。

console.profileEnd()

結束性能測試。

console.count([title])

計算代碼的執(zhí)行次數(shù)。titile作為輸出標題。

表4

<!--[if !supportLists]-->12、 ? ? ? ? ? ? ?<!--[endif]-->在IE中使用Firebug

Firebug是Firefox的一個擴展，但是我習慣在IE中調試我的頁面怎么辦？如果在頁面腳本中加入console.log()將調試信息寫到Friebug，在IE中肯定是提示錯誤的，怎么辦？不用擔心，Frirebug提供了Frirbug Lite腳本，可以插入頁面中模仿Firebug控制臺。

我們可以從一下地址下載firebug lite：

http://www.getfirebug.com/releases/firebuglite1.0-b1.zip

然后在頁面中加入：

<script language="javascript" type="text/javascript" src="/路徑/firebug.js"></script>

? ? 如果你不想在IE中模仿Friebug控制臺，只是不希望console.log()腳本出現(xiàn)錯誤信息，那么在頁面中加入一下語句：

<script language="javascript" type="text/javascript" src="/路徑/firebugx.js"></script>

如果你不想安裝Firebug Lite，只是想避免腳本錯誤，那么可以在腳本中加入以下語句：

if (!window.console || !console.firebug)

{

? ? var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",

? ? "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];


? ? window.console = {};

? ? for (var i = 0; i < names.length; ++i)

? ? ? ? window.console[names[i]] = function() {}

}



我們將firebug.js加入到測試頁面中，然后打開IE，加載頁面。頁面加載完成后，我們按下F12鍵就可以打開控制臺了。每次頁面刷新后，你都要按F12鍵打開控制臺，是不是很煩？如果不想那么，就在html標簽中加入“debug=’true’”，例如：

<html debug="true">

? ?在Friebug Lite中也有命令行，但是功能沒那么強。

<!--[if !supportLists]-->13、 <!--[endif]-->快捷鍵和鼠標操作

全局操作

打開Firebug窗口

F12


關閉Firebug窗口


F12


在新窗口打開Firebug


Ctrl+F12


往前切換標簽


Ctrl+`


將光標移到命令行


Ctrl+Shift+L


將光標移到搜索框


Ctrl+Shift+K


進入Inspect模式


Ctrl+Shift+C


進行JavaScript性能測試


Ctrl+Shift+P


重新執(zhí)行最后一條命令行命令


Ctrl+Shift+E


HTML標簽


編輯屬性


單擊屬性名或值


編輯文本節(jié)點


單擊文本


編輯Element


雙擊Element標記


移到路徑里的下一個節(jié)點


Ctrl+.


移到路徑里的上一個節(jié)點

Ctrl+,

HTML編輯

完成編輯

Return

取消編輯

Esc

移到下一個區(qū)域

Tab

移到上一個區(qū)域

Shift+Tab

HTML Inspect 模式

取消Inspect

Esc

Inspect 父節(jié)點

Ctrl+Up

Inspect 子節(jié)點

Ctrl+Down

Script標簽

繼續(xù)運行

F5

Ctrl+/

單步執(zhí)行（Step Over）

F10

Ctrl+'

單步執(zhí)行（Step Into）

F11

Ctrl+;

退出函數(shù)（Step Out）

Shift+F11

Ctrl+Shift+;

設置斷點

單擊行號

禁止斷點

在行號上Shift+Click

編輯斷點條件

在行號上Right-Click

運行到當前行

在行號上Middle-Click


在行號上Ctrl+Click


移到堆棧中的下一個函數(shù)


Ctrl+.


移到堆棧中的上一個函數(shù)


Ctrl+,


將焦點切換到Scripts菜單


Ctrl+Space


將焦點切換到Watch編輯


Ctrl+Shift+N


DOM 標簽


編輯屬性


雙擊在空白


移到路徑中下一個對象


Ctrl+.


移到路徑中上一個對象

Ctrl+,


DOM 和Watch編輯


結束編輯


Return


取消編輯


Esc


自動完成下一個屬性


Tab


自動完成上一個屬性


Shift+Tab


CSS標簽


編輯屬性


單擊屬性

插入新屬性

雙擊空白處

移動焦點到Style Sheets菜單

Ctrl+Space

CSS編輯

完成編輯


Return


取消編輯


Esc


移到下一個區(qū)域


Tab


移到上一個區(qū)域


Shift+Tab


按步長1增加數(shù)值


Up


按步長1減少數(shù)值


Down


按步長10增加數(shù)值


Page Up


按步長10減少數(shù)值


Page Down


自動完成下一個關鍵字


Up


自動完成上一個關鍵字


Down


Layout標簽


編輯值


單擊值


Layout編輯


完成編輯


Return


取消編輯


Esc


移到下一個區(qū)域


Tab


移到上一個區(qū)域


Shift+Tab


按步長1增加數(shù)值


Up


按步長1減少數(shù)值


Down


按步長10增加數(shù)值


Page Up


按步長10減少數(shù)值


Page Down


自動完成下一個關鍵字


Up


自動完成上一個關鍵字


Down


命令行 (小)


自動完成上一個屬性


Tab


自動完成下一個屬性


Shift+Tab


執(zhí)行


Return


Inspect結果


Shift+Return


打開結果鼠標右鍵菜單


Ctrl+Return


命令行 (大)


執(zhí)行


Ctrl+Return


<!--[if !supportLists]-->13、 ? ? ? ? ? ? ?<!--[endif]-->總結

真是意想不到，Firebug居然有那么多好功能居然是我不知道。通過寫本篇文章，才認真的了解和學習了一次Firebug，越學越感覺到它的威力。不過我學的也只是皮毛，還有更多的功能和技巧需要在平時的使用中慢慢積累，因此這篇文章只是一個簡單的介紹，還有很多東西是沒有涉及到的，而且因為我本身水平與能力有限，所以文中會有很多錯誤與遺漏，希望大家能多多諒解與指正！

例子最終源代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug='true'>
<head>
? <title>簡單的例子</title>
? ? <meta http-equiv="content-type" content="text/html; charset=utf-8">
? ? <style>
? ? ? ? #div1{background:red;width:100px;height:100px;}
? ? ? ? #div2{background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;}
? ? ? ? #div3{background:yellow;width:50px;height:50px;margin-left:25px;}
? ? </style>
<script language="javascript" type="text/javascript" src="firebug/firebug.js"></script>
</head>
<body scroll="no">
? <div id="div1">方塊一</div>
? <div id="div2" οnclick='test()'>方塊二</div>
? <script>
? ? ? document.getElementById('div1').innerHTML+='<div id="div3">方塊三</div>';
/* ? ? ?console.log('Hello');
? ? ? console.log(2,4,window,test,document);
? ? ? console.group('開始分組：');
? ? ? console.debug('This is console.debug!');
? ? ? console.info('This is console.info!');
? ? ? console.warn('This is console.warn!');
? ? ? console.error('This is console.error!');
? ? ? console.groupEnd();*/
// ? ? ?console.dir(document.getElementById('div1'));
// ? ? ?console.dirxml(document.getElementById('div1'));
? ? ??
? ? ? function test(){
? ? ? ? ? console.time('test');
? ? ? ? ? for(var i=0;i<1000;i++){
? ? ? ? ? ? ? document.getElementById('div2').innerHTML=i;
? ? ? ? ? ? ? //console.log('當前的參數(shù)是：%d',i);
? ? ? ? ? }
? ? ? ? ? console.timeEnd('test');
? ? ? ? ? console.trace();
? ? ? }
? ? ??
? </script> ?
</body>
</html>
========

瀏覽器console中加入jquery方便調試

http://blog.csdn.net/sinat_18831033/article/details/52059899

chrome瀏覽器F12打開調試界面，在console中輸入(firefox同樣可以)：

[javascript] view plain copy
var jquery = document.createElement('script'); ? ?
jquery.src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js";//若調試頁面是https的這里也修改為https. ?
document.getElementsByTagName('head')[0].appendChild(jquery); ? ?
jQuery.noConflict(); ?

這個節(jié)點就是我們動態(tài)生成的 script 節(jié)點.然后把百度上的jquery 地址賦給 jquery 節(jié)點.在 head 節(jié)點下插入jquery 節(jié)點即可.
回車，然后就可以使用jQuery的選擇器等很方便的操作調試了。
========

關于調試Jquery的問題

用firebug調試修改Jquery代碼會使整個jquery失效,在chrome下調試修改Jquery則完全沒效果,求解,~

如果你是做.net的話，用ie調試是最方便的。直接在jquery代碼里打debugger，ie會讓你跳入VS中直接調試。如果不是.net的話我?guī)筒涣四懔?

firebug用來查看DOM樹和ajax比較方便，至于調試js還是自己在代碼中用alert()彈出窗比較好，我一般都是用alert()彈出窗來調試的，其它的瀏覽器也沒有js的調試功能

怎么會失效呢，肯定是你代碼有問題
========
jquery調試的時候可以執(zhí)行,不調試不不執(zhí)行

ajax是異步的，除了第一個，模擬點擊，要在ajax回調里搜索面

你alert();如果有這個alert()就執(zhí)行沒有就不執(zhí)行,那你就給這個方法加個延時

代碼貼出來，或者自己去一句一句alert()排錯

效果是聯(lián)動操作（3級聯(lián)動）
當頁面加載的時候，第一個下拉框綁定第一個，然后給模擬一下“click”，加載第二個下拉框的數(shù)據(jù)（ajax都一些好，沒有問題），然后也是默認選中第一個選項，再模擬一個“cilck”，加載第三個下拉框的數(shù)據(jù)。。。
========
$(function()) jquery函數(shù)如何調試
我寫了一個網(wǎng)頁，調用了jQuery的$(function())函數(shù)，但是這個函數(shù)似乎出問題了，我在火狐瀏覽器的firebug中為這段js代碼加入斷點，但是由于這個函數(shù)是文檔一旦加載完畢就立即執(zhí)行的，因此設置斷點沒有效果。想請教諸位高手，這種情況下應該怎么調試？

加斷點后刷新網(wǎng)頁就會進入調試的斷點了。

直接打斷點就行了，加載到對應行自己會阻塞，就可以查看值了。另外一種你可以在代碼中使用alert()；來把要查看的對象；
========
jquery用vs2010如何調試

JQ 是在VS里面是不能調試的。如果要調試，建議使用 FF，FF里面有個JS腳本調試。

直接斷點調試 同時要把瀏覽器的禁用js調試關閉
========
谷歌瀏覽器在調試jquery的時候，防止跳入jquery文件

在我們調試js的時候，如果引用了一些js庫，如jQuery庫的話，調試的時候，經(jīng)常會跳到jquery庫里面，那是各種循環(huán)，各種惡心，所以我們要進行一些設置。?

這里寫圖片描述
========

jQuery之Ajax調試

在Ajax的使用過程中，最舒服的是一步成功，最頭痛的是不成功，但是不知道去哪里看錯誤，然后看到錯誤之后又是哪里出的問題，所以今天說一下Ajax的使用調試：

工具/原料
jQuery.js
編輯器
Chrome瀏覽器
wamp搭建環(huán)境
方法/步驟
1
在同一目錄下創(chuàng)建ajax.html和ajax.php

2
編寫ajax.html,注意修改文件編碼為utf-8,代碼如下：
<!DOCTYPE html>
<html>
? <head>
? ? <title>Ajax</title>
? </head>
? <body>
? ? <button οnclick="checkAjax()">Ajax Test</button>
? </body>
</html>
在wamp環(huán)境下，瀏覽器運行如圖：

3
編寫ajax.php文件，注意修改文件編碼為utf-8,代碼如下：
<?php
? ? echo "Ajax Test";
在wamp環(huán)境下，使用瀏覽器運行如圖：

4
在ajax.html的head中添加如下代碼：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function checkAjax(){
?$.ajax({
? ?url:"ajax.php",//請求的頁面地址
? ?type:'post', ?//請求數(shù)據(jù)的方式 get post ?
? ?dataType:'text', ?//數(shù)據(jù)返回的方式 text html json ?
? ?success:function(data) {?
? ? ? ? ? ? ? ? ? ?//請求之后，響應成功執(zhí)行
? ? ? ? ? ? ? ? ? alert(data);
? ? ? ? ? }, ? ?
? ? error : function() {?
? ? ? ? ? ? ? ? ? //請求之后，響應不成功或者有錯誤執(zhí)行
? ? ? ? ? ? ? ? ? alert("異常！"); ? ?
? ? ? ? ? }
?});
}
</script>
當前ajax.html代碼結構如圖：

5
在wamp環(huán)境下，運行Ajax.html,點擊Ajax Test按鈕，出現(xiàn)如圖彈框，說明正常；若沒有結果，參考后面的排錯方式.

6
看到這里，就說明你有錯誤出現(xiàn)，這之后就說一下排錯的方式：
首先，瀏覽器的空白處鼠標右鍵-->審查元素，然后看有沒有如圖2所示的紅色‘x’號，有的話就是js的語法錯誤，點擊紅色‘x’號，會定位到2，即是錯誤文件的名稱，點擊后會定位到3，即語法錯誤出現(xiàn)的位置或者此位置的前面有錯誤；若是沒有，參考7

7
同樣的在第6步的基礎上，查看Network-->右側的Ajax.php-->Headers中的信息，若是200 ok，說明文件路徑?jīng)]有問題，若為其他的值，那么就要確定一下php文件的調用路徑；即使是200 ok，還要查看Preview選項下的內容，此內容即為php文件的輸出內容：以Ajax.php為例，php文件輸出的是Ajax Test，在Preview顯示的就是Ajax Test。若是Preview輸出的是其他內容如圖3，說明php文件中有錯誤。

8
以上說了那么多，但是錯誤的種類還有很多的樣式，不能夠一一列舉。但是總結思路：錯誤出現(xiàn)了，首先去判斷錯誤是html和php兩個文件，哪個文件出的錯，然后再去對應的文件中去解決。
其中第4步中的代碼可簡寫：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function checkAjax(){
?$.post('ajax.php',function(data){
? ? ?alert(data);
? ? },'text'
?);
}
</script>
主要是$.ajax和$.post的使用方式的區(qū)別，$.post使用較簡單，但是$.ajax更有利于全面掌握理解
END
注意事項
wamp環(huán)境運行文件
======== 《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的jQuery调试学习总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。