配置Chrome的workspace功能

之前经常做css的微调的时候,每次在chrome的控制台调好之后,还得粘贴到源码或者在源码里复写一次。
使用Chrome的Workspace功能可以将控制台修改的内容同步到源码里,可以省事不少。方法很简单!


配置Chrome的workspace功能_第1张图片
举个栗子

1.F12打开控制台--Sources

配置Chrome的workspace功能_第2张图片
右键将项目文件夹导入workspace

2.在对话框选择相应路由

配置Chrome的workspace功能_第3张图片
在对话框选择相应路由

此时浏览器会弹出权限对话框,点击“允许”


点击允许

3.将源码加入映像

配置Chrome的workspace功能_第4张图片
将源码加入映像
配置Chrome的workspace功能_第5张图片
确定文件路由

4.具体步骤

这里是跟之前一样的,在控制台里修改样式,然后会看到IDE里的响应文件代码已经同步修改。


配置Chrome的workspace功能_第6张图片
QQ截图20170210085741.jpg

5.删除映像

在控制台快捷键F1选择控制台的“setting”,打开Workspace配置


配置Chrome的workspace功能_第7张图片
映像的增删改查

你可能感兴趣的:(配置Chrome的workspace功能)