成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用斷點調(diào)試代碼

Neilyo / 2837人閱讀

摘要：在開發(fā)中，打斷點是經(jīng)常使用的調(diào)試代碼的方法，現(xiàn)在在這里簡略的翻譯一下官方對此功能的講解，并插入一些自己的說明。監(jiān)測事件，在事件發(fā)生后暫停，斷點到事件綁定的位置。

簡單地說，斷點調(diào)試是指自己在程序的某一行設(shè)置一個斷點，調(diào)試時，程序運行到這一行就會停住，然后你可以一步一步往下調(diào)試，調(diào)試過程中可以看各個變量當(dāng)前的值，出錯的話，調(diào)試到出錯的代碼行即顯示錯誤，停下。

在web開發(fā)中，打斷點是經(jīng)常使用的調(diào)試代碼的方法，現(xiàn)在在這里簡略的翻譯一下官方對此功能的講解，并插入一些自己的說明。

文章翻譯自：https://developers.google.com...

何時使用何種類型的斷點：

Line-of-code： 知道在DevTools代碼里要打點的具體區(qū)域；

Conditional line-of-code： 知道在DevTools代碼里要打點的具體區(qū)域且設(shè)置條件，只有為真才執(zhí)行斷點操作；

DOM： 在 body 中添加，檢測節(jié)點或其子節(jié)點的增刪和屬性變化；

XHR： 在 xhr url 包含特定內(nèi)容的時候打點；

Event listener： 在觸發(fā)特定事件的時候打點；

Exception： 在拋出異常的時候打點；

Function： 在特定函數(shù)被調(diào)用的時候打點；

debugger： 在書寫的代碼里希望打點的時候手動打點；

斷點方法 Line-of-code breakpoints

瀏覽器會執(zhí)行解析操作到打點的那行代碼之前（不包含那行代碼）。

操作： f12 -> Sources Tab -> 雙擊打開需要打點的文件 -> 找到需要打點的那行代碼 -> 在行數(shù)上單擊，出現(xiàn)一個藍(lán)色標(biāo)記，打點完成。

在標(biāo)記上再次單擊，會刪除當(dāng)前斷點。

在代碼中輸入 debugger 同樣能在指定位置暫停，除了不是在 DevTools UI 里設(shè)置以外和 line-of-code breakpoints 是相等的。

console.log("a");

console.log("b");

debugger;  //在此暫停

console.log("c");
Conditional line-of-code breakpoints

在你希望有條件地打點的時候使用 conditional line-of-code 方法。

操作： f12 -> Sources Tab -> 雙擊打開需要打點的文件 -> 找到需要打點的那行代碼 -> 右鍵行數(shù)，選擇 Add conditional breakpoint -> 在出現(xiàn)的對話框中輸入條件 -> 點擊 enter，出現(xiàn)橙色標(biāo)志，打點完成。

管理斷點

可以在 BreakPoints 面板上統(tǒng)一管理所有的斷點。

上面的圖片顯示頁面共有兩個斷點，一個在 get-started.js 第15行，一個在第32行。

●  checkbox 選擇啟用禁用斷點

●   在條目上右鍵，可以選擇移除當(dāng)前斷點、停用當(dāng)前斷點、禁用所有斷點、移除所有斷點、移除其他斷點。

      禁用所有斷點相當(dāng)于把所有 checkbox 的勾都去掉；

      停用當(dāng)前斷點會讓瀏覽器忽略掉此斷點，但是斷點位置和圖標(biāo)仍然保留，以便再次激活使用；

      移除斷點會直接去掉此斷點；
DOM change breakpoints

在文檔節(jié)點發(fā)生變化的時候暫停。

操作： f12 -> Elements Tab -> 點擊希望監(jiān)測的節(jié)點 -> 右擊節(jié)點 -> 在出現(xiàn)的菜單上選擇 Break on -> 按需要選擇 Subtree modifications,Attribute modifications, Node removal。

dom 改變斷點類型：

●    subtree modifications ， 在當(dāng)前節(jié)點的子節(jié)點發(fā)生增加、移除、內(nèi)容改變、交換順序的情況的時候生效。其他情況例如當(dāng)前節(jié)點發(fā)生了變化，或者子節(jié)點的屬性發(fā)生了變化都不會觸發(fā)。

●    attributes modifications ， 在當(dāng)前節(jié)點的屬性發(fā)生變化，例如增加屬性、移除屬性、屬性值改變 的時候觸發(fā)。

●    node removal， 在當(dāng)前節(jié)點被移除的時候觸發(fā)。
XHR breakpoints

在你希望監(jiān)聽特定的 xhr 請求的時候，使用 xhr breakpoints 。 指定特定的字符串，當(dāng)有包含此字符串的 xhr url 出現(xiàn)時觸發(fā)，DevTools 會在 xhr.send() 方法被調(diào)用的地方暫停。

xhr breakpoints 對 fetch 請求也有效。

對于一些被封裝好了的 xhr 請求例如 JQuery 的 ajax 方法，瀏覽器無法定位到被調(diào)用的地方。

操作： f12 -> Source Tab -> XHR Breakpoints 面板 -> 點擊 + 號 -> 在出現(xiàn)的對話框里輸入指定的字符串，瀏覽器會在出現(xiàn)包含此字符串的 xhr 請求時暫停（無論字符串在 url 的哪個位置） -> enter ， 完成斷點。

