本文標題：谷歌瀏覽器修改CSS和js后同步保存到文件中。
文本作者：魔芋鈴。
谷歌的Chrome DevTools源地圖
Source Maps
要驗證源地圖的開啟，轉至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團隊將繼續添加更多功能的工具。
標簽：chrome, devtools, javascript, source maps