前端 | 青训营笔记

77 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第8天,是关于《前端必须知道的开发调试知识》的学习。

BUG

    世界上第一个BUG还是1947年9月份在哈佛实验室的故障,起因是一只小虫子。

前端Debug的特点

  1. 多平台
  2. 多环境
  3. 多工具
  4. 多技巧

Chrome DevTools

1.png

控制台的妙用

console.xxx的用法

打印不同数据格式的颜色不同

2.png

代码的压缩

image.png

NEtWork

5.png

Application

6.png

Performance

7.png

Lighthouse

8.png

移动端调试

IOS

  1. 使用Lightning数据线将iPhone 与Mac相连
  2. iPhone开启Web检查器
  3. iPhone使用Safari 浏览器打开要调试的页面
  4. Mac打开Safari浏览器调试(菜单栏>开发iPhone设备名->选择调试页面)
  5. 在弹出的Safari Developer Tools中调试

Android

  1. 使用USE数据线将手机与电脑相连
  2. 手机进入开发者,勾选USB调试,并允许调试
  3. 电脑打开Chrome浏览器,在地址栏输入 chrome://inspect/#devices 并勾选Discov USB devices选项
  4. 手机允许远程调试,并访问调试页面
  5. 电脑点击inspect按钮
  6. 进入调试界面

Node.js 调试

image.png

小黄鸭调试大法

image.png