Event listener breakpoints

監(jiān)測事件，在事件發(fā)生后暫停，斷點到事件綁定的位置。支持多帶帶的事件例如 click ， 也支持一整個類別的事件，例如所有的鼠標(biāo)事件。

操作： f12 -> Source Tab -> 展開 Event Listener Breakpoints 面板，會列出所有能監(jiān)聽的事件 -> 全選或展開之后多帶帶選事件，完成斷點。

上圖是在移動設(shè)備的手持裝置方向事件（橫豎屏轉(zhuǎn)換）上打點。

Exception breakpoints

在你希望捕捉到報異常的代碼的時候，使用 exception breakpoints。

操作： f12 -> Source Tab -> 點擊 Pause on exceptions 暫停圖標(biāo) -> 圖標(biāo)變成藍(lán)色，表明啟用了在未捕獲到的異常出現(xiàn)的時候斷點的功能。

可選操作： 勾選 Pause On Caught Exceptions ， 能夠在捕獲到異常的情況下也斷點。

try{

    throw "a exception";

}catch(e){

    console.log(e);

}

上面 try 里面的代碼會遇到異常，但是后面的 catch 代碼能夠捕獲該異常。如果是所有異常都中斷（勾選了 Pause On Caught Exceptions），那么代碼執(zhí)行到會產(chǎn)生異常的 throw 語句時就會自動中斷；而如果是僅遇到未捕獲異常才中斷，那么這里就不會中斷。一般我們會更關(guān)心遇到未捕獲異常的情況。

Function breakpoints

在你希望 debug 一個具體的函數(shù)時使用。功能與在此函數(shù)的第一行代碼出打斷點是一樣的。

操作： 在代碼里插入 debug(functionName) 或者在瀏覽器控制臺調(diào)用。

代碼里插入：

function sum(a,b){

    let result = a+b;  // 瀏覽器在這里暫停

    return result;

};

debug  (sum);  // 參數(shù)是一個函數(shù)，不是字符串

sum();

控制臺調(diào)用：

控制臺輸入debug(sum)，點擊 enter，再觸發(fā)一次 sum 操作，就進(jìn)入斷點頁面。

要注意確保目標(biāo)函數(shù)與 debug 函數(shù)在同一個作用域里面，否則會報 ReferenceError：

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90291.html

相關(guān)文章

  • 使用Visual Studio Code對Node.js進(jìn)行斷點調(diào)試

    摘要：在開發(fā)的過程中，幾乎不可能一次性就能寫出毫無破綻的程序，斷點調(diào)試代碼是一個普遍的需求。作為前端開發(fā)工程師，以往我們開發(fā)的程序都運行在瀏覽器端，利用提供的開發(fā)者工具就可以方便的進(jìn)行源碼斷點調(diào)試。這幾個都是常見的斷點調(diào)試指令。 在開發(fā)的過程中，幾乎不可能一次性就能寫出毫無破綻的程序，斷點調(diào)試代碼是一個普遍的需求。 作為前端開發(fā)工程師，以往我們開發(fā)的JavaScript程序都運行在瀏覽器端，...

    gityuan 評論0 收藏0

  • 使用Pdb調(diào)試Python

    摘要：簡單介紹自帶庫，使用調(diào)試程序還是很方便的。比如下圖就是展示斷點進(jìn)入到內(nèi)部之后，打印的參數(shù)，打印某個變量退出調(diào)試，直接退出調(diào)試或者使用的方式退出最后說一句上面展示的使用調(diào)試的過程其實是很簡單的，文章中主要通過截圖展示運行的效果。 簡單介紹 Python自帶 Pdb庫，使用 Pdb調(diào)試 Python程序還是很方便的。但是遠(yuǎn)程調(diào)試、多線程，Pdb是搞不定的 本文參考的相關(guān)文章如下： 《指針...

    codeGoogle 評論0 收藏0

  • 使用斷點調(diào)試代碼

    摘要：在開發(fā)中，打斷點是經(jīng)常使用的調(diào)試代碼的方法，現(xiàn)在在這里簡略的翻譯一下官方對此功能的講解，并插入一些自己的說明。監(jiān)測事件，在事件發(fā)生后暫停，斷點到事件綁定的位置。 簡單地說，斷點調(diào)試是指自己在程序的某一行設(shè)置一個斷點，調(diào)試時，程序運行到這一行就會停住，然后你可以一步一步往下調(diào)試，調(diào)試過程中可以看各個變量當(dāng)前的值，出錯的話，調(diào)試到出錯的代碼行即顯示錯誤，停下。 在web開發(fā)中，打斷點是經(jīng)常...

    B0B0 評論0 收藏0

  • 五種前端開發(fā)必備的調(diào)試技術(shù)

    摘要：在前端開發(fā)中，調(diào)試技術(shù)是必不可少的技能，本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)。移動調(diào)試斷點斷點方法遠(yuǎn)程映射本地調(diào)試在移動上面開發(fā)調(diào)試是很復(fù)雜的，所以就有了。 在前端開發(fā)中，調(diào)試技術(shù)是必不可少的技能，本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)。 Weinre移動調(diào)試 DOM 斷點 debugger斷點 native方法hook 遠(yuǎn)程映射本地調(diào)試 Weinre 在移動上面開...

    張紅新 評論0 收藏0

發(fā)表評論

0條評論

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