谷歌瀏覽器不僅僅可以用來(lái)上網(wǎng)，對(duì)于開發(fā)人員來(lái)說，它更像是一款強(qiáng)大的開發(fā)輔助工具。

工欲善其事必先利其器，接下來(lái)筆者給大家分享一些Chrome的使用方法。

假如讀者了解如何在Chrome中添加JavaScript斷點(diǎn)，那請(qǐng)繼續(xù)閱讀；否則，自行腦補(bǔ)。

假如有這樣一段代碼：

代碼本身并不重要，重要的是形式。

假如e是我們最終需要的結(jié)果，但是發(fā)現(xiàn)結(jié)果不正確，于是我們?cè)诮oe賦值的這一行下斷點(diǎn)。

下斷點(diǎn)之后，把鼠標(biāo)移動(dòng)到某個(gè)變量上，稍作停留，Chrome便會(huì)提示你該變量此時(shí)的值。

但無(wú)奈于表達(dá)式比較復(fù)雜，僅僅看單個(gè)變量的值，沒什么作用。看起來(lái)都挺正常，計(jì)算完就不對(duì)了。

這時(shí)候，你很可能想知道(a + b c)這一部分的結(jié)果，別著急，先將表達(dá)式選中，然后將鼠標(biāo)移動(dòng)到選中的區(qū)域上，稍作停留。

Chrome直接告訴你答案了。更有意思的還在后邊。

直接在選中的區(qū)域單擊鼠標(biāo)右鍵，會(huì)彈出一個(gè)菜單，最上邊兩項(xiàng)分別為：[Add to watch]、[Evaluate in console]。具體對(duì)應(yīng)的視圖參考圖片。

所謂watch，可以理解為監(jiān)控，有些表達(dá)式比較重要，可能需要在整個(gè)調(diào)試過程中，實(shí)時(shí)監(jiān)控該表達(dá)式的值，這時(shí)就可以用watch。

舉個(gè)例子，我們把斷點(diǎn)設(shè)置在"b = 9;"這一行，然后添加watch:"a - b"，值為1。如圖：

點(diǎn)擊下一步，執(zhí)行"b = 9;"，也就是說b的值發(fā)生了變化，此時(shí)再看看watch:"a - b"的值，為-7。

這樣就達(dá)到了實(shí)時(shí)監(jiān)控的效果，調(diào)試起來(lái)更加方便快捷。

接下來(lái)再看看console是怎么回事。

console當(dāng)然就是控制臺(tái)了，表達(dá)式可以直接在控制臺(tái)中求值。

比如想知道(a + b c)的結(jié)果，直接copy到控制臺(tái)上，回車，結(jié)果就出來(lái)了。

等等，好像哪里不對(duì)的樣子，憑什么控制臺(tái)知道a、b、c的值？

在沒有斷點(diǎn)的情況下，在控制臺(tái)中執(zhí)行JavaScript代碼，是面向全局的。也就是說，此時(shí)在控制臺(tái)中定義一個(gè)變量x，這個(gè)x的作用域是全局的。

如果在程序中斷的情況下使用控制臺(tái)，那么控制臺(tái)的作用域面向中斷處的作用域。也就是說，在哪里設(shè)置的斷點(diǎn)(或者是代碼執(zhí)行到了哪里)，控制臺(tái)的作用域就在哪里。

就本例而言，在全局范圍內(nèi)定義了一個(gè)變量a，值為1；同時(shí)又在function test作用域定義了一個(gè)局部變量a，值為2。在"a = 2;"處下斷點(diǎn)，在控制臺(tái)中輸入a，回車，打印出undefined。

因?yàn)榇藭r(shí)程序在function test內(nèi)部中斷，程序執(zhí)行到了function test中，所以控制臺(tái)的作用域也在function test中，因此輸入a訪問的是局部變量a，而此時(shí)局部變量a并未賦值，所以結(jié)果為undefined。

這次就先分享這么多，以后遇到給力的繼續(xù)分享，希望對(duì)讀者有所幫助。

最新評(píng)論