HTML5教程

学会前端调试技巧,提升排错效率

本文主要是介绍学会前端调试技巧,提升排错效率,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、Bug 与 Debug

我们系统程序的漏洞就叫 bug。世界上第一个 bug ,是 1946 年霍普发现了第一个电脑上的 bug,竟然是一只飞蛾“臭虫”。解决这些问题的过程叫做捉虫、调试,也就是 Debug。

Debug 的特点

  1. 多平台:浏览器、NodeJS、Hybrid、小程序、桌面应用......

  2. 多环境:本地开发环境、线上环境

  3. 多工具:Chrome Devtool、Charles、Spy-Debugger、Whistle、vConsole......

  4. 多技巧:Console、BreakPoint、sourceMap、代理......

二、Chrome Devtool

修改元素和样式——Element面板

修改元素、调试样式,我们常用的就是 Chrome 开发者工具 Element 面板,如下就是该面板的用途:

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

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

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

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

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

https://img2.sycdn.imooc.com/61483e330001a52517261642.jpg

Console面板

输出日志,需要用到 Console 面板,以下是几种 console 常见的用法:

  • console.log:输出信息

  • console.warn:输出警告信息

  • console.error:输出错误信息

  • console.debug:调试信息

  • console.info:console.log 别名,输出信息

  • console.table:将复合类型的数据(JSON、数组)转为表格显示

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

%s: 字符串占位符;%o: 对象占位符; %c:样式占位符;%d:数字占位符。https://img4.sycdn.imooc.com/61483e3400019f9d28761138.jpg

Source Tab

Source 面板,主要可以查看源代码,并且能断点调试,如下是该面板功能介绍:https://img1.sycdn.imooc.com/61483e350001020928681278.jpg

  • 区域1:⻚面资源文件目录树

  • 区域2:代码预览区域

  • 区域3:Debug 工具栏从左到右依次为

    • 暂停(继续)

    • 单步跳过

    • 进入函数

    • 跳出函数

    • 单步执行

    • 激活(关闭)所有断点

    • 代码执行异常处自动断点

  • 区域4:断点调试器

Break Point 与 Watch

Break Point 是存放所有调试断点的列表,Watch 则是观察变量值的变化,如图所示:https://img1.sycdn.imooc.com/61483e360001673a20021276.jpg

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

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

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

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

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

Scope 与 Call Stack

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

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

https://img3.sycdn.imooc.com/61483e360001bdd819881182.jpg

Perfomance

Perfomance 面板,主要用来检测性能问题。平时开发应该很少用到,但遇到页面性能提升瓶颈时,这是个很好的利器,帮助我们快速排查定位出引起性能问题的原因。我们先来看看该面板几个区域的主要功能:https://img4.sycdn.imooc.com/61483e370001426921821702.jpg

  • 区域1:控制面板:录制页面加载/操作、清空、快照/内存捕捉等

  • 区域2:概览面板

    • FPS:帧率,每秒帧数

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

    • NET:各个请求花费时间

    • HEAP:内存消耗记录,包括存在内存未销毁的js变量、文档量、dom节点、事件监听、GPU占用内存等

  • 区域3:线程面板

    • Network:各个请求发生的时间点

    • Frames:帧线程

    • Main:主线程,负责加载、执行JavaScript,解析html、css,生成render树,完成绘制painting(帮助我们理解浏览器的页面渲染原理)

    • Raster:Raster线程,负责完成某个layer或者某些块的绘制

  • 区域5:统计面板

Network

Network 网络面板,是我们开发调试经常用到的,可以查看 xhr/fetch 接口请求、加载的资源(js/css/img/media/font...)。下面是该面板的主要区域:

  • 区域1:控制面板

  • 区域2:过滤面板

  • 区域3:概览区域

  • 区域4:Request Table 面板

  • 区域5:总结面板

  • 区域6:请求详情面板

https://img4.sycdn.imooc.com/61483e37000100ff21801714.jpg我们经常用 Request Table 面板查看接口请求,点开某个请求,就能查看接口详情。其中包含请求头、响应头、请求状态码等。比如一个接口状态码是4xx,属于客户端错误,我们就需要排查自己前端的代码问题;如果状态码是5xx,属于服务器端错误,我们就可以找后端撕逼,协助他们排查解决。

