阅读 228

【青训营】- 前端必须知道的开发调试知识

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

本文同时参与掘力星计划,赢取创作大礼包,挑战创作激励金

Bug与Debug

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

Bug的产生

QQ截图20211003005208.png

前端Debug的特点

多平台

  • 浏览器、Hybrid、NodeJs、小程序、桌面应用.....

多环境

  • 本地开发环境、线上环境

多工具

  • Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...

多技巧

Console、BreakPoint、SourceMap、代理.....

Chrome DevTools

动态修改元素和样式

QQ截图20211011223056.pngComputed中可以看到最终生效的样式,以及其对应的CSS文件来源 QQ截图20211011223414.png

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

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

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

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

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

可以用以下2种方式强制激活伪类

  • 选中具有伪类的元素,点击:hov
  • DOM树右键菜单,选择Force State

QQ截图20211011224038.png QQ截图20211011224244.png

Console

Console日志面板

  • Console.log

  • Console.warn

  • Console.error

  • Console.debug

  • Console.info

左侧可以选择等级,对日志进行分类查看 QQ截图20211011224748.png

  • Console.table

具象化地展示JSON和数组数据

  • Console.dir可以展示对象中的属性和对应的值
let juejin = document.getElementById('juejin');
undefined
console.dir(juejin);
复制代码

QQ截图20211011225024.png

  • 占位符

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

%s:字符占位符;%o:对象占位符;%c:样式占位符;%d;数字占位符

举例

console.log('%s %o,%c%s','hello',{name:'张三', age: 20}, 'font-size: 24px; color: red', 'hello world!')
复制代码

QQ截图20211011225153.png

Sorce Tab

QQ截图20211011225505.png

Break Point 与 Watch

Break Point 是存放所有调试断点的列表,Watch 则是观察变量值的变化。 QQ截图20211011225732.png

Scope 与 Call Stack

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

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

QQ截图20211011230034.png

压缩后的代码如何调记?

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

Source Map

QQ截图20211011231000.png

Perfomance

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

NetWork

Network面板里面可以看到所有的网络请求信息,进行抓包操作,禁止从cache中加载资源,限制带宽模拟弱网环境等等。选中一项网络请求信息,可以查看该请求的详细信息,比如请求行、请求头、响应行、响应头和响应体等等。直观地看到数据包中的原始内容,从而排除是否是自己网页渲染出了bug。 QQ截图20211011231330.png

Application

Application 应用面板,主要用来查看本地的一些缓存数据,比如 Storage、Cookie、离线缓存、本地数据库等。 QQ截图20211011231633.png

移动端调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 按钮

  • 进入调试界面

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

使用代理工具调试

原理

  • 电脑作为代理服务器

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

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

以 Charles 为例

  • 安装 Charles

  • 查看电脑 IP 和 端口

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

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

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

  • 手机访问开发环境页面

常用工具

QQ截图20211011232903.png

常用调试技巧

线上即时修改Overrides

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

Overrides 使用步骤如下:

  • 打开 Sources 面板下的的 Overrides。

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

  • 允许授权

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

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

启用本地 source map

线上环境的代码是打包压缩的,且没有 source map 文件,排查定位问题不方便,这时可以使用 Charles,配置 Map Local,将线上环境代理到本地,运行本地文件,本地有 source map就能快速定位到问题啦。 QQ截图20211011233417.png

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

小黄鸭调试大法

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

故事来源:《程序员修炼之道》

结语

  • 如以上有错误的地方,请在评论区中指出,谢谢!

小可爱们看完点个赞再走一走~~

文章分类
阅读
文章标签