Google瀏覽器修改CSS和js後同步儲存到檔案中 （譯），Googlecss

Google瀏覽器修改CSS和js後同步儲存到檔案中 （譯），Googlecss

本文標題：Google瀏覽器修改CSS和js後同步儲存到檔案中。

文本作者：魔芋鈴。

英文原文：http://www.stephensaw.me/google-chrome-devtools-source-maps/Google的Chrome DevTools源地圖Google的Chrome DevTools發展得越來越好，尤其是他們快速的Blink and V8的效能 ，而且他們使DevTools更好。 最近我發現，編輯原始碼的正確的方式是使用源映射了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