Chrome開發(fā)工具 通過工作空間保存更改

通過工作空間保存更改

簡介

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

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

將項目放進(jìn)工作空間（Workspace）中

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

當(dāng) 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ò)資源上）。當(dāng) Chrome 加載一個被映射的 URL 時，網(wǎng)絡(luò)文件夾的內(nèi)容會被工作空間的文件夾取代。這就好像這些文件是放在網(wǎng)絡(luò)上一樣，但是你可以通過 DevTools 來修改本地文件并保存。

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

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

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

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

注意事項

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

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

工作空間的文件管理

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

添加文件

右鍵點(diǎn)擊左邊的文件夾并選擇 New File。

刪除文件

右鍵點(diǎn)擊左邊的文件并選擇 Delete File。

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

刷新

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

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

搜索文件

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

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

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

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

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