前端必须知道的开发调试知识

【第二届青训营-寒假前端场】- 「前端必须知道的开发调试知识」

最后更新于3年前

这有帮助吗？

前端必须知道的开发调试知识

【第二届青训营-寒假前端场】- 「前端必须知道的开发调试知识」

前端Debug的特点

多平台

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

多环境

本地开发环境、线上环境

多工具

Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole……

多技巧

Console、BreakPoint、sourceMap、代理……

Chorme devTools

Chorme devTools谷歌浏览器自带的调试工具，功能非常之强大，包括现在很多浏览器也采用了这个调试工具，它既可以动态的添加/删除样式并实时的显示出来

强制状态显示

还可以筛选样式

截图

是的没错，可以对节点进行截图，非常的amazing啊（bushi

console

js中的console.log就会记录在这儿，不用多说了吧，想必都用过~

不过有一点需要提及的是，也可以输出带样式的文字方便调试时即时定位，如：

console.log('%s %o,%c%s', 'hello', {name:'我是姓名', age: 18}, 'font-size:20px; color:red; ', 'Welcome to bytedance!');

这里的%s是输出字符串，%o输出对象，%c输出样式（用过c/c++格式化输出的都晓得，不过这里的%c是样式嗷）

console.table可以具象化的展示一个对象数组，非常方便

const persons = [{id:1, name:'张三', age: 18, des: '好耶'},{id:2, name:'李四', age: 24, des: '我是李四'}, {id:3, name:'王五', age: 20, des: '这是什么'}];

树形结构dir

Soure Tab

顾名思义，展示源代码中的内容，可以增加断点、进行单步调试等。

在代码中某行执行 debugger 或打个断点就会在执行到这行的时候暂停，之后就可以继续单步调试了，之后的调试就不做过多介绍了，直接上手试试就能明白。（后端调试多了这个很容易习惯x相当于打了个断点）

压缩后的代码如何调试？SouceMap

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

Perfomance

性能面板，可以生成报告，包括

NetWork

查看网络请求的面板，查看请求头/响应等等。

Application

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

Local Storage
Session Storage
IndexedDB
Web SQL
Cookie

小技巧：点击该面板下的Storage面板中的Clear Site Data就可以清除该网页的本地存储数据，无需打开浏览器设置进行清除。

移动端 H5 调试

真机调试

ios

使用Lightning 数据线将iPhone与Mac相连
iPhone开启Web检查器(设置 -> Safari -> 高级 -> 开启Web检查器)
iPhone使用Safari浏览器打开要调试的页面
Mac打开 Safari浏览器调试(菜单栏 -> 开发 -> iPhone设备名 -> 选择调试页面)
在弹出的Safari Developer Tools中调试

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

Android

使用USB数据线将手机与电脑相连
手机进入开发者模式。勾选USB调试。并允许调试
电脑打开Chrome浏览器，在地址栏输入: chrome://inspect/1devices并勾选Discover USB devices选项
手机允许远程调试，并访问调试页面
电脑点击inspect 按钮8622
进入调试界面

这种方法一般不推荐，直接使用手机扫码查看体验更佳

代理调试

之前使用手机利用fidder改代理抓包，现在也可以使用代理工具在手机上调试前端页面。原理如下：

电脑作为代理服务器
手机通过HTTP代理连接到电脑
手机上的请求都经过代理服务器

改完代理就可以使用手机访问开发环境页面了！其他常用工具如下：

常用开发调试技巧

线上及时修改Override

打开Sources面板下的的Overrides
点击Select folders for Overrides。选择一个本地的空文件夹目录。
允许授权
在page中修改代码，修改完成后保存
打开devTools ，点击右上角的三个小点 -> More tools -> Changes，就能看到所有修改了

记录的非常直观，改完刷新也不会再消失了，还能查看修改了那些地方

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

启用本地source map

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

小黄鸭调试大法！

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

原来是出自这吗233333，这是梳理自己问题逻辑的一个好方法。

总结感想

前端开发的调试也是非常重要的一环，这节课非常详细的讲了PC端谷歌开发者工具的使用和移动端开发的调试，令人受益匪浅。

最后更新于3年前

这有帮助吗？