前端开发调试指北| 青训营笔记

给我一杯泰绿魔法药水
111 阅读5分钟

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

chrome devtool

element

动态修改元素和样式

  • 点击.cls开启动态修改/添加元素的class

image.png

  • 输入字符串可以动态的给元素添加类名
  • 勾选/取消/元素类名可以动态的查看类名生效效果
  • 调试伪类样式的方法

image.png

  • 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑,浏览器内容区域实时预览
  • computer下点击样式里的箭头可以跳转到styles画板中的css规则

image.png

console

展示日志

  • log

    • 灰白色
    • 打印带样式的log

  • warn

    • 黄色

  • error

    • 红色

  • debug

    • 蓝色

  • info

  • table（具象化JSON和数组数据）

  • dir（通过类似文件树的方式展示对象属性）

  • 占位符

    给日志添加样式,可以突出重要的信息

    %s:字符串占位符:%0:对象占位符; %c:样式占位符:%d:数字占位符 字符串返回日志的颜色是白色，数字返回字符串的颜色是其他颜色

  • time

Source

展示项目源代码

image.png

1、页面资源文件目录树

2、代码预览区

3、debug工具栏

  • 暂停
  • 单步跳过
  • 进入函数
  • 跳出函数
  • 单步执行
  • 关闭所有断点
  • 代码执行异常处自动

4、断点调试器

image.png

展开Scope 可以查看作用域列表(包含闭包)

展开Call Stack可以查看当前 javaScript代码的调用栈

image.png

5、压缩后的代码如何调试

使用webpack/uglifyjs/terser用sourcemap阅读

  • source map

6、source map

mappings 字段存储了源文件和 Source Map的映射*英文,表示源码及压缩代码的位置关联逗号,分隔一行代码中的内容。分号,代表换行。

映射见:

www.murzwin.com/base64vlq.h…

思考题:既然Source Map可以映射源码,那压缩后的代码带上Source Map上线不就又不安全了吗?

把source map上传到监控平台，把不带source map的上线

有错误的话再去对照监控平台的行

开启和关闭sourcemap用web pack

network

waterfall这里表示的是并行的执行

第一个执行完了才执行第二个是串行执行

NO throttling

模拟弱网环境：站点运行在网络差的地方，使用slow 3g模拟弱网环境

定位前后端问题，通过接口查看后端返回的结果

返回结果有问题是后端的问题

image.png

区域1:控制面板

区域2:概览面板

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

区域3:线程面板

  • Frames:帧线程
  • Main:主线程,负责执行Javascript, 解析HTML/CSs,完成绘制
  • Raster: Raster线程,负责完成某个layer或者某些块(tile)的绘制。

区域4:统计面板

页面卡顿->查看FPS指标->寻找性能瓶颈->优化代码

fps低于六十，页面的动画效果会丢帧或卡顿

Offsettop浏览器重排，重排会造成浏览器的卡顿

offsettop优化

image.png

提前读取，用存储的变量判断，就不会重新渲染，页面就明显性能提升

Lighthouse

衡量WEB核心性能指标

  • Largest Contentful Paint (LCP) :最大内容绘制,测量加载性能。为了提供良好的用户体验, LCP应在页面首次开始加载后的2.5秒内发生。

  • First Input Delay (FID) :首次输入延迟,测量交互性。为了提供良好的用户体验,页面的FID应为100毫秒或更短。

  • Cumulative Layout Shift (CLS) :累积布局偏移,测量视觉稳定性。为了提供良好的用户体验,页面的CLS应保持在0.1.或更少。

移动端调试

真机调试

iOS

1.使用Lightning数据线将iPhone与 Mac相连

  1. iPhone开启Web检查器(设置-> Safari ->高级->开启Web检查器)
  1. iPhone使用Safari 浏览器打开要调试的页面
  2. Mac打开 Safari 浏览器调试(菜单栏->开发 ->iPhone设备名->选择调试页面)

  1. 在弹出的Safari Developer Tools 中调试

    没有iPhone 设备可以在 Mac App Store安装 Xcode 使用其内置的 iOS 模拟器

Android

1.使用USB数据线将手机与电脑相连

2.手机进入开发者模式,勾选USB调试,并允许调试

3.电脑打开Chrome浏览器,在地址栏输入: chrome://inspect/#devices #选 Discover USB devices 选项

4.手机允许远程调试,并访问调试页面

5.电脑点击inspect按钮

6.进入调试界面

使用代理工具调试

原理:

电脑作为代理服务器

手机通过HTTP代理连接到电脑

手机上的请求都经过代理服务器营

以Charles为例:

  1. 安装Charles

2.查看电脑IP和端口

3.将IP、端口号填入手机HTTP代理

  1. Charles 允许授权

5.使用SwitchHosts! 软件给Mac电脑配Hosts

6手机访问开发环境页面

Nodejs调试

Inspector Protocol + Chrome Devtool

  1. 执行命令 node--inspect=8888 index.js

2、\2. chrome 浏览器访问服务

3、点击绿色node图标打开node调试面板(在子chrome://inspect/#devices P配置network target)

4、 在node调试面板中使用断点调试

常用技巧

线上修改overrides

1.打开Sources面板下的的 Overrides

  1. 点击Select folders for Overrides。选择一个本地的空文件夹目录。
  2. 允许授权
  1. 在page中修改代码,修改完成 后command + s 保存

5.打开devTools,点击右上角的 三个小点 -> More tools ->Changes,就能看到所有修改了

  • 利用代理解决开发阶段的跨域问题
  • 使用代理工具Mock数据
avatar
文章
阅读
粉丝