我们总是习惯于先在 IDE 或者文本编辑器中修改代码,然后再进入 Chorme 中进行调试,那有没有想过直接就在 Chrome 中来修改我们的代码呢?

# 1. 在 Chrome 中修改你的文件

代码执行的位置也是最容易编辑代码的位置。如果把项目的文件夹直接拖到 Source 面板, DevTools 会将修改同步到系统文件中。

这对于快速修复代码非常方便:

# 2. Workspace 支持即时同步样式

正如我们刚才所说,一旦设置好了 DevTools workspace ,就可以在 Sources 面板中编辑 HTMLJavaScript (或者甚至是 TypeScript ,如果你有 sourcemaps )文件,按 ctrl + s 后它将被保存 在文件系统中。

但是在样式方面它提供了更好的支持。 因为即使你只是在 “元素” 面板的 “样式” 部分中编辑样式规则,它也会立即同步。 请注意,是立刻!

"黑魔法!"

# 3. 为新选择器选择目标位置

向现有选择器添加新样式

  • 按下 + 号,添加新样式:

敲黑板

设置 Workspace 后,浏览器中所做的更改不仅会持久的保存到文件系统中,而且, CSS 的更改保存在文件系统后,立即就被浏览器选中并显示在你的页面上。这一过程不需要刷新。

我们 没有使用额外的工具 - 没有 webpack 的热更新模块或者其他东西 - 只有一个本地服务以及 DevTools' workspace 而已。

# 5. XHR/fetch 断点

在某一特定时刻,你想要对已发送的 “ajax” 请求进行捕获怎么做呢? 可以使用 XHR/fetch breakpoint

你可以添加部分 URL 作为触发器或监听任何请求:

微信扫码或搜索: 前端恶霸

在公众号对话框,发送

关注期间 无限制 浏览本站全部内容

内容包括 「Chrome 调试技巧」(持续更新),以及「React 学习指北」(即将上线)

为什么我需要关注?
加入读者交流群 扫描二维码回复 Chrome
Last Updated: 6/30/2020, 12:36:00 PM