使用SourceTree可查看HTML与CSS文件的提交历史并进行可视化对比。首先在文件树中选择目标文件，查看包含该文件更改的提交记录，双击提交进入差异视图，红色表示删除或修改前内容，绿色表示新增或修改后内容。如添加新的CSS类.btn-primary，其代码将以绿色高亮显示。若需跨版本对比，按住Command键选择两个commit，右键选择“Diff Selected Commits”，可查看两版本间所有变动文件的具体差异，适合发布前审查重大调整。还可通过点击右上角菜单导出patch文件或复制差异内容分享给同事review，便于团队快速了解变更细节，无需本地拉取代码。熟练掌握这些功能有助于提升对项目演进的理解效率，尤其适用于维护老项目和多人协作场景。
在Mac上使用SourceTree查看HTML与CSS文件的历史改动，并进行可视化对比，是前端开发中非常实用的操作。通过它你可以清楚地看到每次提交中代码的变化情况，便于排查问题或理解协作成员的修改。
查看文件历史改动
打开SourceTree，选择你正在工作的项目仓库。在左侧的“文件树”（File Tree）面板中，找到你想查看的HTML或CSS文件，比如 index.html 或 style.css。
点击该文件后，主窗口会显示所有包含此文件更改的提交记录。你可以：
- 逐条查看每次提交的摘要信息
- 查看提交者、时间、commit hash等元数据
- 双击某次提交，进入详细差异视图
可视化对比代码差异
当你双击一个提交后，SourceTree会在右侧面板以并排或内联方式展示文件变更。对于HTML和CSS文件，它会用颜色标注：
立即学习“前端免费学习笔记（深入）”；
- 红色行：表示被删除或修改前的内容
- 绿色行：表示新增或修改后的内容
例如，如果你在某次提交中为CSS添加了新的类样式：
.btn-primary {
background: blue;
padding: 10px;
}
这段代码会以绿色高亮显示，清晰表明这是新增内容。
跨版本对比任意两次提交
如果想对比两个不同历史节点之间的HTML/CSS变化，可以这样做：
- 在提交历史中按住Command键选择两个不同的commit
- 右键点击 → 选择“Diff Selected Commits”
- SourceTree会列出这两个版本间所有变动的文件
- 点击HTML或CSS文件，即可查看具体的代码差异
这个功能特别适合在发布前审查样式或结构的重大调整。
导出或分享差异报告
如果需要将某次改动提供给同事 review，可以在差异视图中：
- 点击右上角“…”菜单
- 选择“Export Patch”导出为文本文件
- 也可直接复制差异内容粘贴到文档或聊天工具中
这样团队成员无需本地拉取代码也能快速了解变更细节。
基本上就这些。熟练使用SourceTree的差异对比功能，能大幅提升你对项目演进过程的理解效率，尤其在维护老项目或多人协作时尤为关键。
