前言
我們提供的服務(wù)有:做網(wǎng)站、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、績溪ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的績溪網(wǎng)站制作公司
雖然網(wǎng)上已經(jīng)有多的數(shù)不清的調(diào)試教程了,但仍然沒有發(fā)現(xiàn)哪篇文章寫的通俗易懂,索性自己嘗試寫寫自己的一些使用習(xí)慣或者說是心得,希望對那些還不是很懂得使用斷點調(diào)試的孩子有一些幫助
本文將給大家詳細(xì)介紹關(guān)于JavaScript指定斷點操作的相關(guān)內(nèi)容,分享出來供大家參考學(xué)習(xí),下面話不多說了,來一起看看詳細(xì)的介紹吧
什么是斷點操作(Breakpoint action)
做前端開發(fā)的小伙伴,或許對這個斷點操作不是很熟悉。不過你要是問其他語言(比如C,C++ ,C #等)的開發(fā)者,他們應(yīng)該都挺熟悉斷點操作,這種斷點操作在諸如XCode或者Visual Studio的IDE中都會有提供。
以下一段話來自知乎
斷點操作 (Action) 的意義是設(shè)置追蹤點 (Tracepoint)。追蹤點相當(dāng)于是一種臨時的有 Trace 功能的斷點,它會把消息 打印到 Output 窗口。
Breakpoint Action
勾選后面的繼續(xù)執(zhí)行 (Continue Execution),代表 Tracepoint 命中時,Debugger 不會停下來,否則將會在此處停下來。兩種情況下,消息都會打印出來。
JavaScript說:我需要斷點操作
試想一個這樣的場景,我希望程序在運行的時候,可以觀察某一行上某個變量或者表達(dá)式的值。你一定會說,這不是很簡單嘛:
看起來,第二種方式是更好的一種方式。動態(tài)插入代碼當(dāng)然可以使用chrome的live edit功能。當(dāng)時我們希望有一個不直接修改代碼的方式。此時你或許會想,那就設(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'這樣的條件表達(dá)式,如下圖:
斷點條件
有關(guān)條件斷點說明,如果你仍然不是很熟悉的話,可以自己多參考相關(guān)資料。
但是,這個斷點操作有什么關(guān)系呢?要知道,JavaScript是一門動態(tài)語言。條件判斷其實是可以輸入任何代碼片段的。比如下面的代碼:
if(express)
即便是express不是一個bool值或者bool值的表達(dá)式或者返回bool的函數(shù),都是可以的。這就方便我們的操作。
JavaScript說道 : 我最機智。
不要臉的JavaScript
因此在條件斷點的條件輸入框中,我們可以輸入我們想執(zhí)行的斷點操作即可以,比如console.log。如圖所示
斷點操作
最終會在控制臺打印出來你要查看的值,如圖所示:
打印結(jié)果
由于console.log返回值是undefined的(最終轉(zhuǎn)換為false),所以代碼并不會被停止在此處,而是會直接往下執(zhí)行,這相當(dāng)于前面講述斷點操作概念的繼續(xù)執(zhí)行。如果需要停止在這兒,可以設(shè)置如下的表達(dá)式即可:
斷點操作 中斷執(zhí)行
結(jié)語
條件斷點的設(shè)計并不是為此而設(shè)計的。所以這是一種hack,不是標(biāo)準(zhǔn)方式,不是本來的設(shè)計方式。但是,不是很多Web開發(fā)都會使用hack的嗎。 用起來方便就行。
通過這種方式,相當(dāng)于可以不用修改代碼,臨時性的加入我們想執(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é)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對創(chuàng)新互聯(lián)的支持。