这是我参与「第四届青训营 」笔记创作活动的的第7天

前端bug的特点

• 多平台
• 多环境
• 多工具
• 多技巧

chrome devtools

• 动态修改元素和样式
• console
• sorce tab
  break point & watch
  scope & call stack
  source map
• network
• application
• performance
• lighthouse

移动端H5调试

真机调试

• IOS
  1.使用数据线将iPhone与Mac相连
  2.iPhone开启Web检查器（设置→Safari→高级→开启Web检查器）
  3.iPhone使用Safari浏览器打开要调试的页面
  4.Mac打开Safari浏览器调试（菜单栏→开发→iPhone设备名→选择调试页面）
  5.在弹出的Safari Developer Tools中调试
• Android
  1.使用USB数据线将手机与电脑相连
  2.手机进入开发者模式，勾选USB调试，并允许调试
  3.电脑打开Chrome浏览器，在地址栏输入：chrome:/inspect/#devices 并勾选Discover USB devices选项
  4.手机允许远程调试，并访问调试页
  5.电脑点击inspect按钮
  6.进入调试界面

VConsole

使用代理工具调试

NodeJS调试

• Inspector Protocol + Chrome Devtool
• Inspector Protocol + VS Code

常用开发调试技巧

• 线上即时修改Overrides
  1.打开Sources面板下的的Overrides
  2.点击Select folders forOverrides。选择一个本地的空文件夹目录。
  3.允许授权
  4.在page中修改代码，修改完成后command+s保存
  5.打开devTools，点击右上角的三个小点→More tools→Changes，就能看到所有修改了
• 利用代理解决开发阶段的跨域问题
• 启用本地source map
• 使用代理工具mock数据
• 小黄鸭调试

在html中文网中了解到7个有用的前端调试工具

• Web浏览器中的开发工具
• Postman
• CSS Lint
• JSON Formatter & Validator
• Sentry
• JSHint
• BrowserStack

本文内容来源于html中文网7个值得收藏的前端调试工具和今日课程《前端必须知道的开发调试知识》