最近我用 Chrome 開發(fā)者工具的時間比平時多了不少。我發(fā)現(xiàn)了幾個不錯的功能，之前忽略了它們（或者至少沒有足夠的深入探究；比如，blackboxing 和異步堆棧跟蹤）?；谝陨显?，我想總結(jié)一下這款開發(fā)工具中我喜歡的幾個特性。

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

• 想要查看 web 應(yīng)用發(fā)送的 XHRs，你可以在 “Settings” 下勾選 “Log XMLHttpRequests” ，然后打開控制臺頁面就可以查看了。在我知道這一點之前，我需要設(shè)置我的瀏覽器通過類似 Burp 組件的 HTTP 攔截代理，但是如果你只需要一個快速的預(yù)覽，現(xiàn)在這種方式就方便多了。當然，如果使用攔截代理，你就有機會在 XHRs 發(fā)送到服務(wù)器之前去修改它，這對于安全測試是非常有用的。一個輕量級的替換方案是去查看 “Sources :: XHR Breakpoints” ，并且選中激活 “Any XHR” 為斷點。

• 現(xiàn)在，假設(shè)你的 web 應(yīng)用正在定時請求 XHR （比如，保持當前視圖是最新的），你想知道這個定時器是在哪兒設(shè)置的（即在哪里調(diào)用了 settimeout() 或 setinterval() ）。你可以切換到 “Sources” 標簽頁，并選中 “Async” 復(fù)選框，就能夠看到結(jié)果了。這將使所有的堆棧路徑不斷深入 settimeout() 和同層方法，甚至多層深度的調(diào)用。同樣的，requestAnimationFrame() 和 addEventListener() 等方法也有類似的選項。你可以在這里找到那個復(fù)選框：

• 如果你想單擊了某個按鈕或者鏈接后快速定位正在運行的代碼，可以在單擊這個按鈕之前選中 “Event listener breakpoint” 下的 Mouse（鼠標）下的 Click （單擊）事件（當你開始接觸一個大型 web 應(yīng)用時的另一個殺手锏）：

• 當你使用 “Event listener breakpoint :: Mouse :: Click” 功能時，可能一開始會跳轉(zhuǎn)到想 jQuery 這樣的第三方庫代碼中，所以你不得不在調(diào)試器中跳過幾步，才能找到 “真正” 的處理事件的代碼。為了避免這個問題，可以把第三方的腳本放到 “黑匣子” 里面去。調(diào)試器不會在運行黑匣子里的代碼時停下來，它會運行下去直到遇到不在黑匣子里的代碼才中斷。右擊第三方庫的文件名，在彈出菜單中選中 “Blackbox Script” ，就可以把腳本放入黑匣子中了：

• 使用快捷鍵 ctrl-p，可以根據(jù)文件名快速打開文件（和在 atom 中一樣）：

• 使用快捷鍵 ctrl-shift-p，可以根據(jù)函數(shù)名快速定位函數(shù)（但是僅限在打開的文件中）：

• 使用快捷鍵 ctrl-shift-f 可以搜索全部文件：

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

• 當運行一個本地儲存的網(wǎng)站，應(yīng)該可以在工具中編輯文件并將更改直接保存到磁盤。要做到這一點，切換到源選項卡，右擊 “Sources” 選項卡，然后選擇 “添加文件夾到工作區(qū)” ，最后選擇你存放項目的本地文件夾。之后，右擊你網(wǎng)站上的一些文件的本地副本，并選擇 “映射到網(wǎng)絡(luò)資源…” ，然后選擇相應(yīng)的 “網(wǎng)絡(luò)” 文件：

一些其他的小技巧：

• 在控制臺輸入 $0 可以返回你在元素視圖中選中的元素。

• 你可以使用 $x('//p') 測試 XPath 表達式（如果你寫的 selenium 測試用例或者 CSS 選擇器總是不能正確執(zhí)行，這個就能派上用場了）。

我還要推薦你安裝兩個 Chrome 擴展程序：

• JSONView 能夠?qū)?JSON 縮進和語法高亮（甚至允許你展開/折疊塊）。它還能使 JSON 中的 URLs 是單擊的鏈接，這可以使得用瀏覽器打開 JSON 格式里的接口成為可能。比如，在安裝之前和之后（更好的格式化）分別瀏覽 http://omahaproxy./all.json ，還有 https://api.github.com/ （可點擊的 URLs 使得瀏覽 API 更加便捷）。

• JS Error Notifier (non-”spyware” version) 在 Javascript 在控制臺打印錯誤的時候彈出提示。不過，這個插件的主要版本將私人 “使用數(shù)據(jù)” 提交給一個第三方服務(wù)平臺（詳見 issue #28 的討論）。但無論如何，這個擴展插件已經(jīng)幫助我注意到幾個問題并修復(fù)了它們。

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

• Allow to customize keyboard shortcuts/key bindings（https://code.google.com/p/chromium/issues/detail?id=174309）