为了账号安全,请及时绑定邮箱和手机立即绑定

教程整理01:浏览器开发者工具使用技巧

标签:
前端工具

浏览器开发者工具使用技巧

教程地址:浏览器开发者工具使用技巧


说明

来自慕课网,简短


第1章 课程介绍

  • 前端工作学习工作遇到的问题

    • 图片无法加载
    • 样式不正确
    • JS无法执行
    • 无法调试手机页面
    • 与后台对接出错
  • 课程介绍

    • HTML+CSS错误调试
    • JS错误调试
    • 其他浏览器
  • 学会什么
    • 调试各种前端BUG
    • 模拟不同浏览器
    • toggle device toolbar 模拟移动设备

第2章 使用开发者工具编辑网页样式

略,会


第3章 调试JS代码

3-1 JS调试工具介绍

  • 在Source中调试

3-2 与后台对接错误调试

3-3 事件监听断点

  • 在Source中有Event Listener Breakpoints可以监听页面的事件,然后跳到对应代码部分

3-4 移动端调试工具使用

  • 三个小点 => More Tools => Network Conditions
  • 修改user agent来模拟不同设备,然后刷新页面
  • Toggle device toolbar专门模拟移动设备方便调试

第4章 IE和火狐浏览器

4-1 IE浏览器2

  • IE调试工具有一个屏幕取色器,其他类似
  • 可以对页面进行性能分析
  • 无法模拟移动端

4-2 火狐浏览器

  • 可以性能分析
  • 可以模拟分辨率但是无法模拟设备

第5章 课程总结

  • Chrome 浏览器开发者工具的使用
  • HTML+CSS+JS 代码调试
  • 模拟不同浏览器和移动端设备
  • IE和火狐浏览器的开发者工具
点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
PHP开发工程师
手记
粉丝
2
获赞与收藏
11

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消