教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

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

更新時(shí)間:2018年01月05日13時(shí)54分 來源:傳智播客 瀏覽次數(shù):

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

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

添加文件夾到 workspace

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

添加映射文件
選擇對(duì)應(yīng)的本地文件

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

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



本文版權(quán)歸傳智播客前端與移動(dòng)開發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客前端與移動(dòng)開發(fā)培訓(xùn)學(xué)院
首發(fā)：http://fskzgqt.cn/web/

0 分享到：
和我們?cè)诰€交談！