前端开发调试学习|青训营笔记

KIKI37
92 阅读6分钟

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

一、本堂课重点内容：

5794082b572cde6e0bce7595f6e5226.png

二、详细知识点介绍：

  • Bug与Debug

    • 前端Debug特点

      多平台

      浏览器，Hybrid，NodeJS，小程序，桌面应用等

      多环境

      本地开发环境，线上环境

      多工具

      Chrome devTools，Charles等

      多技巧

      Console，Breakpoint等

  • PC端调试

    浏览器——右击——检查

    • Elements——网页元素和样式

      1、动态修改元素class和样式

      1）点击.cls开启动态修改元素的class

2）输入字符串可以动态的给元素添加类名

3）勾选/取消类名可以动态的查看类名生效效果

4）点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览

5）Computed下点击样式里的箭头可以跳转到styles面板中的css规则

      2、调试伪类（强制激活）

      1）选中具有伪类的元素，点击:hov

2）DOM树右键菜单，选择Force State

      3、搜索想要调试的样式

    • Console——展示日志的界面

      1）console.log——打印一条日志——白色

      2）console warn——打印警告——黄色

      3）console.error——红色

      4）console.debug——蓝色

      5）console.info

      对日志增加样式以及效果（以上五条）

      6）console.table

      具像化的展示JSON和数组数据

      7）console.dir

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

      8）占位符

      给日志添加样式以及效果，以突出重要的信息

      %s：字符串古位符，%O: 对象占位符，%c样式古位符，%d:数字占位符

      左侧可以选择等级，对日志进行分类查看

      注意：不同类型值输出颜色不一样

    • Source Tab
      5bd4739f4f0bc6b938023514b02ae2a.png

      区域1：页面资源文件目录树

      区域2：代码预览区域

      区域3：Debug工具栏

      从左到右依次为

      1）暂停(继续)

2）单步跳过

3）进入函数

4）跳出函数

5）单步执行

6）激活(关闭)所有断点

7）代码执行异常处自动

      区域4：断点调试器

      1）使用关键字debugger或代码预览区域的行号可以设置断点

2）执行到断点处时代码暂停执行

3）展开Breakpoints列表可以查看断点列表，勾选/取消可以激活 / 禁用对应断点

4）暂停状态下，鼠标hover变量可以查看变量的值

5）在调试器Watch右侧点击 + 可以添加对变量的监控，查看该变量的值

      Scope与Call Stack

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

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

      Source Map

      mappings字段存储了源文件和Source Map的映射

1）英文，表示源码及压缩代码的位置关联

2）逗号，分隔一行代码中的内容。

3）分号，代表换行。

    • Network 88b2e8b5b2b53e9311b641cd428129f.png

      区域1：控制面板

      区域2：过滤面板

      区域3：概览区域

      区域4：Request Table面板

      区域5：总结面板

      区域6：请求详情面板

    • Application——与存储相关

      Local Storage

Session Storage

IndexedDB

Web SQL 

Cookie

    • Performance——与性能相关 4745fe1b1d9b2f63a58fdb524cbc27e.png

      区域1：控制面板

      区域2：概览面板

      1）FPS ：每秒帧数

2）CPU：处理各个任务花费的时间

3）NET ：各个请求花费时间

      区域3：线程面板

      1）Frames：帧线程

2）Main：主线程，负责执行Javascript，解析HTMLCSS,完成绘制

3）Raster：Raster线程，负责完成某个layer或者某些块(tile)的绘制

      区域4：统计面板

    • 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相连

2）iPhone开启Web检查器(设置-> Safari ->高级->开启Web检查器)

3）iPhone使用Safari浏览器打开要调试的页面

4）Mac打开Safari 浏览器调试(菜单栏一>开发-> iPhone设备名->选择调试页面)

5）在弹出的Safari Developer Tools中调试

        Android

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

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

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

4）手机允许远程调试，并访问调试页面

5）电脑点击inspect按钮

6）进入调试界面

      • VConsole

        1）日志(Logs)：console.log | linfo | error l ..

        2）网络(Network)：XMLHttpRequest，Fetch，sendBeacon

        3）节点(Element)：HTML节点树

        4）存储(Storage)：Cookies，LocalStorage，SessionStorage

        5）手动执行JS命令行

        6）自定义插件

      • 使用代理工具调试

        原理：

        1）电脑作为代理服务器

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

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

        工具：

        Charles，Fiddler，spy-debugger，Whistle

        以Charles为例：

        1）安装Charles

2）查看电脑IP和端口

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

4）Charles允许授权

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

6）手机访问开发环境页面

        Map Remote Settings：提供远程代理 Map Local：请求重定向到本地文件

        具体方式：

        1）结合浏览器

2）结合VS Code

    • 常用调试方式

      • 线上及时修改

        1）打开Sources 面板下的的Overrides

        2）点击Select folders for Overrides 选择一个本地的空文件夹目录

        3）允许授权

        4）在page中修改代码，修改完成后command+S保存

        5）打开devTools，点击右上角的三个小点 — More tools — Changes，就能看到所有修改了

      • 利用代理解决跨域问题

        本地开发——通过软件代理

        线上——通过配置代理 为什么可以通过代理解决跨域问题

        会跨域是因为不同源，而代理就是想办法让他们同源

      • 启动Source Mao

        线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的SourceMap文件

      • 使用代理工具Mock数据

        1）右键选中要mock数据的接口，选择save response，保存文件到本地。

        2）本地打开保存的文件，编辑想mock的数据并保存。

        3）键选中第步的接口， 选择MapLocal,LocalPath选择第步的文件

三、引用参考：

  • 文章中Source Tab + Network + Performance 图片引用于前端入门 - 工具篇 - 前端开发调试之 PC 端调试 视频
avatar
文章
阅读
粉丝