前端调试方法 | 青训营笔记

江子麟
103 阅读2分钟

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

PC浏览器调试

Element

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

console

console.log console. warn console.error console. debug console. info console.table 具像化的展示JSON和数组数据 console. dir 通过类似文件树的方式展示对象的属性 占位符： 给日志添加样式，可以突出重要的信息 %s:字符串占位符 %o:对象占位符 %c:样式占位符 %d:数字占位符

补充：

  • console.time() ⇒ console.timeEnd() 计算中间花费的时间
  • 控制台中打印出的字符串为灰白色，数字为蓝色

Sources

image.png

debug方法

  1. 在代码内直接添加断点 debugger;
  2. 点击js的行号（类似于IDE内）
  3. 鼠标移入观测值会显示变量的值 （同右侧Watch中）
  4. Scope 查看作用域
  5. Call Stack 查看调用栈
  6. XHR/fetch breakpoints请求断点
  7. DOM breakpoints 渲染断点

代码压缩混淆后如何调试？！

Source Map映射找到源码

NetWork

image.png

Application

存储相关

PerFormance

image.png

Lighthouse

网站性能分析

image.png

移动端H5调试

  1. 真机调试
  2. VConsole调试
  3. 使用代理工具调试 Charles,Fidddler等等

常用开发调试技巧

  1. 线上即使修改的overrides

    1.打开Sources面板下的的Overrides 2.点击Select folders forOverrides。选择一个 本地的空文 件夹目录。 3.允许授权 4.在page中修改代码，修改完成后command + S保存 5.打开devTools,点击右.上角的三个小点-> More tools ->Changes,就能看到所有修改了

    （现代常用热更新）

  2. 利用代理来解决开发时的跨域问题

  3. 启用本地Source Map

  4. 使用代理工具Mock数据

  5. 小黄鸭调试法，终极方法。

avatar
文章
阅读
粉丝