谷歌瀏覽器修改CSS和js後同步保存到文件中 （譯）

本文標題：谷歌瀏覽器修改CSS和js後同步保存到文件中。

文本做者：魔芋鈴。

英文原文： http://www.stephensaw.me/google-chrome-devtools-source-maps/

谷歌的Chrome DevTools源地圖

谷歌的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