Chrome DevTools 允許你對頁面或者 CSS 做出更改，并且可以實時查看更改效果。但是如果你需要復(fù)制外部編輯器中更改的內(nèi)容并粘貼到 DevTools 時，什么對你才是更加重要的呢？工作空間可以讓這些更改暫時存儲在硬盤上而不需要離開 Chrome DevTools 界面。

通過工作空間，你可以在 Sources 面板中編輯任何類型的源文件并且將改動保存到硬盤上。并且你可以將資源從本地服務(wù)器映射到磁盤上的文件中，當你修改該文件并保存了之后，他們可以照常運行。并且，如果你對映射的設(shè)置是正確的，你在 Elements 面板上修改也會自動儲存到磁盤上。

將項目放進工作空間（Workspace）中

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/addfolder.png" alt="addfolder" />

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

在 Chrome 中，你可以編輯該文件夾下的任何文件以及子文件夾。在這種情況下，“源文件”并只是 HTML、CSS 以及 JavaScript，其指的是任意類型的文件，包括 markdown 以及 JSON。

映射網(wǎng)絡(luò)資源

工作空間真正有用的地方在于它可以將一個本地文件映射到一個 URL 上（或者是網(wǎng)絡(luò)資源上）。當 Chrome 加載一個被映射的 URL 時，網(wǎng)絡(luò)文件夾的內(nèi)容會被工作空間的文件夾取代。這就好像這些文件是放在網(wǎng)絡(luò)上一樣，但是你可以通過 DevTools 來修改本地文件并保存。

要將你的網(wǎng)站映射到本地工作空間文件夾：

在 Sources 面板中，右鍵點擊或按住 Control 再點擊網(wǎng)站上的文件。
選擇 Map to File System Resource。
在出現(xiàn)的列表中選擇相應(yīng)的文件（你可以輸入文件名或者關(guān)鍵字來找到你想要的文件）。
在 Chrome 中重新加載頁面。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/maptoresource.png" alt="maptoresource" />

現(xiàn)在 Source 面板中顯示的將會是本地工作空間的文件夾，而不是服務(wù)器上的內(nèi)容了。

你可以將該功能用于其他地方，比如將工作空間文件夾映射到 URL 上，或者對網(wǎng)絡(luò)資源進行映射。要注意，并不是所有從本地映射的網(wǎng)絡(luò)資源都會載入到瀏覽器中，但是你的本地文件必須都是可以映射到 URL 的。在工作空間中映射一個文件時應(yīng)該將該文件映射到該工作空間的大多數(shù)站點。

注意事項

工作空間使得你的很多工作變得簡單了，并且不需要在 Chrome 和外部編輯器之間切換了。然而，有些東西你需要注意：

只有在 Elements 中改變的樣式會被保存。對 DOM 文檔做出的修改是不會保存的。
在 Elements 面板中改動的樣式會立即保存，該效果就和把 CSS 文件映射到本地的備份文件一樣（也就是說，源自 Elements 面板的更改不需要手動保存）。
如果你從遠程服務(wù)器上將文件映射到本地，當你刷新頁面的時候 Chrome 從遠程服務(wù)器上再次加載文件。你做出的改動保存在硬盤上，并且當你繼續(xù)在工作空間內(nèi)對文件進行編輯的時候就會生效。

工作空間的文件管理

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

添加文件

右鍵點擊左邊的文件夾并選擇 New File。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/newfile.png" alt="newfile" />

刪除文件

右鍵點擊左邊的文件并選擇 Delete File。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/deletefile.png" alt="deletefile" />

你也可以選擇 Duplicate File 來復(fù)制文件。新文件會在 Sources 面板中出現(xiàn)，并且你可以為它輸入一個新名稱（默認情況下是 “Copy of mufile.txt”）。

刷新

現(xiàn)在你已經(jīng)在工作空間中直接創(chuàng)建（刪除）了文件，源目錄會自動刷新并且顯示出這些新文件。如果沒有顯示出來，你可以右鍵點擊一個文件夾然后選擇 Refresh 來刷新。

當你在其他的編輯器中對文件做出更改并保存時候，這個方法可以幫助你在 DevTools 刷新文件。一般情況下 DevTools 會自動刷新，即使文件是在外部編輯器中保存的，但是如果你需要重新編譯 HTML 或者 CSS 文件，那就需要手動刷新。

搜索文件

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

文件的搜索機制是有很多種的，所以你既可以搜索工作空間中的文件，也可以搜索其他加載到 DevTools 的文件。甚至你可以通過一個字符串或者一個正則表達式來進行搜索，而 Chrome 會找到相匹配的任何文件或者頁面。

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

按住 Esc 鍵打開控制臺，然后選擇控制臺旁邊的 Search 選項卡來打開搜索窗口?；蛘甙?Ctrl + Shift + F（在 Mac 上使用 Cmd + Opt + F）來打開搜索窗口。
在搜索框中輸入你想搜索的內(nèi)容，然后按下回車鍵。如果你查詢的是一個常規(guī)表達式或者是大小寫敏感的內(nèi)容，請勾選相應(yīng)的復(fù)選框。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/searchacross.png" alt="searchacross" />

工作空間是 DevTools 的新特性，故本文可能沒法涵蓋到其全部特性，關(guān)于工作空間的詳細內(nèi)容請參考開發(fā)文檔。

上一篇：控制臺 API 參考下一篇：樹形提示 (不穩(wěn)定)