Application

Application 应用面板,主要用来查看本地的一些缓存数据,比如 Storage、Cookie、离线缓存、本地数据库等,如下图所示:https://img4.sycdn.imooc.com/61483e380001af4621901632.jpg

Security

Security 面板,用来查看页面的https证书相关状态,比如安全源信息、https协议的CA证书(颁发机构、有效期、签名算法、公共密钥......)等。https://img4.sycdn.imooc.com/61483e390001045328441578.jpg

三、移动端调试-H5

真机调试

IOS

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

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

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

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

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

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

iPhone

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

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

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

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

  5. 电脑点击 inspect 按钮

  6. 进入调试界面

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

使用代理工具调试

移动端h5开发,需要抓包进行接口调试,这时可以选择代理工具。下面以 Charles 为例:

  1. 安装 Charles

  2. 查看电脑 IP 和 端口

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

  4. Charles 允许授权(默认情况下,Charles 无法抓取https的请求,需要安装证书)

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

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

代理工具的原理:

  • 电脑作为代理服务器

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

  • 手机上的请求都经过代理服务器,电脑自然就抓取到手机上的请求了

常用工具

Charles

Charles:适合查看、控制网络请求,分析数据。https://img4.sycdn.imooc.com/61483e3a0001ff7812940470.jpg

Fiddler

Fiddler:与Charles类似,适合 windows 平台。https://img4.sycdn.imooc.com/61483e3d00019d6708180304.jpg

spy-debugger

spy-debugger: 远程调试手机页面,抓包。https://img1.sycdn.imooc.com/61483e3d0001ee9306260120.jpg

Whistle

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

https://img4.sycdn.imooc.com/61483e3d0001219406160256.jpg

四、常用调试技巧

线上即时修改

我们平时在 Source 面板在线修改调试代码,会实时更新效果,但浏览器一刷新之前修改的全部恢复原样,这样子调试代码效率就很低,只能浏览器调试改点,代码跟着改点很麻烦。为了解决这个问题,我们可以使用 Overrides 保存线上修改后的文件,并能清晰看出改动了哪些地方,最后修改代码也方便。https://img2.sycdn.imooc.com/61483e3d0001be4c21921690.jpgOverrides 使用步骤如下:

  1. 打开 Sources 面板下的的 Overrides。

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

  3. 允许授权

  4. 在 page 中修改代码,修改完成后 command + s 保存。

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

启用本地 source map

线上环境的代码是打包压缩的,且没有 source map 文件,排查定位问题不方便,这时可以使用 Charles,配置 Map Local,将线上环境代理到本地,运行本地文件,本地有 source map就能快速定位到问题啦。https://img4.sycdn.imooc.com/61483e3e0001a20308420746.jpg

小黄鸭调试大法

上述调试技巧都没啥帮助时,我们可以采取终极调试大法——小黄鸭调试大法。
传说中程序大师随身携带一只小黄鸭,在调试代码的时候会在桌上放上这只小黄鸭,然后详细地向鸭子解释每行代码,然后很快就将问题定位修复了。https://img3.sycdn.imooc.com/61483e3e00013af006400449.jpg

五、总结

我们开发写代码,虽然追求高质量编码,但 bug 终究不可避免。当遇到bug排查定位问题时,我们就会用到调试技巧,如下是我做的一些总结:

  • 样式问题排查:使用 Element 面板

  • 接口问题排查:善用 Network 网络面板、Console 日志面板

  • 线上环境问题排查:启用 OverridesCharles 配置 Map Local

  • 移动端问题排查:使用代理抓包工具(CharlesFiddler...)

  • 隐藏深的问题排查:小黄鸭调试大法(一行行挨着读代码,梳理清楚代码逻辑)

欲善其事必先利器,要想提升排错效率,快速解决线上问题,我们就需要用好上述介绍的前端调试工具和技巧。


作者:小铭子
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


这篇关于学会前端调试技巧,提升排错效率的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!