Chrome開發者工具的實用技巧(譯)

jopen 8年前發布 | 11K 次閱讀 Chrome 前端技術

最近我比平時多花了點時間在chrome開發者工具上。過程中我發現了一些我以前沒有遇到過的好的特性(至少我沒有主動去研究的；像：blackboxing和asynchronous stacktraces)。因此，我想總結下我認為非常不錯的特性給大家。

  • 這個小的放大鏡圖標指向這個元素的CSS的屬性最終是在哪個CSS文件里定義。舉例子來說，選擇“檢查”在頁面上的任意DOM元素，并切換到 “Computed”的子標簽。找到你關心的CSS屬性并點擊放大鏡圖標，就會直接進入對應的css文件(當你的項目是個很大的web應用時，這個功能是 非常有用的).

  • 如果想看到XHRs的請求信息，可以選中“Log XMLHttpRequests”的復選框，在“Setting”頻道下的Console部分。在知道這個功能之前，我得設置瀏覽器代理像Burp來完成 這樣的功能。當然，使用代理你可以有機會來修改XHRs在真正到達服務器之前，這是一個很好的方式來完成安全測試。類似的更簡便的方式是使用 “Sources::XHR Breakpoints”并啟用“Any XHR”斷點。

  • 現在，假設你工作的web應用正在有規律的發送XHR請求(舉例子，保持當前頁面為最新)并想知道這個定時器在哪里（即什么地方調用 setTimeout()或setInterval())。弄明白這些，你需要切換到“Sources”標簽，并選中“Async”復選框。這會讓你所有 的堆棧繼續執行當遇到setTimeout()的時候，甚至是多層次的嵌套。對于像requestAnimationFrame()和 addEventListener()等同樣使用。你可以找到設置的地方如下：

  • 想快速的找到你點擊某個特定的按鈕或者鏈接的運行代碼，只需要在你點擊按鈕前啟用“Event listener breakpoint” Mouse::Click(另外一個在大型web應用時會用到的殺手級的特性)：

  • 當你使用“Event listener breakpoint :: Mouse :: Click”的時候，你很可能會進入到第三方的代碼庫像jQuery,這時候你就需要花費一些調試的時間來到達真正的事件處理函數。最好的方法是標記 “Blackbox Script”避免進入到第三方的腳本。調試時就再不會進入第三方的腳本庫了，代碼會一直運行到沒有標記blackboxed的文件為止。你可以 blackbox腳本通過右擊調用棧里的第三方庫的文件，并從上下文菜單中選擇“Blackbox Script”即可：

  • 你可以跳轉到特定的文件，通過文件名，使用“ctrl-p”（像atom中一樣）
  • 你可以跳轉到一個方法，通過方法名(只在當前打開的文件中)，使用“ctrl-shift-p”:
  • 你可以全文搜索通過”ctrl-shift-f”:
  • 你可以使用多個選擇提示來編輯，選中一些字符并按下“ctrl-d”,會根據你按下的次數來選中相應的字符(就像atom那樣).對于像重命名變量非常有用。
  • 網站的代碼可以本地存儲，并在開發模式編輯然后可以直接存儲到本地磁盤。實現這個功能，切換到源碼標簽，右鍵點擊“Add Folder to Workspace”，并最后選擇你工程項目的存儲位置即可。此外，右鍵點擊本地映射文件，選擇“Map to Network Resource…”就會加載相應的“網絡”文件了

其它小貼士：

  • $0 在console的時候，代表你在頁面選中的元素。
  • 你可以執行XPath表達式通過$x(“//p”) 這種方式(當你使用selenium 測試用例和CSS選擇器時并不總有效的時候會非常有用)

我再推薦兩個chrome擴展插件：

總之，我很喜愛開發者者工具，唯一令我不爽的是我不能自定義鍵盤快捷鍵：

英文原文

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！