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

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

说明

来自慕课网，简短

第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和火狐浏览器的开发者工具