淘寶優(yōu)站javascript調(diào)試工具

淘寶優(yōu)站javascript調(diào)試工具是一款用來(lái)調(diào)試淘寶優(yōu)站建設(shè)中，物品跳轉(zhuǎn)JS是否正常的小工具。

如何調(diào)試Javascript代碼

目前，常用的瀏覽器IE、Chrome、Firefox都有相應(yīng)的腳本調(diào)試功能。作為我們.NET 陣營(yíng)，學(xué)會(huì)如何在IE中調(diào)試JS就足夠了，在掌握了IE中的調(diào)試方法以后，Chrome和Firefox中的調(diào)試方法也變得相當(dāng)簡(jiǎn)單了。

在F12開(kāi)發(fā)人員工具中進(jìn)行調(diào)試

打開(kāi)IE瀏覽器，按下F12鍵，就會(huì)打開(kāi)開(kāi)發(fā)人員工具，這是IE內(nèi)置的開(kāi)發(fā)人員開(kāi)發(fā)工具，方便開(kāi)發(fā)人員對(duì)HTML、CSS、Javascript等網(wǎng)頁(yè)資源進(jìn)行跟蹤調(diào)試使用的。

如果你打開(kāi)的時(shí)候沒(méi)有固定在網(wǎng)頁(yè)底部，可以點(diǎn)擊右上角菜單欄中的按鈕來(lái)完成。
我們看到在這個(gè)工具窗口里面有幾個(gè)標(biāo)簽頁(yè)，分別是：HTML、CSS、控制臺(tái)、腳本、探查器和網(wǎng)絡(luò)，點(diǎn)開(kāi)每一個(gè)標(biāo)簽，可以執(zhí)行相應(yīng)的任務(wù)。

在HTML標(biāo)簽窗口中，工具欄中的按鈕所執(zhí)行的操作如下圖：

CSS標(biāo)簽是用來(lái)查看樣式的；控制臺(tái)顯示網(wǎng)頁(yè)中JS的各種輸出信息，包括錯(cuò)誤信息、用戶日志等；打開(kāi)腳本標(biāo)簽頁(yè)，這里面才是我們想要的內(nèi)容。

我在圖中用黃色矩形選中連個(gè)控件，左側(cè)的下拉列表用來(lái)選擇文件，右側(cè)的按鈕用來(lái)啟動(dòng)調(diào)試。當(dāng)點(diǎn)擊啟動(dòng)調(diào)試后，調(diào)試程序會(huì)將窗口最大化，我們?cè)谶x中的文件中找到需要調(diào)試的位置，點(diǎn)擊左側(cè)邊欄添加斷點(diǎn)即可進(jìn)行調(diào)試

當(dāng)有程序運(yùn)行到我們的斷點(diǎn)處時(shí)，就可以進(jìn)行調(diào)試了。
在這里，我們可以使用快捷鍵進(jìn)行操作，常用的快捷鍵如下：

F9：添加/移除 斷點(diǎn)

F10：逐過(guò)程，即跳過(guò)該語(yǔ)句中的方法、表達(dá)式等

F11：逐語(yǔ)句調(diào)試，即單步調(diào)試，會(huì)跳入方法、表達(dá)式，進(jìn)行逐語(yǔ)句的跟蹤調(diào)試

在執(zhí)行過(guò)程中，如果我們要執(zhí)行即時(shí)的代碼，我們就需要在右側(cè)的窗格中輸入代碼，按回車(chē)即可。

如果要執(zhí)行多行代碼，點(diǎn)擊運(yùn)行按鈕右側(cè)的雙箭頭，就會(huì)打開(kāi)多行模式。我就不再截圖片了。

這種直接在瀏覽器中調(diào)試的方法同樣適用于Google瀏覽器Chrome和FireFox FireDebug，只不過(guò)在細(xì)枝末葉上面有些不同罷了，主體的功能都是一樣的。

按F12鍵進(jìn)入開(kāi)發(fā)者工具，可以查看源代碼、樣式和js。

點(diǎn)擊Scripts按鈕，可以打開(kāi)這個(gè)調(diào)試窗口，里面包含了網(wǎng)頁(yè)中腳本文件源碼，點(diǎn)擊左側(cè)的按鈕可以打開(kāi)選擇文件的側(cè)窗口。右側(cè)有調(diào)試的工具按鈕，不過(guò)我不喜歡這些純英文的界面，所以大部分的調(diào)試都還是在IE下進(jìn)行。并且會(huì)在IE下轉(zhuǎn)到VS中。

下面我就介紹如何在VS中調(diào)試我們的JS代碼。

使用debugger關(guān)鍵字進(jìn)行調(diào)試
這種方法很簡(jiǎn)單，我們只需要在進(jìn)行調(diào)試的地方加入debugger關(guān)鍵字，然后當(dāng)瀏覽器運(yùn)行到這個(gè)關(guān)鍵字的時(shí)候，就會(huì)提示是否打開(kāi)調(diào)試，我們選擇是就可以了。這種調(diào)試可以選擇調(diào)試工具，是新打開(kāi)vs還是在現(xiàn)有的VS中調(diào)試，都可以選擇，個(gè)人比較喜歡這中調(diào)試方式。

當(dāng)我們運(yùn)行這段程序的時(shí)候，會(huì)彈出調(diào)試提示窗口：

如果你的瀏覽器沒(méi)有彈出這個(gè)窗口，你需要進(jìn)行一下簡(jiǎn)單的設(shè)置，打開(kāi)Internet選項(xiàng)：

將紅色方框中的兩項(xiàng)取消勾選就可以了。

設(shè)置以后就可以使用debugger關(guān)鍵字進(jìn)行調(diào)試了；進(jìn)過(guò)這樣的設(shè)置，我們還可以捕獲到意外的錯(cuò)誤，進(jìn)行跟蹤調(diào)試。