admin管理员组

文章数量:1558087

一、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

    ![在这里插入图片描述](https://img-blog.csdnimg/532164b41f054fe9908fe73db99b7bdc.png = 400x)

本文标签: 调试工具