簡介

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 的文件。甚至你可以通過一個字符串或者一個正則表達式來進行搜索，而 Chrome 會找到相匹配的任何文件或者頁面。

要通過工作區間中的多個文件來搜索文本：

按住 Esc 鍵打開控制臺，然后選擇控制臺旁邊的 Search 選項卡來打開搜索窗口。或者按?Ctrl?+?Shift?+?F（在 Mac 上使用Cmd?+?Opt?+?F）來打開搜索窗口。

在搜索框中輸入你想搜索的內容，然后按下回車鍵。如果你查詢的是一個常規表達式或者是大小寫敏感的內容，請勾選相應的復選框。

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

總結

以上是生活随笔為你收集整理的Chrome 开发工具指南——通过工作空间保存更改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。