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)
本文标签: 调试工具
版权声明:本文标题:前端调试工具 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1727375147a1111615.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论