資訊專欄INFORMATION COLUMN
摘要：以下一段話來自知乎斷點(diǎn)操作的意義是設(shè)置追蹤點(diǎn)。此時你或許會想，那就設(shè)置一個斷點(diǎn)操作吧。執(zhí)行會停止在斷點(diǎn)處，否則執(zhí)行直接往下執(zhí)行。但是，這個斷點(diǎn)操作有什么關(guān)系呢要知道，是一門動態(tài)語言。
什么是斷點(diǎn)操作（Breakpoint action）
做前端開發(fā)的小伙伴，或許對這個斷點(diǎn)操作不是很熟悉。不過你要是問其他語言（比如C，C++ ，C #等）的開發(fā)者，他們應(yīng)該都挺熟悉斷點(diǎn)操作，這種斷點(diǎn)操作在諸如XCode或者Visual Studio的IDE中都會有提供。
以下一段話來自知乎
斷點(diǎn)操作 （Action） 的意義是設(shè)置追蹤點(diǎn) （Tracepoint）。追蹤點(diǎn)相當(dāng)于是一種臨時的有 Trace 功能的斷點(diǎn)，它會把消息 打印到 Output 窗口。JavaScript說：我需要斷點(diǎn)操作
勾選后面的繼續(xù)執(zhí)行 （Continue Execution），代表 Tracepoint 命中時，Debugger 不會停下來，否則將會在此處停下來。兩種情況下，消息都會打印出來。
試想一個這樣的場景，我希望程序在運(yùn)行的時候，可以觀察某一行上某個變量或者表達(dá)式的值。你一定會說，這不是很簡單嘛：
在指定的位置放置debugger語句，或這個在此處打一個斷點(diǎn)，然后使用console或者變量監(jiān)聽來觀察變量的值。
動態(tài)插入console.log代碼。
看起來，第二種方式是更好的一種方式。動態(tài)插入代碼當(dāng)然可以使用chrome的live edit功能。當(dāng)時我們希望有一個不直接修改代碼的方式。此時你或許會想，那就設(shè)置一個斷點(diǎn)操作吧。
JavaScript如何設(shè)置斷點(diǎn)操作前端的童鞋們一定知道，JavaScript的調(diào)試大部分都是在瀏覽器里面操作的，而這個瀏覽器，大部分時候是Chrome。因?yàn)镃hrome的調(diào)試功能強(qiáng)大而方便。（相信你不會反對吧）。
然而讓大家失望的是，chrome根本就沒有設(shè)置斷點(diǎn)操作的功能啊，自然其他瀏覽器也沒有。相信你此時的心情是這樣的：
沒T你說個XX。
看官們不要著急，且聽我們慢慢道來。在Chrome斷點(diǎn)調(diào)試的時候，可以使用條件斷點(diǎn)，所謂條件斷點(diǎn)，指定一個條件，在符合這個條件的時候。執(zhí)行會停止在斷點(diǎn)處，否則執(zhí)行直接往下執(zhí)行。如下圖,在Line Number的地方點(diǎn)擊右鍵，選中 Add conditionnal breakpoint
然后，輸入條件，比如params.value == "value"這樣的條件表達(dá)式，如下圖：
有關(guān)條件斷點(diǎn)說明，如果你仍然不是很熟悉的話，可以自己多參考相關(guān)資料。
但是，這個斷點(diǎn)操作有什么關(guān)系呢？要知道，JavaScript是一門動態(tài)語言。條件判斷其實(shí)是可以輸入任何代碼片段的。比如下面的代碼：
if(express)
即便是express不是一個bool值或者bool值的表達(dá)式或者返回bool的函數(shù)，都是可以的。這就方便我們的操作。
JavaScript說道 : 我最機(jī)智。
因此在條件斷點(diǎn)的條件輸入框中，我們可以輸入我們想執(zhí)行的斷點(diǎn)操作即可以，比如console.log。如圖所示
最終會在控制臺打印出來你要查看的值，如圖所示：
由于console.log返回值是undefined的（最終轉(zhuǎn)換為false），所以代碼并不會被停止在此處，而是會直接往下執(zhí)行，這相當(dāng)于前面講述斷點(diǎn)操作概念的繼續(xù)執(zhí)行。如果需要停止在這兒，可以設(shè)置如下的表達(dá)式即可：
條件斷點(diǎn)的設(shè)計(jì)并不是為此而設(shè)計(jì)的。所以這是一種hack，不是標(biāo)準(zhǔn)方式，不是本來的設(shè)計(jì)方式。但是，不是很多Web開發(fā)都會使用hack的嗎。 用起來方便就行。
通過這種方式，相當(dāng)于可以不用修改代碼，臨時性的加入我們想執(zhí)行的代碼片段。
很多同學(xué)都喜歡在工程中直接使用console.log，這樣在實(shí)際發(fā)布的時候，最終有需要刪除這些console.log代碼，增加了工作量。通過這種方式，或許可以減少原本產(chǎn)品代碼中的consle.log。
使用這種方式，還可以動態(tài)改變一些變量的值。我們知道有時候，某些bug只在某些特定的值才能復(fù)現(xiàn)，這些值可能是服務(wù)端推送過來的，此時調(diào)試的值，就可能依賴于后端傳遞的值。其實(shí)可以在前端的頁面，通過這種方式，強(qiáng)制改變某些值，使得bug復(fù)現(xiàn)，而不依賴于后臺的值。比如：
https://zhuanlan.zhihu.com/p/...
https://www.visualmicro.com/p...
歡迎關(guān)注公眾號：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/97842.html
摘要：關(guān)閉開啟所有斷點(diǎn)不會取消。進(jìn)入到一個與正在的問題無關(guān)的函數(shù)后，可以點(diǎn)擊此圖標(biāo)解析函數(shù)剩下的代碼，跳出函數(shù)到下一行。例如現(xiàn)在在處暫停，之后，瀏覽器解析函數(shù)剩下的代碼，然后在處再次暫停。是全局的，在瀏覽器的所有標(biāo)簽頁都能找到和運(yùn)行。 此文章翻譯自 https://developers.google.com...，是對 chrome 下調(diào)試 javascript 的工具和方法介紹。 調(diào)試 j...
摘要：關(guān)閉開啟所有斷點(diǎn)不會取消。進(jìn)入到一個與正在的問題無關(guān)的函數(shù)后，可以點(diǎn)擊此圖標(biāo)解析函數(shù)剩下的代碼，跳出函數(shù)到下一行。例如現(xiàn)在在處暫停，之后，瀏覽器解析函數(shù)剩下的代碼，然后在處再次暫停。是全局的，在瀏覽器的所有標(biāo)簽頁都能找到和運(yùn)行。 此文章翻譯自 https://developers.google.com...，是對 chrome 下調(diào)試 javascript 的工具和方法介紹。 調(diào)試 j...
摘要：在的開發(fā)者工具中，通過斷點(diǎn)調(diào)試，我們能夠非常方便的一步一步的觀察的執(zhí)行過程，直觀感知函數(shù)調(diào)用棧，作用域鏈，變量對象，閉包，等關(guān)鍵信息的變化。其中表示當(dāng)前的局部變量對象，表示當(dāng)前作用域鏈中的閉包。 showImg(https://segmentfault.com/img/remote/1460000008404321); 在前端開發(fā)中，有一個非常重要的技能，叫做斷點(diǎn)調(diào)試。 在chrome...
閱讀 3290·2021-11-11 16:55
閱讀 2659·2021-10-13 09:39
閱讀 2504·2021-09-13 10:27
閱讀 2214·2019-08-30 15:55
閱讀 3143·2019-08-30 15:54
閱讀 3184·2019-08-29 16:34
閱讀 1887·2019-08-29 12:41
閱讀 1123·2019-08-29 11:33
