JavaScript指定斷點操作實例教程

Breakpoint Action

勾選后面的繼續(xù)執(zhí)行 （Continue Execution），代表 Tracepoint 命中時，Debugger 不會停下來，否則將會在此處停下來。兩種情況下，消息都會打印出來。

JavaScript說：我需要斷點操作

試想一個這樣的場景，我希望程序在運行的時候，可以觀察某一行上某個變量或者表達式的值。你一定會說，這不是很簡單嘛：

看起來，第二種方式是更好的一種方式。動態(tài)插入代碼當然可以使用chrome的live edit功能。當時我們希望有一個不直接修改代碼的方式。此時你或許會想，那就設(shè)置一個斷點操作吧。

JavaScript如何設(shè)置斷點操作

前端的童鞋們一定知道，JavaScript的調(diào)試大部分都是在瀏覽器里面操作的，而這個瀏覽器，大部分時候是Chrome。因為Chrome的調(diào)試功能強大而方便。（相信你不會反對吧）。
然而讓大家失望的是，chrome根本就沒有設(shè)置斷點操作的功能啊，自然其他瀏覽器也沒有。相信你此時的心情是這樣的：

沒T你說個XX。

看官們不要著急，且聽我們慢慢道來。在Chrome斷點調(diào)試的時候，可以使用條件斷點，所謂條件斷點，指定一個條件，在符合這個條件的時候。執(zhí)行會停止在斷點處，否則執(zhí)行直接往下執(zhí)行。如下圖,在Line Number的地方點擊右鍵，選中 Add conditionnal breakpoint

條件斷點

然后，輸入條件，比如params.value == 'value'這樣的條件表達式，如下圖：

斷點條件

有關(guān)條件斷點說明，如果你仍然不是很熟悉的話，可以自己多參考相關(guān)資料。

但是，這個斷點操作有什么關(guān)系呢？要知道，JavaScript是一門動態(tài)語言。條件判斷其實是可以輸入任何代碼片段的。比如下面的代碼：

if(express)

即便是express不是一個bool值或者bool值的表達式或者返回bool的函數(shù)，都是可以的。這就方便我們的操作。

JavaScript說道 : 我最機智。

不要臉的JavaScript

因此在條件斷點的條件輸入框中，我們可以輸入我們想執(zhí)行的斷點操作即可以，比如console.log。如圖所示

斷點操作

最終會在控制臺打印出來你要查看的值，如圖所示：

打印結(jié)果

由于console.log返回值是undefined的（最終轉(zhuǎn)換為false），所以代碼并不會被停止在此處，而是會直接往下執(zhí)行，這相當于前面講述斷點操作概念的繼續(xù)執(zhí)行。如果需要停止在這兒，可以設(shè)置如下的表達式即可：

斷點操作 中斷執(zhí)行

結(jié)語

條件斷點的設(shè)計并不是為此而設(shè)計的。所以這是一種hack，不是標準方式，不是本來的設(shè)計方式。但是，不是很多Web開發(fā)都會使用hack的嗎。 用起來方便就行。

通過這種方式，相當于可以不用修改代碼，臨時性的加入我們想執(zhí)行的代碼片段。

很多同學(xué)都喜歡在工程中直接使用console.log，這樣在實際發(fā)布的時候，最終有需要刪除這些console.log代碼，增加了工作量。通過這種方式，或許可以減少原本產(chǎn)品代碼中的consle.log。

使用這種方式，還可以動態(tài)改變一些變量的值。我們知道有時候，某些bug只在某些特定的值才能復(fù)現(xiàn)，這些值可能是服務(wù)端推送過來的，此時調(diào)試的值，就可能依賴于后端傳遞的值。其實可以在前端的頁面，通過這種方式，強制改變某些值，使得bug復(fù)現(xiàn)，而不依賴于后臺的值。比如：

修改變量

參考

總結(jié)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com