国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript指定斷點操作

keke / 3384人閱讀

摘要:以下一段話來自知乎斷點操作的意義是設置追蹤點。此時你或許會想,那就設置一個斷點操作吧。執行會停止在斷點處,否則執行直接往下執行。但是,這個斷點操作有什么關系呢要知道,是一門動態語言。

什么是斷點操作(Breakpoint action)

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

以下一段話來自知乎

斷點操作 (Action) 的意義是設置追蹤點 (Tracepoint)。追蹤點相當于是一種臨時的有 Trace 功能的斷點,它會把消息 打印到 Output 窗口。

勾選后面的繼續執行 (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說道 : 我最機智。

因此在條件斷點的條件輸入框中,我們可以輸入我們想執行的斷點操作即可以,比如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...

歡迎關注公眾號:

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97842.html

相關文章

  • Chrome 瀏覽器 Javascript 調試參考

    摘要:關閉開啟所有斷點不會取消。進入到一個與正在的問題無關的函數后,可以點擊此圖標解析函數剩下的代碼,跳出函數到下一行。例如現在在處暫停,之后,瀏覽器解析函數剩下的代碼,然后在處再次暫停。是全局的,在瀏覽器的所有標簽頁都能找到和運行。 此文章翻譯自 https://developers.google.com...,是對 chrome 下調試 javascript 的工具和方法介紹。 調試 j...

    pepperwang 評論0 收藏0
  • Chrome 瀏覽器 Javascript 調試參考

    摘要:關閉開啟所有斷點不會取消。進入到一個與正在的問題無關的函數后,可以點擊此圖標解析函數剩下的代碼,跳出函數到下一行。例如現在在處暫停,之后,瀏覽器解析函數剩下的代碼,然后在處再次暫停。是全局的,在瀏覽器的所有標簽頁都能找到和運行。 此文章翻譯自 https://developers.google.com...,是對 chrome 下調試 javascript 的工具和方法介紹。 調試 j...

    joywek 評論0 收藏0
  • 前端基礎進階(六):在chrome開發者工具中觀察函數調用棧、作用域鏈與閉包

    摘要:在的開發者工具中,通過斷點調試,我們能夠非常方便的一步一步的觀察的執行過程,直觀感知函數調用棧,作用域鏈,變量對象,閉包,等關鍵信息的變化。其中表示當前的局部變量對象,表示當前作用域鏈中的閉包。 showImg(https://segmentfault.com/img/remote/1460000008404321); 在前端開發中,有一個非常重要的技能,叫做斷點調試。 在chrome...

    draveness 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<