什麼是斷點操作（Breakpoint action） 做前端開發的小伙伴，或許對這個斷點操作不是很熟悉。不過你要是問其他語言（比如C，C++ ，C #等）的開發者，他們應該都挺熟悉斷點操作，這種斷點操作在諸如XCode或者Visual Studio的IDE中都會有提供。 以下一段話來自知乎 斷點操作 ...
什麼是斷點操作（Breakpoint action）
做前端開發的小伙伴，或許對這個斷點操作不是很熟悉。不過你要是問其他語言（比如C，C++ ，C #等）的開發者，他們應該都挺熟悉斷點操作，這種斷點操作在諸如XCode或者Visual Studio的IDE中都會有提供。
以下一段話來自知乎
斷點操作 （Action） 的意義是設置追蹤點 （Tracepoint）。追蹤點相當於是一種臨時的有 Trace 功能的斷點，它會把消息 列印到 Output 視窗。
Breakpoint Action
勾選後面的繼續執行 （Continue Execution），代表 Tracepoint 命中時，Debugger 不會停下來，否則將會在此處停下來。兩種情況下，消息都會列印出來。
JavaScript說：我需要斷點操作
試想一個這樣的場景，我希望程式在運行的時候，可以觀察某一行上某個變數或者表達式的值。你一定會說，這不是很簡單嘛：
- 在指定的位置放置debugger語句，或這個在此處打一個斷點，然後使用console或者變數監聽來觀察變數的值。
- 動態插入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說道 : 我最機智。
不要臉的JavaScript
因此在條件斷點的條件輸入框中，我們可以輸入我們想執行的斷點操作即可以，比如console.log。如圖所示
斷點操作
最終會在控制台列印出來你要查看的值，如圖所示：
列印結果
由於console.log返回值是undefined的（最終轉換為false），所以代碼並不會被停止在此處，而是會直接往下執行，這相當於前面講述斷點操作概念的繼續執行。如果需要停止在這兒，可以設置如下的表達式即可：
斷點操作 中斷執行
結語
條件斷點的設計並不是為此而設計的。所以這是一種hack，不是標準方式，不是本來的設計方式。但是，不是很多Web開發都會使用hack的嗎。 用起來方便就行。
通過這種方式，相當於可以不用修改代碼，臨時性的加入我們想執行的代碼片段。
很多同學都喜歡在工程中直接使用console.log，這樣在實際發佈的時候，最終有需要刪除這些console.log代碼，增加了工作量。通過這種方式，或許可以減少原本產品代碼中的consle.log。
使用這種方式，還可以動態改變一些變數的值。我們知道有時候，某些bug只在某些特定的值才能復現，這些值可能是服務端推送過來的，此時調試的值，就可能依賴於後端傳遞的值。其實可以在前端的頁面，通過這種方式，強制改變某些值，使得bug復現，而不依賴於後臺的值。比如：
修改變數
參考
https://zhuanlan.zhihu.com/p/28642422
https://www.visualmicro.com/page/User-Guide.aspx?doc=Working-With-Breakpoints-When-Hit.html
歡迎關註公眾號：
ITman彪叔公眾號
