通过 Chrome Workspace 调试本地项目
来源:互联网 发布:java开发app后台demo 编辑:程序博客网 时间:2024/06/16 10:38
通过 Workspace,你可以把本地服务器的资源映射为硬盘上的文件,实现调试 JS 和 CSS 的同时自动保存文件,比如 Elements 面板中的样式变更会自动保存到文件中。
以调试本地服务器上的 Minty 主题为例:
打开 DevTools 开发者工具中的 Sources 面板,在面板左侧右键选择「Add folder to workspace」,选择添加的文件夹:
![](http://img.c7sky.com/photobucket/chrome_devtools_workspace_addfolder_zpsuxavvyuf.png)
添加好后,右键一个文件,选择「Map to file system resource...」,在弹出的文本框中选择在 Workspace 中对应的文件:
![](http://img.c7sky.com/photobucket/chrome_devtools_workspace_maptoresource_zpsmbford8z.png)
![](http://img.c7sky.com/photobucket/chrome_devtools_workspace_maptoresourcechoose_zpsyupcc64v.png)
比如我映射了 style.min.css
文件,那么现在你编辑元素面板中的样式,Chrome 就会实时保存本地的文件变更。
具体的文件映射规则可以到 Devtools > Settings > Workspace 中设置:
![](http://img.c7sky.com/photobucket/chrome_devtools_workspace_editfilesystem_zpsydr5cj62.png)
PS: 如果你映射的是文件夹,像 all.js?v=4.1 之类带参数的请求是无法映射的。(Issue 277885)
参考资料:
Workspaces - Persistent authoring in the DevTools
阅读全文
0 0
- 转 通过 Chrome Workspace 调试本地项目
- 通过 Chrome Workspace 调试本地项目
- Chrome Workspace开发者调试工具
- 开发者调试工具Chrome Workspace
- 开发者调试工具Chrome Workspace
- 前端开发 调试工具 Chrome Workspace
- Chrome调试css(chrome开发工具workspace使用)
- Chrome Workspace
- 微信开发之通过代理调试本地项目
- eclipse通过svn插件导入项目后调试本地环境
- Chrome浏览器通过书签打开本地程序
- chrome本地调试解决跨域
- Chrome Workspace配置
- 无法通过 chrome://inspect/#devices 调试手机
- 通过打断点调试本地服务程序
- 跨域,通过Apache本地服务器调试运行
- 本地环境 XAMPP+phpStorm+XDebug+chrome 配置和断点调试
- 本地环境 XAMPP+phpStorm+XDebug+chrome 配置和断点调试
- win10 下装win7
- IBM WebSphere MQ 7.5的基本配置
- wifi连指定ssid和password
- 【opencv、机器学习】聚类算法——K-means
- java注解之初识注解
- 通过 Chrome Workspace 调试本地项目
- C#中的is和as操作符
- Kotlin学习之-5.11 对象表达式和声明
- Kali Linux 暴力破解 wifi密码
- Matlab 读写二维数组(复数)
- vs2015配置opencv3.2
- Swiift Pch和宏定义
- Scala文件操作----(读取和写入字符)
- 深入理解BFC和Margin Collapse