Chrome 開發工具指南——通過工作空間儲存更改

簡介

Chrome DevTools 允許你對頁面或者 CSS 做出更改，並且可以即時查看更改效果。但是如果你需要複製外部編輯器中更改的內容並粘貼到 DevTools 時，什麼對你才是更加重要的呢。工作空間可以讓這些更改暫時儲存在硬碟上而不需要離開 Chrome DevTools 介面。

通過工作空間，你可以在 Sources 面板中編輯任何類型的源檔案並且將改動儲存到硬碟上。並且你可以將資源從本機伺服器映射到磁碟上的檔案中，當你修改該檔案並儲存了之後，他們可以照常運行。並且，如果你對映射的設定是正確的，你在 Elements 面板上修改也會自動儲存到磁碟上。 將項目放進工作空間（Workspace）中

要在 Sources 面板中編輯本地的源檔案，右鍵點擊 Sources 面板的左部並選擇 Add Folder to Workspace。該操作會啟動一個檔案選擇框，你可以選擇需要的檔案夾添加到工作空間中（這並不會將當前高亮顯示的檔案夾加入到你的工作空間中）。

當 Chrome 頂部出現黃色的提示 "DevTools requests full acess to [path to your folder]" 時，選擇 *Allow。

在 Chrome 中，你可以編輯該檔案夾下的任何檔案以及子檔案夾。在這種情況下，“源檔案”並只是 HTML、CSS 以及 JavaScript，其指的是任意類型的檔案，包括 markdown 以及 JSON。 映射網路資源

工作空間真正有用的地方在於它可以將一個本地檔案對應到一個 URL 上（或者是網路資源上）。當 Chrome 載入一個被映射的 URL 時，網路檔案夾的內容會被工作空間的檔案夾取代。這就好像這些檔案是放在網路上一樣，但是你可以通過 DevTools 來修改本地檔案並儲存。

要將你的網站映射到本地工作空間檔案夾： 在 Sources 面板中，右鍵點擊或按住 Control 再點擊網站上的檔案。 選擇 Map to File System Resource。 在出現的列表中選擇相應的檔案（你可以輸入檔案名稱或者關鍵字來找到你想要的檔案）。 在 Chrome 中重新載入頁面。

現在 Source 面板中顯示的將會是本地工作空間的檔案夾，而不是伺服器上的內容了。

你可以將該功能用於其他地方，比如將工作空間檔案夾映射到 URL 上，或者對網路資源進行映射。要注意，並不是所有從本機對應的網路資源都會載入到瀏覽器中，但是你的本地檔案必須都是可以映射到 URL 的。在工作空間中映射一個檔案時應該將該檔案對應到該工作空間的大多數網站。 注意事項

工作空間使得你的很多工作變得簡單了，並且不需要在 Chrome 和外部編輯器之間切換了。然而，有些東西你需要注意： 只有在 Elements 中改變的樣式會被儲存。對 DOM 文檔做出的修改是不會儲存的。 在 Elements 面板中改動的樣式會立即儲存，該效果就和把 CSS 檔案對應到本地的備份檔案一樣（也就是說，源自 Elements 面板的更改不需要手動儲存）。 如果你從遠程伺服器上將檔案對應到本地，當你重新整理頁面的時候 Chrome 從遠程伺服器上再次負載檔案。你做出的改動儲存在硬碟上，並且當你繼續在工作空間內對檔案進行編輯的時候就會生效。 工作空間的檔案管理

使用工作空間的時候，除了編輯已有的檔案，你也可以在本地目錄中添加或者刪除檔案。 添加檔案

右鍵點擊左邊的檔案夾並選擇 New File。

刪除檔案

右鍵點擊左邊的檔案並選擇 Delete File。

你也可以選擇 Duplicate File 來複製檔案。新檔案會在 Sources 面板中出現，並且你可以為它輸入一個新名稱（預設情況下是 “Copy of mufile.txt”）。 重新整理

現在你已經在工作空間中直接建立（刪除）了檔案，來源目錄會自動重新整理並且顯示出這些新檔案。如果沒有顯示出來，你可以右鍵點擊一個檔案夾然後選擇 Refresh 來重新整理。

當你在其他的編輯器中對檔案做出更改並儲存時候，這個方法可以協助你在 DevTools 重新整理檔案。一般情況下 DevTools 會自動重新整理，即使檔案是在外部編輯器中儲存的，但是如果你需要重新編譯 HTML 或者 CSS 檔案，那就需要手動重新整理。 搜尋檔案

如果要在 DevTools 中搜尋檔案，按Ctrl + O（或者在 Mac 上使用 Cmd + O）來開啟一個檔案搜尋選項框。在工作空間中你也可以這麼做，不過它除了會搜尋本地檔案外，還會搜尋工作空間中遠程載入的檔案。

檔案的搜尋機制是有很多種的，所以你既可以搜尋工作空間中的檔案，也可以搜尋其他載入到 DevTools 的檔案。甚至你可以通過一個字串或者一個Regex來進行搜尋，而 Chrome 會找到相匹配的任何檔案或者頁面。

要通過工作區間中的多個檔案來搜尋文本： 按住 Esc 鍵開啟控制台，然後選擇控制台旁邊的 Search 選項卡來開啟搜尋視窗。或者按 Ctrl + Shift + F（在 Mac 上使用Cmd + Opt + F）來開啟搜尋視窗。 在搜尋方塊中輸入你想搜尋的內容，然後按下斷行符號鍵。如果你查詢的是一個常規運算式或者是大小寫敏感的內容，請勾選相應的複選框。

工作空間是 DevTools 的新特性，故本文可能沒法涵蓋到其全部特性，關於工作空間的詳細內容請參考開發文檔https://github.com/GoogleChrome/devtools-docs/issues/30。