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

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

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

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

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

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

       

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

作者：黑馬程序員前端與移動開發(fā)培訓學院

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