JavaScript指定斷點操做

什麼是斷點操做（Breakpoint action）

作前端開發的小夥伴，或許對這個斷點操做不是很熟悉。不過你要是問其餘語言（好比C，C++ ，C #等）的開發者，他們應該都挺熟悉斷點操做，這種斷點操做在諸如XCode或者Visual Studio的IDE中都會有提供。

如下一段話來自知乎

斷點操做 （Action） 的意義是設置追蹤點 （Tracepoint）。追蹤點至關因而一種臨時的有 Trace 功能的斷點，它會把消息 打印到 Output 窗口。

勾選後面的繼續執行 （Continue Execution），表明 Tracepoint 命中時，Debugger 不會停下來，不然將會在此處停下來。兩種狀況下，消息都會打印出來。

JavaScript說：我須要斷點操做

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

1. 在指定的位置放置debugger語句，或這個在此處打一個斷點，而後使用console或者變量監聽來觀察變量的值。
2. 動態插入console.log代碼。

看起來，第二種方式是更好的一種方式。動態插入代碼固然可使用chrome的live edit功能。當時咱們但願有一個不直接修改代碼的方式。此時你或許會想，那就設置一個斷點操做吧。

JavaScript如何設置斷點操做

前端的童鞋們必定知道，JavaScript的調試大部分都是在瀏覽器裏面操做的，而這個瀏覽器，大部分時候是Chrome。由於Chrome的調試功能強大而方便。（相信你不會反對吧）。
然而讓你們失望的是，chrome根本就沒有設置斷點操做的功能啊，天然其餘瀏覽器也沒有。相信你此時的心情是這樣的：

沒T你說個XX。

看官們不要着急，且聽咱們慢慢道來。在Chrome斷點調試的時候，可使用條件斷點，所謂條件斷點，指定一個條件，在符合這個條件的時候。執行會中止在斷點處，不然執行直接往下執行。以下圖,在Line Number的地方點擊右鍵，選中 Add conditionnal breakpoint

而後，輸入條件，好比params.value == 'value'這樣的條件表達式，以下圖：

有關條件斷點說明，若是你仍然不是很熟悉的話，能夠本身多參考相關資料。
可是，這個斷點操做有什麼關係呢？要知道，JavaScript是一門動態語言。條件判斷實際上是能夠輸入任何代碼片斷的。好比下面的代碼：

if(express)

即使是express不是一個bool值或者bool值的表達式或者返回bool的函數，都是能夠的。這就方便咱們的操做。

JavaScript說道 : 我最機智。

所以在條件斷點的條件輸入框中，咱們能夠輸入咱們想執行的斷點操做便可以，好比console.log。如圖所示

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

因爲console.log返回值是undefined的（最終轉換爲false），因此代碼並不會被中止在此處，而是會直接往下執行，這至關於前面講述斷點操做概念的繼續執行。若是須要中止在這兒，能夠設置以下的表達式便可：

結語

條件斷點的設計並非爲此而設計的。因此這是一種hack，不是標準方式，不是原本的設計方式。可是，不是不少Web開發都會使用hack的嗎。 用起來方便就行。
經過這種方式，至關於能夠不用修改代碼，臨時性的加入咱們想執行的代碼片斷。
不少同窗都喜歡在工程中直接使用console.log，這樣在實際發佈的時候，最終有須要刪除這些console.log代碼，增長了工做量。經過這種方式，或許能夠減小本來產品代碼中的consle.log。
使用這種方式，還能夠動態改變一些變量的值。咱們知道有時候，某些bug只在某些特定的值才能復現，這些值多是服務端推送過來的，此時調試的值，就可能依賴於後端傳遞的值。其實能夠在前端的頁面，經過這種方式，強制改變某些值，使得bug復現，而不依賴於後臺的值。好比：

參考

https://zhuanlan.zhihu.com/p/...
https://www.visualmicro.com/p...

歡迎關注公衆號：