【譯】你不知道的 Chrome 調試工具技巧第十六天：斷點

本文是做者 Tomek Sułkowski 發佈在 medium 上的一個系列。據做者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原做者全部。
vue

做者在Twitter上推薦咱們的中文翻譯啦,截圖在最後
git

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。
爲了避免影響你們閱讀，受權的記錄在這裏
github

在立刻就要迎來假期的這 24 天裏，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天咱們有一些 tips 客人，今天咱們來看看觸發斷點的一些方法。ajax

某些腳本會修改 DOM 的一部分，不肯定修改的是哪部分？甚至不肯定是何時修改的？添加一個 DOM 斷點。你就能夠監聽到節點被添加或者移除，或屬性被改變。瀏覽器

在頁面從新加載時會記住斷點。當你設置了一個，或者好幾個斷點的時候，你可能忘記它們所附的位置。怎麼找它們呢？爲了達到這個目的，Elements 視圖中有視覺提示，Sources 中也有專用列表。異步

不要擔憂你添加了斷點的元素被隱藏在一些摺疊起來的父級元素中 - 他們會在 Element 中用高亮展現出來。編輯器

這個提示與 DevTools 並不徹底相關，但因爲它是一個對前面提示的擴展，但願你能原諒這些題外話。工具

不管如何，你知道 MutationObserver 嗎？它只是瀏覽器API的一部分，它容許像前面提到的 DOM 斷點同樣監聽 childList , attributes 和 subtree相似的更改post

可是此次是從你的 JavaScript 代碼中。而且獲得了良好的支持，即便是在 IE11 中。開發工具

當你想捕獲已發送的 「ajax」 請求中的特定時刻，可使用 XHR/fetch breakpoint。這些只能在 Source 面板中設置。（我也一樣但願在 Network 面板中能夠設置，但事實並不是如此）

您能夠添加部分 URL 做爲觸發器或監放任何請求：

今天的分享就到這裏~

慣例：若是你從這裏學到了一些新東西

→ 你能夠點個贊再走嘛~
→ 關注我：Twitter：Tomek Sułkowski

其餘此係列的文章，立刻就會翻譯出來，到時會貼出對應的連接在此處。

若是你對個人翻譯表示確定，也能夠關注我一波哦~ 順便個人開源項目，求一波 star→ 看這裏, 美麗的博客系統

【譯】你不知道的 Chrome 調試工具技巧 第十六天：斷點