前端调试工具

一、Chrome浏览器

• 目标

  • 掌握Chrome浏览器的打开方式
  • 掌握Chrome常用面板的使用方法
  • 了解Chrome其他面板功能

• 打开方式

• 在Chrom菜单中选择更多工具 > 开发者工具

• 在页面元素右键点击，选择“检查”

• 使用快捷键 Ctrl + Shift + i（windows） 或 Cmd + Opt + i（Mac）

元素面板

• 编辑HTML
• 编辑CSS
  
• 源码面板（主要调试js）
  • 调试脚本
  • 查看变量
  • 查看堆栈
  • 其他资源调试

控制台面板

• 查看信息
• 运行脚本
  
  
  
  
  

网络面板

• 查看页面所有资源请求
• 查看单独资源信息
• 过滤和排序资源
  
  
  

其他面板

• 性能面板：记录网站生命周期内发生的各种事件，定位性能问题
• 内存面板：追踪内存泄漏等问题
• 应用面板：应用中的存储信息，如session、cookie，数据库等在此展示
• 安全面板：可以调试混合问题、证书问题等

二、Firefox

• 打开方式

查看器面板

• 编辑HTML
• 编辑CSS
  

调试器面板

• 调试脚本
• 查看变量
• 查看堆栈
  

控制台面板

• 查看信息
• 运行脚本
• 查看堆栈
  
  
  
  
  

网络面板

• 单独查看页面所有资源的网络请求
• 查看单独资源信息
• 过滤和排序资源
  
  

其他面板功能

• 性能面板：记录整个页面执行、渲染的过程，可以看到帧率，js调用树等等
• 内存面板：可以看到哪些对象在使用内存
• 存储面板：整个页面的所有存储信息，如cookie，session和数据库等
• 样式面板：编辑样式并进行存储

三、 IE浏览器

1. 打开方式

• 在菜单中选择工具 > F12开 发人员工具
• 在页面上右键，选择 检查元素
• 使用快捷键F12

2. Dom资源管理器

• 编辑HTML
• 编辑CSS

3. 调试程序

• 调试脚本
• 查看变量
• 查看堆栈

a. 在这个面板上我们能看到所有的资源，选择相应的文件，比如js，双击打开文件

b. 点击“启用优质打印”可变成适合我们阅读的代码

c. 点击行号就可以设置断点，重新刷新页面就会停在断点位置，就可以调试了

4. 控制台

一般配合调试程序面板一起使用

• 查看信息
• 运行代码

5. 网络

• 查看页面所有资源请求

• 查看单独资源信息

• 过滤和排序资源

  点击启动按钮，重新刷新页面，捕获网络请求

  

  双击可以查看具体的网络请求信息，如请求头，body等

  

  可以进行排序，比如点击类型

  可以通过输入框进行筛选

6. 仿真

有时我们需要调不同的IE版本时可能用到这个

• 文档模式
• 显示
• 地理位置

调试分辨率：在调试移动端页面时可能用到

7. 其他功能

• UI响应：
  分析页面帧率和不同类型cpu的使用率，帮助分析UI性能问题
• 探查器：获取页面中js详细性能度量
• 内存：可以诊断可能影响网页速度和稳定性的内存问题

四、移动端调试

目标目标

• 了解移动端调试方式
• 掌握移动端调试方法

调试方式

• 浏览器模拟

  • UA（即移动端设备，如iPhone、iPad等）
  • 屏幕尺寸（分辨率）
    

• Safari
  
  使用数据线将iPhone和mac连接，手机打开浏览器（或app内浏览器），输入网址
  
  
  调试方式和上面介绍的一样，就不赘述了

• Chrome