要驗證源地圖的開啟，轉至DevTools設置齒輪圖標，然后驗證源地圖選項被選中。

(按 F12，點擊齒輪圖標。)

設置工作區

啟用該功能后，我們需要設置一個工作區?，就是我們的源代碼所在的文件夾(或者在我們本地服務器的腳本)。

從菜單中打開開發人員工具?，快捷方式F12或檢查頁面上的任何元素，點擊右下角彈出設置對話框中設置齒輪圖標，單擊工作區的左側面板上，瀏覽文件夾在那里我們的源位置，并允許Chrome瀏覽器時，請求許可。

現在，我們的Chrome瀏覽器被映射到本地文件夾正確。?現在，我們可以從Chrome瀏覽器中的文件夾(注意，我們可以使用瀏覽本地IP)裝入我們的頁面。

讓說我有一個名為index.html的?HTML頁面，一個名為JavaScript文件app.js，一個名為app.css的CSS文件，它看起來像這樣

我有2項(為什么不呢，我喜歡它的大)，其中一個有一個ID，這將是用來顯示一些文本，當按鈕被點擊時。我在頁面上放了一個按鈕，這將是連接到一個點擊事件，在我的JavaScript函數，我的CSS只是簡單的改變顏色和背景顏色。

編輯JavaScript

現在，我們可以通過將Sources選項卡中開發工具訪問從Chrome的源代碼，然后從面板上找到我們的JavaScript文件。

如果我不添加的文件夾在工作區中，我將無法看到ChromeDev文件夾那邊。

有時候我遇到問題的文件夾顯示出來，但DevTools不知道哪個文件映射到，所以我必須通過右擊做的，我想映射代碼，并選擇Map to File System Resource(?地圖文件系統資源)。

之后，我會在匹配的文件名列表，選出我需要的。

到目前為止，按鈕放在那里什么都沒有做，讓我們直接在里面DevTools添加功能sayWhat。?一旦我們編輯的代碼，會出現一個小*的標簽上注明，我們做了一些修改，并沒有保存。

所以，簡單地按Cmd + S或Ctrl + S保存代碼。?在這種情況下，我們無需重新載入我們的頁面、重新加載代碼，我們再次單擊該按鈕，它會工作。從我的經驗，即使我們調試JavaScript的，功能非常強大的作品，它一樣有效。

之后，我們樂意與所有的變化，回到我們的本地文件夾，我們將很高興我們在DevTools所做的更改持續回到我們的源代碼。

調整

等一下！?如果我想找回一些代碼，我修改，但開發工具覆蓋我的源代碼的盤，怎么辦？

沒問題，DevTools幫助我們保持我們的代碼進行修改。?只是，我們正在處理的文件，單擊鼠標右鍵，并選擇Local Modifications(本地修改)。

我們的更改歷史記錄將顯示與恢復到特定修訂版本的能力。

盡管DevTools提供了便捷的方式為我們跟蹤的變化，我還是喜歡工作在一個副本，以防萬一。

這些只是什么DevTools可以做一點點，我敢肯定，Chrome團隊將繼續添加更多功能的工具。

總結

以上是生活随笔為你收集整理的css修改同步保存到文件,谷歌浏览器修改CSS和js后同步保存到文件中 （译）的全部內容，希望文章能夠幫你解決所遇到的問題。

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