F12调试技巧

开发者工具F12使用技巧

基本模块

浏览器开发者工具（F12）是前端开发、调试和性能优化的利器，除了控制台（Console）外，还有大量实用技巧。以下是 最常用的功能 和 高效用法，涵盖 Elements、Network、Sources、Performance 等核心面板：

一、Elements（元素）面板

  1. 实时编辑 DOM 和样式
    • 直接双击 HTML 元素修改内容，或右键选择 Edit as HTML 批量修改。
    • 在 Styles 面板中动态调整 CSS，支持自动补全（如 px、%、rgba()）。
    • 快捷键：Ctrl + Shift + C（Windows）或 Cmd + Shift + C（Mac）快速选中页面元素。
  2. 强制元素状态
    • 在 Styles 面板点击 :hov 按钮，强制触发元素的 :hover、:active、:focus 等状态，无需实际交互。
  3. 快速搜索 DOM
    • 按 Ctrl + F 在 Elements 面板内搜索元素（支持文本、类名、XPath 等）。

二、Network（网络）面板

作用：记录所有与服务端交互的网络请求

抓包

  1. 打开开发者工具：

    • 按 F12 键或 Ctrl+Shift+I (Windows/Linux)
    • 或 Cmd+Opt+I (Mac)
    • 或右键页面选择"检查(Inspect)"

  2. 切换到Network(网络)面板：

    • 这里会显示所有网络请求

  3. 触发页面调整：

    • 手动调整浏览器窗口大小
    • 滚动页面
    • 或执行其他会触发请求的界面操作

  4. 查看捕获的请求：

    • 请求会实时显示在Network面板中

过滤特定类型请求

在Network面板中可以使用以下过滤方法：

  1. 按请求类型过滤：

    • XHR/Fetch：AJAX请求
    • JS：JavaScript文件
    • CSS：样式表
    • Img：图片
    • Media：多媒体文件
    • Doc：文档

  2. 使用筛选框：

    • 在过滤器输入框中输入关键词，如"resize"、"scroll"等

  3. 按状态码过滤：

    • 如status-code:200只显示成功请求

三、Sources（源代码）面板

  1. 断点调试 JavaScript
    • 在代码行号处点击设置断点，或使用 debugger 语句。
    • 结合 Call Stack（调用栈）、Scope（作用域变量）排查逻辑错误。
  2. 本地文件映射
    • 右键代码 → Add folder to workspace，将页面文件映射到本地项目，直接保存修改到磁盘。
  3. Snippets（代码片段）
    • 在 Snippets 标签中保存常用代码片段，随时执行（如注入工具函数、模拟数据）。

四、Application（应用）面板

  1. 管理存储数据
    • 查看/编辑 LocalStorage、SessionStorage、Cookies。
    • 手动清除数据或模拟不同用户状态。
  2. 调试 Service Worker
    • 在 Service Workers 标签中注册、更新或卸载 PWA 的 Service Worker。

五、Performance（性能）面板

  1. 录制页面性能
    • 点击 Record 后操作页面，生成火焰图分析加载、渲染、脚本执行耗时。
    • 重点关注 Long Tasks（阻塞主线程的任务）和 FPS（帧率）。
  2. 内存泄漏排查
    • 使用 Memory 标签拍摄堆快照（Heap Snapshot），对比前后差异找到未被释放的对象。

六、Security（安全）面板

  • 检查 HTTPS 证书问题或混合内容警告（Mixed Content）。

使用技巧

网络模块

  1. 监控所有网络请求
    • 查看请求详情（Headers、Payload、Response、Timing），尤其对调试 API 接口至关重要。
    • 过滤请求类型（XHR、JS、CSS、Img 等）或按关键字搜索。
  2. 禁用缓存：勾选 Disable cache，确保每次刷新都加载最新资源（开发时必选！）。
  3. 保留请求日志：勾选"Preserve log"选项，防止页面跳转时请求记录被清除.
  4. 重放请求：这个在调试后端接口的时候很有用！
  5. 模拟慢速网络
    • 点击 Throttling 选择 Slow 3G 等预设，或自定义限速，测试页面在弱网下的表现。
  6. 复制请求为代码
    • 右键请求 → Copy → Copy as cURL，直接粘贴到终端重放请求，或转换为 fetch、axios 代码。

控制台模块

性能分析：使用Performance面板记录页面调整时的性能数据

过滤图片：F12把下面的代码放到控制台执行，图片就去掉了

Array.from(document.getElementsByTagName("img")).forEach(lll => {
lll.parentNode.removeChild(lll)
})

编辑页面/复制文本：控制台输入document.designMode="on"

其他

  1. 快捷键
    • Ctrl + Shift + P（Windows）或 Cmd + Shift + P（Mac）打开命令菜单，输入命令快速操作（如截图、切换主题）。
      • 输入 >dark 切换暗黑主题，>screenshot 捕获全屏。
  2. 跨设备调试
    • 点击 Toggle device toolbar（Ctrl + Shift + M）模拟手机视图，调试响应式设计。
    • 通过 Remote Debugging 连接真实移动设备（需 USB 调试模式）。
  3. 覆盖 User-Agent
    • 在 Network Conditions 中自定义 User-Agent，模拟不同浏览器或爬虫访问。
  4. F12禁用：
    1. 浏览器右上角的三个点：更多工具：开发者工具
    2. 在其他地方先把控制台打开，然后输入location.href = "你要跳转的URL"直接进行页面跳转
posted @ 2025-05-05 12:20  月朗星希  阅读(506)  评论(0)    收藏  举报