四、Git 图形化工具
4.1 VS Code Git 集成
# 核心功能
Cmd+Shift+G # 打开源代码管理面板
# 常用操作
- 点击文件旁的 + 号 → git add
- 输入提交信息 → Cmd+Enter → git commit
- 点击 ... → Pull/Push
- 点击分支名 → 切换分支
# 冲突解决
- 文件中显示 <<<<<<< HEAD 标记
- 选择 Accept Current Change（保留当前）
- 或 Accept Incoming Change（保留传入）
- 或 Accept Both Changes（两者都保留）
4.2 GitLens 插件
# 核心功能
- 每行代码末尾显示：作者、提交时间、提交信息
- 点击行号 → 查看完整提交历史
- 左侧栏 → 查看文件历史、行历史
- GitLens Panel → 搜索提交、查看仓库状态
# 常用命令
Cmd+Shift+P → GitLens: Open Repositories # 打开仓库列表
Cmd+Shift+P → GitLens: Show Commit Details # 查看提交详情
4.3 命令行 Git 效率技巧
# 别名配置（.gitconfig）
[alias]
co = checkout
br = branch
ci = commit
st = status
lg = log --oneline --graph --all
unstage = reset HEAD --
last = log -1 HEAD
tree = log --graph --pretty=oneline --abbrev-commit
# 常用命令
git st # 查看状态
git co -b feature # 创建并切换分支
git ci -m "message" # 提交
git lg # 查看漂亮的日志
# 撤销操作
git reset --soft HEAD~1 # 撤销提交，保留修改
git reset --hard HEAD~1 # 完全撤销
git restore file.js # 撤销工作区修改
git restore --staged file.js # 撤销暂存
# 查看历史
git log -p file.js # 查看文件的修改历史
git blame file.js # 查看谁修改了每一行
git show commit-hash # 查看某次提交的详情
五、调试工具实战
5.1 Node.js 调试
// 方法1：console.log（最原始）
console.log('变量值:', variable);
console.log('对象:', JSON.stringify(obj, null, 2));
// 方法2：debugger + Chrome DevTools
// 启动时增加 --inspect 参数
node --inspect app.js
// 方法3：VS Code 调试配置（.vscode/launch.json）
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}/app.js",
"env": {
"NODE_ENV": "development"
}
},
{
"type": "node",
"request": "attach",
"name": "附加到进程",
"port": 9229
},
{
"type": "node",
"request": "launch",
"name": "Jest 测试",
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
"args": ["--runInBand", "--coverage", "false"]
}
]
}
// 方法4：nodemon + 调试
nodemon --inspect app.js
5.2 前端调试技巧
// 1. React DevTools
// 查看组件树、props、state
// 右键组件 → Inspect 跳转到 Elements
// 2. Redux DevTools
// 查看所有 action 和 state 变化
// 时间旅行：回退到之前的某个状态
// 3. Vue DevTools
// 查看组件树、数据、事件
// 4. 性能分析
// React DevTools → Profiler 录制组件渲染
// 5. 网络请求拦截
// 在 Sources → Overrides 中覆盖 API 响应
