Chrome 開發人員工具的發展速度飛快,因此我們想特別留意 這是我們針對部分元件推出的幾項新功能和改善項目。這邊會談到一些 UI 變更 高解析度 JS 分析和新的 Workspace 功能
- 高解析度剖析功能現在的精確度可達 0 .1 毫秒
- 工具列上升至開發人員工具頂端,且「覆寫」已移至控制台導覽匣
- 工作區新增了多項功能,以支援新增/移除/搜尋檔案
高解析度分析
CPU 剖析 是一項非常實用的功能,方便您瞭解 JavaScript 的執行效率。除了傳統的設定檔檢視方式外,我們還在今年夏天推出了火焰圖表,以視覺化方式呈現網頁的 JavaScript 長期處理作業。 可用來輕鬆查看呼叫堆疊的深度,以及個別函式的處理時間。
一直以來,傳統的「大量 (由上而下)」和「樹 (由上往下)」表示法,以及「Flame Chart」只會顯示高達 1 毫秒的處理程序精確度。對大多數應用程式來說,這沒有問題。但是,如果您處理的是對 UI 速度如此重要的部分 (例如遊戲),1 毫秒的解析度可能不容易取得有意義的結果,原因可能是網站載入速度緩慢,或是使用者介面看起來很慢。如要啟用高解析剖析功能 (目前僅限 Canary 版):
- 開啟開發人員工具設定。
- 在「General」分頁的「Profiler」下方,開啟「HighResolution CPUprofiling」。
以下的 Flame Chart 在正常剖析和高解析度 都會顯示,設定檔載入 HTML5Rocks.com 首頁:


使用一般剖析解析時,處理時間一律會四捨五入到下一毫秒,因此只耗時 0.1 毫秒的程序仍可能會遭回報為 1.0 毫秒,而其他程序可能完全不會顯示在呼叫堆疊中。
高解析度剖析在 JavaScript VM 中會產生大量資源,因此預設為關閉。雖然它看起來比一般剖析解析度低,但我們建議您只在確實需要精確度時使用。
開發人員工具使用者介面改善
雖然 Canary 會不斷推出新功能,但我們還是想提醒您幾項重大的使用者介面變更:一般來說,按鈕會升至 UI 頂端、時間軸導覽和資訊面板,以及將覆寫設定移至主控台導覽匣。
首先,來看看我們的成果。因為我們還是談到時間軸 我會試著用一組螢幕截圖殺死前兩隻鳥Chrome (穩定版) 目前顯示的時間軸如下:

以下是時間軸現在的外觀

請注意以下事項:
- 工具列和按鈕目前都位於畫面頂端,包括左側特定的時間軸和右側中的開發人員工具按鈕。
- 時間軸記錄現在會在面板左側顯示巢狀結構,甚至可以使用鍵盤捲動瀏覽。除了使用向上鍵和向下鍵可向上及向下捲動,您也可以使用向左鍵和向右鍵開啟及關閉巢狀記錄。
- 針對您選取的項目,時間詳細資料現在會顯示在右側面板中。(您也可以將遊標移到其他項目上,即可查看他們的資訊)。
接著來看看主控台導覽匣。如要開啟主控台導覽匣,請在開發人員工具中按下 Escape 鍵,或按下主控台導覽匣按鈕 ,然後使用從底部向上滾動的導覽匣。
系統預設顯示「控制台」和「搜尋」分頁。如要使用原先稱為「覆寫」的功能,請開啟開發人員工具設定,然後勾選「在主控台導覽匣中顯示『模擬』檢視畫面」旁的方塊。關閉設定方塊,主控台導覽匣中的「Emulation」 (模擬) 分頁會如下方螢幕截圖所示:

