网页开发人员应掌握高效终端操作：快速打开终端、cd跳转与cd-切换、tree或ls-r查看结构、cp-i/-r复制文件、npm start启动服务、kill-port或lsof解决端口占用、curl-i/-v/>调试api、grep-rn查找代码。
网页开发人员每天都要在终端里切换目录、查看文件结构、复制配置、调试网络请求、快速启动本地服务，这些操作如果全靠鼠标点选或图形界面完成，效率会严重受限。
快速定位并进入项目目录
打开终端后，别从根目录一层层cd进去——这太慢。直接在资源管理器中找到你的项目文件夹，在空白处按住Shift键再右键，选择“在此处打开PowerShell窗口”（Windows）或“在此处打开终端”（macOS/Linux）。【这一步跳过路径输入，避免cd拼错导致Permission denied或No such file】
如果已在终端中，用cd命令快速跳转：cd ~/Desktop/my-web-project → cd src → cd components。连续cd时，用cd -可秒切回上一个工作目录。
一眼看清项目文件树结构
方法一：运行tree命令（需先安装）
macOS：brew install tree
Ubuntu/Debian：sudo apt install tree
Windows（WSL）：sudo apt install tree
方法二：不用安装的替代方案
ls -R | grep ":$" | sed -e 's/:$//' -e 's/[^-][^\/]*\//--/g' -e 's/^/ /' -e 's/-/|/'
这条命令能模拟出简易树形，适合临时查结构，但不支持深度控制和颜色高亮。
执行tree -I 'node_modules|.git|dist' --dirsfirst -L 3后，你立刻看到src下有哪些子目录、components里有几个.vue文件、assets里有没有遗漏的icon.svg——【加-I过滤掉大体积目录，否则tree卡死或输出几千行】
复制静态资源或配置文件
第一步：确认源文件存在且路径正确，例如cp ./config/dev.env.js ./config/prod.env.js
第二步：检查目标位置是否有同名文件，如有则会被覆盖，不可逆
第三步：加上-i参数让系统每次覆盖前询问：cp -i ./config/dev.env.js ./config/prod.env.js
第四步：若要复制整个文件夹及其所有子内容（含隐藏文件），必须加-r参数：cp -r ./src/assets ./dist/assets
启动本地开发服务器
npm start → 自动读取package.json中的scripts.start字段并执行对应命令。
如果start字段是"vite"，就等同于直接运行vite命令；如果是"react-scripts start"，则调用Create React App内置服务。
遇到端口被占用？别急着关全部进程——先用npx kill-port 3000（需全局安装kill-port）或用原生命令：lsof -i :3000 | grep LISTEN | awk '{print $2}' | xargs kill -9（macOS/Linux），Windows用netstat -ano | findstr :3000 → taskkill /PID
实时监控API请求与响应头
方法1：用curl测试接口是否通
curl -I https://api.example.com/v1/users
只看响应头，不下载正文，速度快，能确认HTTP状态码和CORS头是否就位。
方法2：带完整调试信息
curl -v https://api.example.com/v1/users
显示DNS解析、TLS握手、请求发出、响应接收全过程，适合排查连接超时或证书错误。
方法3：保存响应体供后续分析
curl https://api.example.com/v1/users > users.json
这一步操作起来很简单，直接把文件拖进去就行，但注意【>会清空已有文件，>>才是追加，别误删历史数据】。
查找项目中某段JS代码的调用位置
第一步：进入项目根目录
第二步：运行grep -rn "fetch.*login" --include="*.js" --include="*.ts" .
第三步：若结果太多，加-A2（显示匹配行后两行）精确定位上下文
第四步：想排除node_modules？默认已跳过；但若用了--include=*.*又没加-exclude-dir=node_modules，就会卡住，务必补上。
