通过 Chrome Workspace 调试本地项目

通过 Workspace，你可以把本地服务器的资源映射为硬盘上的文件，实现调试 JS 和 CSS 的同时自动保存文件，比如 Elements 面板中的样式变更会自动保存到文件中。

以调试本地服务器上的 Minty 主题为例：

打开 DevTools 开发者工具中的 Sources 面板，在面板左侧右键选择「Add folder to workspace」，选择添加的文件夹：

添加文件夹到 workspace

添加好后，右键一个文件，选择「Map to file system resource...」，在弹出的文本框中选择在 Workspace 中对应的文件：

添加映射文件选择对应的本地文件

比如我映射了 style.min.css 文件，那么现在你编辑元素面板中的样式，Chrome 就会实时保存本地的文件变更。

具体的文件映射规则可以到 Devtools > Settings > Workspace 中设置：

设置 Workspace

PS: 如果你映射的是文件夹，像 all.js?v=4.1 之类带参数的请求是无法映射的。(Issue 277885)

参考资料：
Workspaces - Persistent authoring in the DevTools

通过 Chrome Workspace 调试本地项目相关推荐

chrome调试本地项目, 引用本地javascript文件
chrome调试本地项目, 引用本地javascript文件本地文件可以访问本地文件修改快捷方式属性 C:\Users\xxx\AppData\Local\Google\Chrome\Applic ...
使用谷歌浏览器Chrome://inspect调试 cordova 项目
一你需要准备? 版本 83.0.4103.116(正式版本) (64 位) android 版本 8.0.0 以上是我本次测试的环境,但大家测试不限于此. 二准备工作首先,我们需要通过usb线将 ...
调试web项目时Chrome浏览器发送两次请求
最近调试web项目时,项目有时候会因为接收到空值而报错,之后我发现是因为Chrome浏览器会连续发送2次请求导致. 在使用Edge浏览器则没有出现这个问题,遂搜索了一些解决方案如下: https:// ...
支付宝接口调试完成后，接入本地项目中
复制这段代码,然后粘贴到本地项目的Handler方法处在pom.xml文件中导入依赖. <!-- https://mvnrepositor ...
Chrome Workspace开发者调试工具
学习前端开发这么久了,在调试页面的时候会经常用到一些开发工具,个人喜欢用firebug.但今天小熊个人博客为大家说到的是Chrome里面的开发工具Workspace. Workspace是? Work ...
解决VS调试web项目启动谷歌浏览器“无标题”、“已崩溃”问题
解决VS调试web项目启动谷歌浏览器"无标题"."已崩溃"问题方法一: 尝试添加任意一个参数,如 --no-sandbox--test-type --no-s ...
(004)RN开发VSCode调试ReactNative项目
1. 添加配置文件点击小蜘蛛后,按第一步.第二步操作即可接着选择调试平台☑️下面四个.点击OK,会生成一个launch.json文件并打开. 2. 添加断点接下来,我们回到DEDUG,点击右边的 ...
eclipse使用git提交本地项目，提交至远程github上
准备工作: 目的:eclipse使用git提交本地项目,提交至远程github上 eclipse版本:eclipse4.5 64位 jdk版本:jdk-1.7 64位项目类型:maven web项 ...
使用SAP iRPA Studio创建的本地项目，如何部署到SAP云平台上？
本文是2020年第15篇原创文章,也是汪子熙公众号总共第198篇原创文章. 最近在微软Bing搜索里输入China,就会出现这样的提示... 没太多可说的,唯愿天佑中华. 以前看威尔-史密斯主演的&l ...

通过 Chrome Workspace 调试本地项目

通过 Chrome Workspace 调试本地项目相关推荐

最新文章

热门文章