學(xué)習(xí)前端開發(fā)這么久了，在調(diào)試頁面的時(shí)候會(huì)經(jīng)常用到一些開發(fā)工具，個(gè)人喜歡用firebug。但今天小熊個(gè)人博客為大家說到的是Chrome里面的開發(fā)工具Workspace。

Workspace是？

Workspace允許開發(fā)著在Chrome調(diào)試工具中實(shí)時(shí)編輯源文件。系統(tǒng)會(huì)將磁盤文件匹配到你的本地服務(wù)器上，這樣你可以通過Chrome的source panel保存修改的代碼，或者當(dāng)外部文件更新時(shí)立即刷新。這樣就能夠避免開發(fā)人員在工具中調(diào)試好，再到編輯器中修改一次代碼的重復(fù)操作，提高編輯效率。

Workspace你會(huì)用嗎？

如果想要更多的了解Workspac開發(fā)工具，那么就請查看:《開發(fā)者調(diào)試工具Chrome Workspace》

在這里就簡單為大家介紹一些操作方法。

1. 打開開發(fā)者工具（F12），點(diǎn)擊右下角的設(shè)置按鈕。

?

?

2. 選擇 Workspace, 然后選擇 Add folder。

?

?

3.選擇源文件所在文件夾，當(dāng)彈出提示時(shí)，選擇允許。

?

?

4.在Chrome的Source面板右鍵選擇需要編輯的源文件，選擇“Map to a Network Resource”。

?

?

這樣在Chrome的調(diào)試工具里面編輯該源文件，或者直接修改css樣式（對于css文件），再用Ctrl+S保存，這樣修改的代碼就自動(dòng)保存到本地文件中了。

?

Chrome 30的Workspace已經(jīng)支持了SASS、LESS等CSS預(yù)處理器，后面馬上會(huì)支持Stylus和Compass。

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的Chrome Workspace开发者调试工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。