开发调试知识 ｜ 青训营笔记

安笛
129 阅读6分钟

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

    以下为日常上课笔记，有关于前端开发调试的一些基础内容

  • Bug与Debug

    • Bug的产生

    • 前端Debug的特点

      • 多平台

        • 浏览器

        • Hybrid

        • NodeJs

          • Inspector Protocol + Chrome Devtool

            • 执行命令node --inspect= 8000 index.js

            • chrome浏览器访问服务

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

            • 在node调试面板中使用断点调试

          • Inspector Protocol+ VS Code

            • VS Code点击运行

            • 添加配置

            • 启动调试

            • 添加断点

            • 查看变量、堆栈

        • 小程序

        • 桌面应用

        • 移动端H5调试

          • 真机调试

            • iOS

              • 流程

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

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

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

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

                • 在弹出的Safari Developer Tools中调试

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

            • Android

              • 流程

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

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

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

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

                • 电脑点击inspect按钮

                • 进入调试界面

              • 直接使用手机扫码查看，体验更佳

          • 代理调试

            • 使用代理工具调试

              • 原理

                • 电脑作为代理服务器

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

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

              • 以Charles为例
                默认情况下，Charles 无法抓取到HTTPS的请求，需要安装证书。

                • 安装Charles

                • 查看电脑IP和端口

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

                • Charles允许授权

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

                • 手机访问开发环境页面|

            • #代理工具

          • 常用工具

            • #vConsole

            • #代理工具

              • Charles

                • 适合查看、控制网络请求，分析数据

              • Fiddler

                • 与Charles 类似，适合windows平台

              • spy-debugger

                • 远程调试于机页面，抓包

              • Whistle

                • 基于Node实现的跨平台Web调试代理工具

      • 多环境

        • 本地开发环境

        • 线上环境

      • 多工具

        • Chrome devTools

          • Elements

            • Elements面板

            • 技巧

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

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

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

              • 点击具体的样式值(字号、颜色、宽度高度等)

              • 可以进行编辑，浏览器内容区域实时预览

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

              • 强制激活伪类

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

                • DOM树右键菜单，选择Force State

          • Console

            • Console面板

            • 打印日志
              左侧可以选择等级，对日志进行分类查看。不同等级颜色不同

              • console.log

              • console.warn

              • console.error

              • console.debug

              • console .info

            • console.table

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

            • console.dir

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

            • 占位符
              给日志添加样式，可以突出重要的信息

              • %s

                • 字符串占位符

              • %o

                • 对象占位符

              • %c

                • 样式占位符

              • %d

                • 数字占位符

          • Source

            • Source面板

            • 区域1

              • 页面资源文件目录树

            • 区域2

              • 代码预览区域

            • 区域3

              • Debug工具栏
                从左到右依次为

                • 暂停(继续)

                • 单步跳过

                • 进入函数

                • 跳出函数

                • 单步执行

                • 激活(关闭)所有断点

                • 代码执行异常处自动

            • 区域4:断点调试器

              • Break Point

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

                • 执行到断点处时代码暂停执行

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

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

              • Watch

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

              • Scope

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

              • Call Stack

                • 展开CallStack可以查看当前javaScript代码的调用栈

              • 使用

          • Network

            • 面板

              • 区域1:控制面板

              • 区域2:过滤面板

              • 区域3:概览区域

              • 区域4: Request Table面板

              • 区域5:总结面板

              • 区域6:请求详情面板

          • Application

            • Application面板展示与本地存储相关的信息

              • Local Storage

              • Session Storage

              • IndexedDB

              • Web SQL

              • Cookie

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

          • Performance

            • Performance面板

              • 区域1:控制面板

              • 区域2:概览面板

                • FPS:每秒帧数

                • CPU:处理各个任务花费的时间

                • NET:各个请求花费时间

              • 区域3:线程面板

                • Frames:帧线程

                • Main:主线程，负责执行avascript,解析HTML/CSS，完成绘制

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

              • 区域4:统计面板

            • 使用示例

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

          • Lighthouse

            • 面板

            • 核心Web指标

              • Largest Contentful Paint (LCP)

                • 最大内容绘制，测量加载性能

                • 为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生

              • First Input Delay (FID)

                • 首次输入延迟，测量交互性

                • 为了提供良好的用户体验，页面的FID应为100毫秒或更短

              • Cumulative Layout Shift (CLS)

                • 累积布局偏移，测量视觉稳定性

                • 为了提供良好的用户体验，页面的CLS应保持在0.1.或更少

        • Charles

        • Spy-Debugger

        • Whistle

        • #vConsole

          • 面板

            • 日志(Logs):console. log、info、error. . .

            • 网络(Network): XML HttpRequest,Fetch, sendBeacon

            • 节点(Element): HTML 节点树

            • 存储(Storage): Cookies、Loca 1 storage、Sessionstorage

            • 手动执行JS命令行

            • 自定义插件

      • 多技巧

        • Console

        • BreakPoint

        • sourceMap

          • 压缩后的代码如何调试?

            • 前端代码天生具有“开源"属性，出于安全考虑，JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、'b' 等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?

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

            • 英文，示源码及压缩代码的位置关联

            • 逗号，分隔一行代码中的内容

            • 分号，代表换行

          • source Map标准

          • 思考题:既然Source Map可以映射源码，那压缩后的代码不就又不安全了吗?
            在线出错，访问本地Source Map

          • 启用本地source map

            • 线上不存在Source Map时

            • 可以使用Map Local网络映射功能来访问本地的Source Map文件。

        • 代理

          • 利用代理解决开发阶段的跨域问题

          • 使用代理工具Mock数据

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

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

            • 右键选中第一步的接口， 选择Map Local, Local Path选择第二步的文件。

        • 线上即时修改Overrides

          • 打开Sources面板下的的Overrides

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

          • 允许授权

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

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

        • 小黄鸭调试大法

          • 传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。——《程序员修炼之道》
avatar
文章
阅读
粉丝