資訊專欄INFORMATION COLUMN
摘要：當(dāng)我們?cè)谡{(diào)試的時(shí)候，右側(cè)里面會(huì)顯示當(dāng)前作用域以及他的父級(jí)作用域，以及閉包。最后介紹一下一個(gè)神器，很好用的如果你自己寫的代碼，你執(zhí)行的時(shí)候想讓它在某一處停下來，只要寫上的就好了，不信你試試哈哈
轉(zhuǎn)自 http://www.cnblogs.com/ctriphire/p/4117370.html
下面簡單介紹一下如何利用好chrome控制臺(tái)這個(gè)神器好好調(diào)試javascript代碼
先說一下源碼定位
大家打開測試網(wǎng)頁? ?看到頁面右下方有一個(gè)推薦的圖標(biāo)嗎？右擊推薦圖標(biāo)，選擇審查元素，打開谷歌控制臺(tái)，如下圖所示
我們現(xiàn)在想知道votePost方法到底在哪？跟著我這樣做，在Console面板里面輸入votePost然后回車
直接點(diǎn)擊上圖標(biāo)紅的鏈接，控制臺(tái)將定位到Sources面板中，展示如下圖所示
大家看了上面這個(gè)圖片之后估計(jì)頭都要暈了吧，這么多js都整在一行，讓人怎么看呀，不用擔(dān)心，按下圖操作即可（也就是點(diǎn)擊中間面板左下方的Pretty print就行了）
這時(shí)我們?cè)倩氐紺onsole面板時(shí)會(huì)驚奇的發(fā)現(xiàn)原來的鏈接后面的1現(xiàn)在變成91了（其實(shí)這里的數(shù)字1或者91就是代表votePost方法在源碼中的行號(hào) ）現(xiàn)在看出Pretty print按鈕的強(qiáng)大之處了吧
知道了怎么樣查看某一個(gè)按鈕的源碼，那接下來的工作便是調(diào)試了，調(diào)試第一步需要做的便是設(shè)置斷點(diǎn)，其實(shí)設(shè)置斷點(diǎn)很簡單，點(diǎn)擊一下上圖所示的92即可，這時(shí)你會(huì)發(fā)現(xiàn)92行號(hào)旁邊會(huì)多了一個(gè)圖標(biāo)，這里解釋一下為什么不在91處設(shè)置斷點(diǎn)，你可以試下，事實(shí)上根本就沒法在91處上設(shè)置斷點(diǎn)，因?yàn)樗呛瘮?shù)的定義處，所以沒法在此設(shè)置斷點(diǎn)。
設(shè)置好了斷點(diǎn)后，你就會(huì)在右邊Breakpoints方框里看到剛剛設(shè)置的斷點(diǎn)。
我們先來介紹一下用到的調(diào)試快捷鍵吧（事實(shí)上我們也可以不用下表所示的快捷鍵，直接點(diǎn)擊上圖所示右側(cè)欄最上層的一排按鈕來進(jìn)行調(diào)試，具體用哪個(gè)按鈕，把鼠標(biāo)放到按鈕上方一會(huì)就會(huì)顯示它相應(yīng)的提示）
| 快捷鍵 | 功能 |
|---|---|
| F8 | 恢復(fù)運(yùn)行 |
| F10 | 步過，遇到自定義函數(shù)也當(dāng)成一個(gè)語句執(zhí)行，而不會(huì)進(jìn)入函數(shù)內(nèi)部 |
| F11 | 步入，遇到自定義函數(shù)就跟入到函數(shù)內(nèi)部 |
| Shift + F11 | 步出，跳出當(dāng)前自定義函數(shù) |
其中值得一提的是，當(dāng)我們點(diǎn)擊“推薦”按鈕進(jìn)行調(diào)試的時(shí)候會(huì)發(fā)現(xiàn)，不管我們是按的F10進(jìn)行調(diào)試還是按F11進(jìn)行逐步調(diào)試，都沒法進(jìn)行$.ajax函數(shù)內(nèi)部，即使我們?cè)诤瘮?shù)內(nèi)部設(shè)置了斷點(diǎn)也沒有辦法進(jìn)入，這里按F8才是真正起效果的，不信你試試。
當(dāng)我們?cè)谡{(diào)試的時(shí)候，右側(cè)Scope Variables里面會(huì)顯示當(dāng)前作用域以及他的父級(jí)作用域，以及閉包。你不僅能在右側(cè) Scope Variables(變量作用域) 一欄處看到當(dāng)前變量，而且還能把鼠標(biāo)直接移到任意變量上，就可以查看該變量的值。
用圖說話（哈哈）
剛剛我們介紹的只是在html里面能夠看得到它綁定了onclick事件，這樣我們就找到它綁定的js函數(shù)，如果它是在jQuery頁面加載完成函數(shù)里面綁定的，這時(shí)候我們?cè)趺粗浪壎ǖ氖悄膫€(gè)js函數(shù)呢，如果我們不知道綁定的js函數(shù)就更加不用說調(diào)試進(jìn)去了
下面介紹一下如何查看，還是以剛剛那個(gè)測試網(wǎng)頁為例子吧，但是這次我們來看“提交評(píng)論”作說明吧，
右擊“提交評(píng)論”-->審核元素，我們可以清楚的看到在這個(gè)按鈕上未綁定任何事件。在Console面板內(nèi)輸入如下代碼
function lookEvents (elem) {
return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 獲取綁定的事件
如下圖所示：
按照上述介紹的方法定位到具體的blog-common.js里面，找到postComment ?然后一層層的找到具體的代碼，再設(shè)置斷點(diǎn)就好了。
最后介紹一下一個(gè)神器，很好用的debugger
如果你自己寫的代碼，你執(zhí)行的時(shí)候想讓它在某一處停下來，只要寫上的debugger就好了，不信你試試！哈哈
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/92320.html
摘要：在控制臺(tái)中使用，當(dāng)?shù)竭_(dá)傳入的函數(shù)時(shí)，代碼將停止。但除了私有和匿名函數(shù)這可能是找到調(diào)試函數(shù)的最快方法。在控制臺(tái)中輸入，當(dāng)調(diào)用時(shí)，將以調(diào)試模式停止屏蔽不相關(guān)代碼現(xiàn)在，我們經(jīng)常在應(yīng)用中引入幾個(gè)庫或框架。 譯者：SlaneYang原文：https://raygun.com/javascript-debugging-tips 以更快的速度和更高的效率來調(diào)試JavaScript 熟悉工具可以讓工具...
摘要：下面推薦幾款插件，有些是博主親自試用過的，希望對(duì)大家的開發(fā)調(diào)試有幫助。這有點(diǎn)類似前面說過的插件。類似的針對(duì)不同框架的調(diào)試工具還有最后介紹的不是的插件，而是主題。總結(jié)好的，這次的插件就推薦了這幾個(gè)。 Web前端開發(fā)過程中必然會(huì)用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔壁的產(chǎn)品小哥都知道打開F12改一下頁面元素的...
摘要：所有全局對(duì)象函數(shù)以及變量均自動(dòng)成為對(duì)象的成員。消息彈出窗口對(duì)象使用簡單方便，但因其交互方式生硬，通常只用于調(diào)試。可以在中創(chuàng)建三種消息框警告框確認(rèn)框提示框。習(xí)慣上，通過選擇符得到的集合一般命名為以起始的字符串，例如。 avascript 等于 ECMAScript + 宿主環(huán)境。宿主環(huán)境提供了一系列的全局對(duì)象，例如Node.js提供的require, console等；瀏覽器提供的DOM...
閱讀 1122·2021-11-16 11:42
閱讀 2903·2021-10-12 10:18
閱讀 2859·2021-09-24 09:48
閱讀 3464·2019-08-30 15:56
閱讀 1525·2019-08-30 14:17
閱讀 3046·2019-08-29 12:14
閱讀 909·2019-08-27 10:51
閱讀 2027·2019-08-26 13:28
