Chrome 開發者工具的技巧

馬豔瓊發表於2015-11-10
Chrome

最近我用 Chrome 開發者工具的時間比平時多了不少。我發現了幾個不錯的功能，之前忽略了它們（或者至少沒有足夠的深入探究；比如，blackboxing 和非同步堆疊跟蹤）。基於以上原因，我想總結一下這款開發工具中我喜歡的幾個特性。

  • 這個小的放大鏡圖示顯示了是在哪個 CSS 檔案中的哪個 CSS 類/選擇器最終決定了這個特定元素的樣式和 CSS 屬性。比如，可以在任意 DOM 元素中選擇 “inspect” ，然後選擇右邊的 “Computed” 子選單。找到你想要選擇的 CSS 屬性，單擊放大鏡圖示直接顯示出在哪一個 .css 檔案中的 CSS 類/選擇器規定了該屬性（如果你剛開始接觸一個大型的 web 應用，這個特性非常有用）：

  • 想要檢視 web 應用傳送的 XHRs，你可以在 “Settings” 下勾選 “Log XMLHttpRequests” ，然後開啟控制檯頁面就可以檢視了。在我知道這一點之前，我需要設定我的瀏覽器通過類似 Burp 元件的 HTTP 攔截代理，但是如果你只需要一個快速的預覽，現在這種方式就方便多了。當然，如果使用攔截代理，你就有機會在 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” ，就可以把指令碼放入黑匣子中了：

  • 使用快捷鍵 ctrl-p，可以根據檔名快速開啟檔案（和在 atom 中一樣）：

  • 使用快捷鍵 ctrl-shift-p，可以根據函式名快速定位函式（但是僅限在開啟的檔案中）：

  • 使用快捷鍵 ctrl-shift-f 可以搜尋全部檔案：

  • 你可以選擇一個詞然後按 ctrl-d 幾次選擇那個詞，多個遊標同時選中這些詞，你可以一起編輯它們（也像在 atom 中一樣）。在重新命名變數的時候非常有用：

  • 當執行一個本地儲存的網站，應該可以在工具中編輯檔案並將更改直接儲存到磁碟。要做到這一點，切換到源選項卡，右擊 “Sources” 選項卡，然後選擇 “新增資料夾到工作區” ，最後選擇你存放專案的本地資料夾。之後，右擊你網站上的一些檔案的本地副本，並選擇 “對映到網路資源…” ，然後選擇相應的 “網路” 檔案：

一些其他的小技巧：

  • 在控制檯輸入 $0 可以返回你在元素檢視中選中的元素。
  • 你可以使用 $x("//p") 測試 XPath 表示式（如果你寫的 selenium 測試用例或者 CSS 選擇器總是不能正確執行，這個就能派上用場了）。

我還要推薦你安裝兩個 Chrome 擴充套件程式：

  • JSONView 能夠對 JSON 縮排和語法高亮（甚至允許你展開/摺疊塊）。它還能使 JSON 中的 URLs 是單擊的連結，這可以使得用瀏覽器開啟 JSON 格式裡的介面成為可能。比如，在安裝之前和之後（更好的格式化）分別瀏覽 http://omahaproxy.appspot.com/all.json ，還有 https://api.github.com/ （可點選的 URLs 使得瀏覽 API 更加便捷）。
  • JS Error Notifier (non-“spyware” version) 在 Javascript 在控制檯列印錯誤的時候彈出提示。不過，這個外掛的主要版本將私人 “使用資料” 提交給一個第三方服務平臺（詳見 issue #28 的討論）。但無論如何，這個擴充套件外掛已經幫助我注意到幾個問題並修復了它們。

總的來說，我非常喜歡這個開發工具，我能想到的唯一不盡如人意的就是，不能自定義快捷鍵：

相關文章