題外話，剛開始我寫這篇內(nèi)容只是將自己了解的一些知識(shí)放上來,，不巧的是我分析了我的來訪日志,，很多朋友都有這個(gè)需求，為了大家沒有白來,，我決定充實(shí)下這篇文章,。2013-11-02 2

我是一名忠實(shí)Chrome迷，使用它已經(jīng)快有2年的歷史了,，整體給我的感覺就是清爽,，快速，簡(jiǎn)潔,。又打小廣告了……^_^,，雖然我知道IE8+也有調(diào)試工具，包括火狐的什么XXBUG,，但是我用過之后,，個(gè)人還是十分偏愛chrome的debug。

chrome對(duì)于在前端打拼的兄弟姐妹是十分有幫助的,，它優(yōu)雅的實(shí)時(shí)展示DOM,，捕獲N個(gè)ajax傳遞過來的參數(shù)

查看動(dòng)態(tài)DOM

獲取ajax請(qǐng)求數(shù)據(jù)預(yù)覽

包括chrome中N多插件……

當(dāng)然我在這里列舉一個(gè)十分有用的javascript調(diào)試的技巧

首先請(qǐng)打開“谷歌瀏覽器”（廢話），然后打開一個(gè)網(wǎng)頁(yè),，按“F12”會(huì)出現(xiàn)一個(gè)控制臺(tái),，找到一個(gè)叫做“Sources”,點(diǎn)擊它

OK，如果你的頁(yè)面現(xiàn)在已經(jīng)加載過JS腳本的話,，那么應(yīng)該可以看到一些JS文件了

然后你可以在左側(cè)側(cè)欄的序號(hào)那些位置點(diǎn)擊一下就設(shè)置成斷點(diǎn),，當(dāng)你要執(zhí)行某個(gè)函數(shù)的時(shí)候?yàn)g覽器就會(huì)自動(dòng)進(jìn)入調(diào)試模式了

細(xì)心的你肯定會(huì)發(fā)現(xiàn)Scope Variables區(qū)域顯示的竟然就是Object對(duì)象的元素，大驚,。起初我們要想展示一個(gè)對(duì)象要么采用

你會(huì)發(fā)現(xiàn)頁(yè)面很麻煩,，而且也不是很靈活,，現(xiàn)在學(xué)會(huì)chrome的debug工具我相信會(huì)給你帶來莫大的幫助了。

==2013-11-02更新==

當(dāng)我們?cè)诖蜷_chrome的時(shí)候,，你就已經(jīng)被google至簡(jiǎn)給深深吸引,，到現(xiàn)在chrome的版本已經(jīng)到了 30.0.1599.101 m，google的東西確實(shí)很贊,。

好滴,，我補(bǔ)充一些我后來慢慢用到的內(nèi)容給大家，算是我自己的工作筆記吧,。

一般我們打開的大部分的網(wǎng)站有些js文件是已經(jīng)被yui\uglifyjs等js壓縮工具壓縮過的代碼,，讓你看格式來進(jìn)行調(diào)試十分不容易（根本就不可能）。chrome中也提供了一個(gè)格式化代碼的功能,。

點(diǎn)擊圖上圈紅（pretty print）的按鈕立即將當(dāng)前文件進(jìn)行標(biāo)準(zhǔn)格式了,。我啰嗦一句，這個(gè)格式化代碼目前我只知道能格式化dom和js,，css文件沒有格式化效果當(dāng)然也就不支持了,。

關(guān)于js調(diào)試的幾個(gè)控制簡(jiǎn)介

js控制面板就是在頂部的側(cè)面板，這幾個(gè)工具條可以讓你按步執(zhí)行代碼,。

繼續(xù)：繼續(xù)執(zhí)行代碼,，直到我們遇到另一個(gè)斷點(diǎn)。

步驟：忽略方法體內(nèi)部,，也就是不進(jìn)入到方法體內(nèi)部細(xì)節(jié)再執(zhí)行,，只調(diào)用取返回值繼續(xù)在當(dāng)前執(zhí)行下步。

進(jìn)入細(xì)節(jié)：細(xì)節(jié)逐語句執(zhí)行,，進(jìn)入方法體再執(zhí)行,。

退出細(xì)節(jié)：細(xì)節(jié)語句返回主函數(shù)體。

斷點(diǎn)開關(guān)：決定該斷點(diǎn)是否開啟/關(guān)閉,。

上面這些內(nèi)容只是一些粗略的手記,，如果你需要更加深入的了解chrome的DevTools不妨來這里，這里絕對(duì)是一手資料而且十分詳細(xì)和權(quán)威,，如果你有幸被墻,，那么恭喜你，你要學(xué)會(huì)怎么搭建梯子,，這個(gè)問題你可以google或者度百,。