快捷導(dǎo)航

JavaScript指定斷點(diǎn)操作實(shí)例教程

更新時(shí)間：2018年09月18日 10:56:56 作者：ITman彪叔

這篇文章主要給大家介紹了關(guān)于JavaScript指定斷點(diǎn)操作的相關(guān)資料，文中通過圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

雖然網(wǎng)上已經(jīng)有多的數(shù)不清的調(diào)試教程了，但仍然沒有發(fā)現(xiàn)哪篇文章寫的通俗易懂，索性自己嘗試寫寫自己的一些使用習(xí)慣或者說是心得，希望對(duì)那些還不是很懂得使用斷點(diǎn)調(diào)試的孩子有一些幫助

本文將給大家詳細(xì)介紹關(guān)于JavaScript指定斷點(diǎn)操作的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧

什么是斷點(diǎn)操作（Breakpoint action）

做前端開發(fā)的小伙伴，或許對(duì)這個(gè)斷點(diǎn)操作不是很熟悉。不過你要是問其他語言（比如C，C++ ，C #等）的開發(fā)者，他們應(yīng)該都挺熟悉斷點(diǎn)操作，這種斷點(diǎn)操作在諸如XCode或者Visual Studio的IDE中都會(huì)有提供。

以下一段話來自知乎

斷點(diǎn)操作（Action）的意義是設(shè)置追蹤點(diǎn) （Tracepoint）。追蹤點(diǎn)相當(dāng)于是一種臨時(shí)的有 Trace 功能的斷點(diǎn)，它會(huì)把消息打印到 Output 窗口。

Breakpoint Action

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

JavaScript說：我需要斷點(diǎn)操作

試想一個(gè)這樣的場(chǎng)景，我希望程序在運(yùn)行的時(shí)候，可以觀察某一行上某個(gè)變量或者表達(dá)式的值。你一定會(huì)說，這不是很簡單嘛：

在指定的位置放置debugger語句，或這個(gè)在此處打一個(gè)斷點(diǎn)，然后使用console或者變量監(jiān)聽來觀察變量的值。
動(dòng)態(tài)插入console.log代碼。

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

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

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

沒T你說個(gè)XX。

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

條件斷點(diǎn)

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

斷點(diǎn)條件

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

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

if(express)

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

JavaScript說道 : 我最機(jī)智。

不要臉的JavaScript

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

斷點(diǎn)操作

最終會(huì)在控制臺(tái)打印出來你要查看的值，如圖所示：

打印結(jié)果

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

斷點(diǎn)操作中斷執(zhí)行

結(jié)語

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

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

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

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