调试 ｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

1. 前端debug 特点

   • 多平台 浏览器 hybrid node 小程序 桌面应用
   • 多工具 本地和线上环境
   • 多环境 chrome devtools Charles whistle
   • 多技巧 console breakpoint sourcemap

2. devtools

3. .cls 动态添加删除类名

4. console log info warn error

5. console.table 以表格展示json和数组

6. console.dir 文件数的方式展示对象的属性

7. %s 字符串 %o 对象 %c 样式 %d 数字

8. $0 代表选中的dom, $1代表上一个.....

9. sourcemap 压缩源码的映射

10. 更多 fps面板

11. 右键节点截图

12. 红色的三角说明有性能瓶颈

13. 获取offset会重排

14. lighthouse

    • lcp 最大内容绘制, 测量加载性能
    • fid: 首次输入延迟, 测量交互性
    • cls 累积布局偏移 测量视觉稳定性

15. 真机调试

16. vconsole

17. chaerles

18. node使用nodeinspect

19. override 可以保存修改的样式

20. 使用代理解决跨域问题

21. 使用maplocal代理本地文件

22. copy() 使用copy()copyconsole中能拿到的资源

23. 可以右键存储为全局变量

24. 堆栈错误信息可以保存成文本的

25. CTRL P 命令面板

26. 代码片段 !选择运行

27. $ document.querySelector

28. ? document.querySelectorAll 返回数组

29. $_引用上一次执行的结果

30. $i 可以引入npm库

31. console本身是异步的, 可以直接使用await

32. custom formatters

33. queryObjects monitor对象和事件

34. console.assert 在第一个值为false的时候打印后面的信息

35. 打印多个值可以用大括号括起来, 展示各个值对应的变量

36. 命令菜单打开log时间轴

37. console.time() timeend() 参数表示标签

38. 眼睛实时表达式, 会不断更新

39. 可以折叠网络请求时间轴

40. 按 h隐藏元素

41. CTRL 可以移动元素

42. 样式最后的加号可以快速添加样式

43. drawer面板有很多其他功能

44. workspace 同步修改源码