</>编写 · 调试
Visual Studio Code
轻量代码编辑器。用语言扩展、终端和调试器，把编辑、运行与定位错误放在一个工作区。
terminal — zsh
$ git status --short
working tree clean
</> 写出第一个版本
⌘ 找到问题所在
↗ 和队友协作
从命令到协作，每一步都有工具
08个常用工具入口
04条真实任务路线
01个可带走的命令
01 / 工具索引
认识工具，也认识它的边界。
工具不是越多越好。先选一个能解决眼前问题的，再通过官方资料继续深入。
显示 8 个工具打开官方入口 ↗
git版本 · 协作
Git
分布式版本控制。把改动拆成可追踪的提交，在分支上并行尝试，需要时回到历史版本。
G仓库 · 协作
Gitea
轻量自托管代码平台。浏览仓库、查看提交与发起协作；本组的 Git 入口也在这里。
◉网页 · 调试
Chrome DevTools
浏览器内置开发者工具。检查页面元素与样式、断点调试 JavaScript，或观察网络请求。
↗接口 · 测试
Postman
构造并发送 API 请求。设置方法、地址、参数与请求头，查看响应，再保存成可复用的集合。
≋网络 · 分析
Wireshark
图形化网络协议分析器。读取实时或已保存的数据包，沿着协议层观察网络通信细节。
▰环境 · 运行
Docker
将应用及其依赖打包成镜像，再以容器运行。让项目更容易在不同机器上保持一致。
cURL终端 · 网络
curl
命令行数据传输工具。快速发起 HTTP 请求，检查响应状态与响应头，不必先打开图形界面。
没有找到匹配项。试试“网络”“调试”或“代码”。
02 / 任务路线
遇到问题，先选一条路。
把“我该学哪个软件”换成“我现在要完成什么”。展开一项，看看一条可演示的起点。
方法提示先观察现象，再缩小范围，最后用最小改动验证猜想。工具帮助你看见证据，判断仍然需要你自己完成。
01网页显示不对从元素、样式到请求逐层检查
先在浏览器定位页面元素，查看实际应用的 CSS；如果内容没加载出来，再到 Network 面板检查请求状态。
Chrome DevTools→Elements→Network
02接口返回异常把请求和响应单独拿出来观察
确认请求方法、地址、参数和请求头，再比较状态码与响应正文。用一个最小请求复现问题，避免前端页面和接口问题混在一起。
Postman→检查请求→对照响应
03队友的版本不一样先追踪改动，再复现运行环境
用 Git 查看每次提交和分支差异；若代码一致但运行结果不同，再检查依赖与环境，并考虑用容器固定运行条件。
Git→比较提交→Docker
04网络请求去了哪里从快速探测到协议细节
先用 curl 快速查看目标的 HTTP 响应；需要理解主机之间实际交换了什么数据时，再使用 Wireshark 分析捕获的数据包。
curl→响应状态→Wireshark
03 / 现场试一试
一条命令，先看见服务器怎么回答。
curl 可以从终端发起 HTTP 请求。下面这条命令只读取公开网页的响应头，适合现场说明“请求发出后，状态码和服务器信息在哪里”。
演示命令 · macOS / Linux / Windows PowerShell
$ curl -I https://example.com
-I 只请求响应头。你可以观察 HTTP 状态行、内容类型和服务器返回的其他头信息。
描述现象
把“坏了”变成可观察的现象：哪一步、什么输入、出现什么结果。
收集证据
选择能看见相关信息的工具，记录请求、日志、提交或数据包。
验证猜想
只改一个变量，再跑一次相同步骤。结果可复现，结论才站得稳。