Chrome 開發人員工具 11 月摘要

Deanna Rubin
X

Chrome 開發人員工具的發展速度飛快，因此我們想特別留意 這是我們針對部分元件推出的幾項新功能和改善項目。這邊會談到一些 UI 變更 高解析度 JS 分析和新的 Workspace 功能

  • 高解析度剖析功能現在的精確度可達 0 .1 毫秒
  • 工具列上升至開發人員工具頂端，且「覆寫」已移至控制台導覽匣
  • 工作區新增了多項功能，以支援新增/移除/搜尋檔案

高解析度分析

CPU 剖析 是一項非常實用的功能，方便您瞭解 JavaScript 的執行效率。除了傳統的設定檔檢視方式外，我們還在今年夏天推出了火焰圖表，以視覺化方式呈現網頁的 JavaScript 長期處理作業。 可用來輕鬆查看呼叫堆疊的深度，以及個別函式的處理時間。

一直以來，傳統的「大量 (由上而下)」和「樹 (由上往下)」表示法，以及「Flame Chart」只會顯示高達 1 毫秒的處理程序精確度。對大多數應用程式來說，這沒有問題。但是，如果您處理的是對 UI 速度如此重要的部分 (例如遊戲)，1 毫秒的解析度可能不容易取得有意義的結果，原因可能是網站載入速度緩慢，或是使用者介面看起來很慢。如要啟用高解析剖析功能 (目前僅限 Canary 版)：

  1. 開啟開發人員工具設定。
  2. 在「General」分頁的「Profiler」下方，開啟「HighResolution CPUprofiling」。

以下的 Flame Chart 在正常剖析和高解析度 都會顯示，設定檔載入 HTML5Rocks.com 首頁：

採用正常解析度的火焰圖。
高解析度的火焰圖。

使用一般剖析解析時，處理時間一律會四捨五入到下一毫秒，因此只耗時 0.1 毫秒的程序仍可能會遭回報為 1.0 毫秒，而其他程序可能完全不會顯示在呼叫堆疊中。

高解析度剖析在 JavaScript VM 中會產生大量資源，因此預設為關閉。雖然它看起來比一般剖析解析度低，但我們建議您只在確實需要精確度時使用。

開發人員工具使用者介面改善

雖然 Canary 會不斷推出新功能，但我們還是想提醒您幾項重大的使用者介面變更：一般來說，按鈕會升至 UI 頂端、時間軸導覽和資訊面板，以及將覆寫設定移至主控台導覽匣。

首先，來看看我們的成果。因為我們還是談到時間軸 我會試著用一組螢幕截圖殺死前兩隻鳥Chrome (穩定版) 目前顯示的時間軸如下：

舊時間軸。

以下是時間軸現在的外觀

新增時間軸。

請注意以下事項：

  1. 工具列和按鈕目前都位於畫面頂端，包括左側特定的時間軸和右側中的開發人員工具按鈕。
  2. 時間軸記錄現在會在面板左側顯示巢狀結構，甚至可以使用鍵盤捲動瀏覽。除了使用向上鍵和向下鍵可向上及向下捲動，您也可以使用向左鍵和向右鍵開啟及關閉巢狀記錄。
  3. 針對您選取的項目，時間詳細資料現在會顯示在右側面板中。(您也可以將遊標移到其他項目上，即可查看他們的資訊)。

接著來看看主控台導覽匣。如要開啟主控台導覽匣，請在開發人員工具中按下 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 中查看及變更目前共用的忽略清單：

  1. 開啟開發人員工具的「設定」。
  2. 按一下 [工作區]。
  3. 在「常見」下方的「資料夾排除模式」方塊中，您可以查看和/或編輯模式。
排除檔案模式。

我們提供下列預設的全域排除模式：

. __.

這個規則運算式會排除 Git、SVN、Mercurial、來自 Eclipse 和 IntelliJ、OS X DS_Store 和垃圾桶檔案的專案檔案，以及其他一些值得忽略的資訊 (例如 Sass 的快取)。他們的整個資料夾 (包括任何子項) 不會從 UI 中曝光，也不會顯示在搜尋檔案時也看不到。

工作區專屬的忽略清單

如要更具體地說明，您也可以選擇排除特定工作區中的檔案和資料夾，縮小搜尋範圍。已排除的資料夾也不會顯示在來源目錄中

如要將整個資料夾從工作區中排除，請在左側面板中的資料夾上按一下滑鼠右鍵，然後選取「Exclude Folder」。如要查看特定工作區資料夾的對應和排除資料夾，請按照下列步驟操作：

  1. 開啟開發人員工具設定。
  2. 按一下 [工作區]。
  3. 醒目顯示您想存取的資料夾。
  4. 按一下 [編輯]，系統隨即會顯示「編輯檔案系統」視窗，您可以在這個視窗中新增或移除對應項目和/或排除資料夾。
排除資料夾。