然後執行所有模擬作業。
之所以會出現這種變化,主要是你必須前往「設定」變更模擬覆寫設定,然後再返回查看頁面。您現在可以變更模擬覆寫設定,同時仍可操作樣式。
經過改良的工作區
尤其是工作區的功能,可以大幅簡化您的編寫工作流程,但它卻不太能滿足其需求。有了工作區,您無需離開 Chrome,就能在開發人員工具中進行實驗和變更,並將變更複製及貼上回來源檔案,而不用離開 Chrome,就能在開發人員工具中進行變更、在瀏覽器中查看這些內容,並將這些檔案儲存至永久本機版本。
如果您尚未閱讀 Chrome 開發人員工具革命 2013 的相關文章,請繼續閱讀文章,並返回這裡瞭解我們過去幾個月對這些功能有何改善。
新增檔案更輕鬆
回到 2013 年 Revolutions 2013 文章的時,建立新的工作區需要將資料夾新增至工作區,然後將資料夾對應至網路資源。我們簡化了這項程序,只需一個步驟:只要在「來源」的左側面板上按一下滑鼠右鍵,然後選取「將資料夾新增至工作區」即可。 這樣就能開啟檔案對話方塊,讓您選擇要新增至工作區的新資料夾。(但「不會」將目前醒目顯示的資料夾新增至工作區。)

建立及移除檔案
您現在可以在工作區內將新檔案新增至用於工作區的本機目錄。只要在左側面板中的資料夾上按一下滑鼠右鍵,然後選取「New File」即可。

您也可以在工作區中移除檔案。在左側「來源」面板中的檔案上按一下滑鼠右鍵,然後選取「刪除檔案」。

你也可以選取「複製檔案」來複製檔案。
重新整理
現在,您可以直接在工作區中建立新檔案 (或刪除檔案),來源目錄也會自動重新整理並顯示這些新檔案。如果沒有,您可以隨時在資料夾上按一下滑鼠右鍵,並從彈出式選單中選取「Refresh」以強制重新整理。
如果您剛好在其他編輯器中開啟檔案,且希望開發人員工具顯示變更,這項功能也能派上用場。
搜尋所有檔案
我們稍微調整了用於跨檔案搜尋的介面,現在您也可以 搜尋工作區內所有檔案的字串,以及載入開發人員工具的所有檔案。您可以搜尋字串或規則運算式,系統會比對每個檔案或網頁中的所有出現次數。 如何在工作區中搜尋多個檔案 (目前在 Canary 中):
- 按下 Escape 鍵開啟主控台導覽匣,然後按一下「Console」旁邊的「Search」分頁標籤,即可開啟「Search」視窗
OR
按下 Ctrl + Shift + F
(Mac 上的 Cmd + Opt + F
) 開啟「搜尋」視窗。
- 在「搜尋來源」方塊中輸入查詢內容,然後按下 Enter 鍵。如果您的查詢是規則運算式或不必區分大小寫,請按一下適當的方塊。

忽略清單
如果搜尋結果含有大量 .git 檔案或 README.md 檔案,會讓檔案包含大量 .git 檔案或 README.md 檔案,那麼搜尋檔案文字或篩選檔案名稱會變得十分繁瑣。
因此,我們已在工作區中新增忽略清單功能,讓您在檢視及搜尋工作區時排除特定的檔案類型或資料夾。
以下說明如何在 Workspace 中查看及變更目前共用的忽略清單:
- 開啟開發人員工具的「設定」。
- 按一下 [工作區]。
- 在「常見」下方的「資料夾排除模式」方塊中,您可以查看和/或編輯模式。

我們提供下列預設的全域排除模式:
. __.這個規則運算式會排除 Git、SVN、Mercurial、來自 Eclipse 和 IntelliJ、OS X DS_Store 和垃圾桶檔案的專案檔案,以及其他一些值得忽略的資訊 (例如 Sass 的快取)。他們的整個資料夾 (包括任何子項) 不會從 UI 中曝光,也不會顯示在搜尋檔案時也看不到。
工作區專屬的忽略清單
如要更具體地說明,您也可以選擇排除特定工作區中的檔案和資料夾,縮小搜尋範圍。已排除的資料夾也不會顯示在來源目錄中
如要將整個資料夾從工作區中排除,請在左側面板中的資料夾上按一下滑鼠右鍵,然後選取「Exclude Folder」。如要查看特定工作區資料夾的對應和排除資料夾,請按照下列步驟操作:
- 開啟開發人員工具設定。
- 按一下 [工作區]。
- 醒目顯示您想存取的資料夾。
- 按一下 [編輯],系統隨即會顯示「編輯檔案系統」視窗,您可以在這個視窗中新增或移除對應項目和/或排除資料夾。
