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

通過工作空間保存更改

簡(jiǎn)介

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

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

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

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

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

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

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

工作空間真正有用的地方在于它可以將一個(gè)本地文件映射到一個(gè) URL 上（或者是網(wǎng)絡(luò)資源上）。當(dāng) Chrome 加載一個(gè)被映射的 URL 時(shí)，網(wǎng)絡(luò)文件夾的內(nèi)容會(huì)被工作空間的文件夾取代。這就好像這些文件是放在網(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 面板中顯示的將會(huì)是本地工作空間的文件夾，而不是服務(wù)器上的內(nèi)容了。

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

注意事項(xiàng)

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

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

工作空間的文件管理

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

添加文件

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

刪除文件

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

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

刷新

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

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

搜索文件

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

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

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

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

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