- Published on
30-Source diff
- Authors
- Name
- Dendoink
- @Magiciaaaaaaaan
💡
问题 看完 worksapce 的介绍,我们可以把改动同步到本地的文件中,但是对于修改了什么,以及哪些是新增的部分,还是会模糊不清对吗?
1. Source diff
⚠️
请注意 这是一个实验中的功能,有可能会导致一些问题。
虽然这是一个实验中的功能,但是经过测试,我觉得他真的很好用,如果你喜欢使用 workspace
来编写代码,那这个功能一定对你有所帮助,首先我们需要在设置中打开这个功能:

⚠️
请注意 当你打开这个选项之后,请务必在 devtools
以确保此选项能够生效!
2. Source diff 使用
首先你需要有一个本地的项目,你可以把它拖到 Source
或者按 +
号来选择对应的文件目录:

当我们启用了 Source diff 之后:
- 紫色代表:修改的内容
- 红色代表:删除的内容
- 绿色代表:新增的内容
3. 配合 Drawer 的 changes 使用
Source diff 配合 Drawer 的 changes 使用效果更佳:

💡
敲黑板 当然你也可以使用命令打开 Drawer chanegs
Related series
00-写在前面
March 2, 2021
01-Chrome 版本
March 2, 2021
02-复制 & 保存
March 2, 2021
03-快捷键和通用技巧
March 2, 2021
04-使用 Command
March 2, 2021
05-代码块的使用
March 2, 2021
06-console 中的 $
March 2, 2021
07-console.log 的 "bug" ?
March 2, 2021
08-异步的 console
March 2, 2021
09-Ninja console.log
March 2, 2021
10-自定义格式转换器
March 2, 2021
11-对象&方法
March 2, 2021
12-console.log 并不简单
March 2, 2021
13-打造一个终极 log
March 2, 2021
14-打印时间戳
March 2, 2021
15-直接把 `log` 作为回调函数
March 2, 2021
16-初窥 Network
March 2, 2021
17-Network 深入
March 2, 2021
18-Network 细节
March 2, 2021
19-元素面板的基本操作
March 2, 2021
20-元素面板调试技巧
March 2, 2021
21-元素面板里的编辑器
March 2, 2021
22-颜色选择器
March 2, 2021
23-Drawer 使用技巧
March 2, 2021
24-Drawer 动画调试
March 2, 2021
25-Drawer 性能优化
March 2, 2021
26-Workspace 使用技巧
March 2, 2021
27-自动美化输出
March 2, 2021
28-CSS 概览
March 2, 2021
29-Custom UI Themes
March 2, 2021
30-Source diff
March 2, 2021