使用Chrome調試(編輯)JavaScript、CSS、HTML打賞

說起來Chrome的調試,可能大多數人都用過,用Chrome調試JavaScript、CSS的確是方便了前端開發人員,但這大多數人中,基本都是用它來調試,而非編輯,通常情況下,應該都是打開瀏覽器開發者工具,對JavaScript進行debug或者對CSS進行修改,完成后返回編輯器(IDE)修改源碼,刷新并重試。這看似簡單的過程,實際上已經在瀏覽器、編輯器(IDE)之間的切換中消耗了一倍以上的時間,事實上,我們并不需要如此,Chrome為開發者提供了更為方便的調試模式,可以讓你在瀏覽器中調試的同時,一步到位、修改源碼,下面我們就來簡單介紹一下。

方法很簡單,只需兩個步驟。

1、添加工作文件夾到workspace:按照通常方式打開瀏覽器,調出控制臺,切換到Sources選項卡,可以看到當前頁面所涉及的資源文件,這不是重點,重點是在資源列表欄,就是左側列出所有資源的地方,點擊右鍵,會看到"Add folder to workspace",點擊后會彈出瀏覽文件夾的對話窗口,這里可以選擇系統內的文件夾,很明顯,我們可以選擇我們的項目源碼根目錄,然后確定,由于瀏覽器的安全限制不允許瀏覽器隨意訪問本地文件、文件夾,所以這時Chrome的DevTools會在瀏覽器上方提示——"DevTools 請求獲得對xxx(指你選擇的文件夾)的完整訪問權限。請確保您不會泄露任何敏感信息。",點擊允許。即完成文件夾的添加。

2、映射本地文件與網絡文件:經過第一步之后其實只是在Chrome中可以打開、編輯本地文件,并沒有達到我們的目的,為了同步調試、編輯,我們只需簡單的映射即可,你可以在第一步添加的本地文件夾中找到你要編輯的JavaScript、CSS或者HTML(純靜態頁面),點擊右鍵,選擇"Map to network resource…",這時候彈出的搜索窗口中會列出當前選擇文件所匹配到的所有網絡資源,選擇正確的映射,點擊后會提示"It is recommended to restart inspector after making these changes. Would you like to restart it?",確定即可。其他(CSS、HTML)類似,這里不再贅述。同時,你也可以通過找到網絡資源點擊右鍵,選擇"Map to file system resource…"來映射本地文件,以上方式二選一即可。

經過以上兩步操作,現在在瀏覽器中調試已映射文件時,如果做了修改,本地文件會同步修改,這樣基本上就不必在瀏覽器、編輯器(IDE)直接來回切換了。感興趣的朋友可以嘗試一下。

使用Chrome調試(編輯)JavaScript、CSS、HTML
文章《使用Chrome調試(編輯)JavaScript、CSS、HTML》二維碼
  • 微信打賞
  • 支付寶打賞

已有3條評論

  1. 養鵝銷路

    不錯

    2015-07-30 14:14 回復
  2. 五常大米網

    學習了

    2015-07-20 16:01 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