前端开发调试技巧 | 青训营笔记

起飞772
142 阅读3分钟

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

前言

前端开发调试工具有利于前端工程师查找相关的代码bug和优化项目代码，在开发中必不可少，是我们学习前端必须要掌握的技巧。

80b9a0614e158d331ea6ff0e1edf896.jpg

一、Web前端的BUG知多少?

i. 什么是BUG

  • 产品说明书中规定要做的事情，而软件没有实现。
  • 产品说明书中规定不要做的事情，而软件确实现了。
  • 产品说明书中没有提到过的事情，而软件确实现了。
  • 产品说明书中没有提到但是必须要做的事情，软件确没有实现。
  • 软件很难理解，很难使用，速度超慢，测试人员站在最终用户的角度看到的问题是平常的但不是正确的。

ii. BUG的产生方式

610218edb1c6904983bd9ced6c5001f.jpg

iii. 前端BUG的特点

  1. 多平台：浏览器，Hybrid,小程序，桌面应用等
  2. 多环境：本地环境，线上环境，测试环境
  3. 多工具：浏览器，开发工具等
  4. 多技巧：console,sorucemap,代理

二、了解常用的Chrome DevTools

Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。

1.Elements面板

在 Elements 面板中可以通过 DOM 树的形式查看所有页面元素，同时也能对这些页面元素进行所见即所得的编辑

  • 点击.cls开启动态修改元素的class image.png
  • 输入字符串可以动态的给元素添加类名
  • 勾选/取消类名可以动态的查看生效效果
  • 点击具体的样式值（字号、颜色、宽度高度等），可以进行编辑，浏览器内容区域实时预览。
  • Computed下点击样式里的箭头可以跳转到styles面板中的css规则。 image.png

2.console面板

  • console.log:输出信息
  • console.warn：警告信息
  • console.error:错误信息
  • console.debug:调试信息

3.Sources中debug的使用

  • 使用关键字debugger或者选择行号可以进行断点调试选择
  • 执行到断点处的代码会停止
  • 展开breakponints列表可以查看断点列表。勾选或者取消可以激活对应断点。
  • 暂停状态下，鼠标hover可以查看变量的值
  • 在调试器右侧watch点击可以对变量进行监控。

4.network工具分布

2d7b2c44ecbdc390397034cea20bb49.jpg

  • 区域1：控制面板
  • 区域2：过滤面版
  • 区域3：概览区域
  • 区域4：request tabal区域
  • 区域5：总结面板
  • 区域6：请求详情面板

5. Performance面板

image.png 区域1：控制面板

区域2：概览面板

  • FPS：每秒的帧数
  • CPU：处理各个任务花费的时间
  • NET：各个请求花费的时间

区域3：线程面板，

  • Frames：帧线程，
  • Main：主线程，负责执行JavaScript，解析HTML/CSS，完成绘制；
  • Raster：Raster线程，负责完成某个layer或者某些块的绘制

区域4：统计面板

6.Application面板

image.png

显示对应的本地储存数据

  • LocalStorage
  • SessionStorage
  • IndexedDB
  • WebSQL
  • Cookie

点击左侧Application下的Stroage面板中的Clear Site Data可以清楚看到网页的本地存储数据

7. lighthouse面板

image.png 审计面板会对页面的加载进行分析，然后给出提高页面性能的建议

总结：以上，是我认为在日常开发中常用的前端调试工具，青训营课程讲的很全，掌握这些是远远不够的，加油，努力就完事啦

image.png
avatar
文章
阅读
粉丝