前端通過(guò)Chrome Workspace調(diào)試本地項(xiàng)目

通過(guò) Workspace，你可以把本地服務(wù)器的資源映射為硬盤(pán)上的文件，實(shí)現(xiàn)調(diào)試 JS 和 CSS 的同時(shí)自動(dòng)保存文件，比如 Elements 面板中的樣式變更會(huì)自動(dòng)保存到文件中。

打開(kāi) DevTools 開(kāi)發(fā)者工具中的 Sources 面板，在面板左側(cè)右鍵選擇「Add folder to workspace」，選擇添加的文件夾：

添加好后，右鍵一個(gè)文件，選擇「Map to file system resource...」，在彈出的文本框中選擇在 Workspace 中對(duì)應(yīng)的文件：

比如我映射了 style.min.css 文件，那么現(xiàn)在你編輯元素面板中的樣式，Chrome 就會(huì)實(shí)時(shí)保存本地的文件變更。

具體的文件映射規(guī)則可以到 Devtools > Settings > Workspace 中設(shè)置：

       

本文版權(quán)歸黑馬程序員前端與移動(dòng)開(kāi)發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！

作者：黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)學(xué)院

首發(fā)：http://web.itheima.com/