杂记 01：F12、编码识别、Requests 与 Linux 文件命令

原创

于 2026-09-13 21:20:31 发布 · 151 阅读

一、浏览器 F12 开发者工具详解

按 F12 或页面右键【检查】即可打开开发者工具，是前端调试与 Web 渗透的基础利器。

标签	作用	使用场景
元素（Elements） ⭐最常用	查看、临时修改网页 HTML 结构 + CSS 样式	改页面文字、调布局、看 DOM
控制台（Console）	JS 运行窗口，打印日志与报错信息，可直接执行 JS 代码	排查报错、快速测试脚本
源代码（Sources）	查看网页加载的 JS / CSS / 图片等原始文件，支持断点调试	分析前端逻辑、下断点
网络（Network） ⭐渗透常用	监控页面所有请求：接口、图片、AJAX、表单提交	抓接口、看请求参数与响应
性能（Performance）	录制页面运行过程，分析卡顿、加载慢的原因	前端性能优化

Network 面板核心信息：请求 URL、请求方法（GET/POST）、请求头、响应内容、状态码（200 成功 / 404 不存在 / 500 服务器错误）。勾选【保留日志】可防止页面跳转后清空记录。

上半区：DOM 树 —— 网页 HTML 树形结构，html → head → body 层层嵌套，即网页骨架。:before / :after 是 CSS 伪元素，不是真实 HTML 标签。
下半区：样式面板
- 样式：当前选中元素生效的 CSS，可勾选禁用、修改数值实时调试；
- 已计算：查看元素最终生效的真实宽、高、字体、颜色；
- 布局：查看盒模型（margin、border、padding、content 尺寸）。

核心技巧：点击左上角箭头图标（选择元素），再点网页任意内容，可自动定位到对应 DOM 代码。所有修改只作用于本地浏览器显示，不修改服务器原始代码，刷新即恢复，可放心试错。

场景	操作
查看 / 临时修改网页文字	Elements 中找到对应 `<div>`，双击文字直接修改，浏览器立即生效
抓取接口、查看提交数据	Network 中刷新页面，筛选 `Fetch/XHR` 查看前后端接口通信
页面排版错乱，调试 CSS	选中错乱元素，在样式面板修改 width、display、flex、grid 等参数
查找网页报错	切到 Console，红色报错即为 JS 代码问题，逐条排查