前端调试入门

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~

本文由MarsBoy发表于云+社区专栏

1 控制台

这里的控制台特指PC端浏览器进入开发者模式之后新打开的操作界面。常见的控制台有Chrome的控制台,Firefox的firebug。这些都能帮助我们调试前端问题。本手册将以Chrome浏览器控制台为例进行讲解。

下图1为Chrome浏览器控制台,图2为Firefox控制台。

img图1 Chrome浏览器控制台

img图 2 Firefox浏览器控制台

1.1脚本执行

上图1中,点击tab3 进入“console”Tab页,即为脚本执行区域。在这里,可以输入任何可执行的js代码,回车即可执行并打印返回值。比如:输入“alert('hello,world')”。即可在浏览器弹出弹框,显示‘hello,world’。

1.2网络请求

上图1中,点击tab5进入“Network”Tab页,可以看到当前的所有网络请求,包括url,请求参数,返回数据,请求cookie等详细信息。前面提到的流水号,就可以在这里通过查看具体接口返回值找到。网络请求截图,请见:图3.

img图3 Network截图

1.3 cookie

开发者工具中也可以查看cookie等本地存储相关数据(包括localStorage,sessionStorage等)。Tab6进入Application选项卡,即可查看相关数据,其中就有Cookie等详细信息。见图4示意。

img图4 cookie查看截图

2 断点debug

断点是指js代码在运行的过程中,我们需要人为中断执行,并查看此刻的运行时变量等相关信息的一种调试方法。

2.1如何打断点

以Chrome为例,打断点首先需要切换到Tab4 Source。找到需要打断点的文件和行,在此行之前点击一下即可。然后刷新页面或者执行其他可以让程序运行到断点位置的逻辑(比如触发一个事件,console裸调指定方法函数等)。

下图5是在一个活动页面对注销逻辑打断点的示意图,图中,我们事先对login.js的913行打了一个断点,然后点击页面上的注销按钮,程序运行到断点位置暂停。

快捷键:

1) F8,恢复执行并跳到下一个断点

2) F10,恢复执行并跳到下一个运行栈,一般为子函数。

img图5 打断点示意图

2.2 如何查看运行时变量

我们打断点是为了调查问题,程序运行到断点位置,可以直接鼠标移动到相关变量名或者方法上面查看它的值。如果想在运行到断点位置执行其它逻辑,可以直接在console区域运行相关脚本。

3代理

前端代理是指用本地文件替换网络文件的一个动作,代理可以用来调试问题。比如在本地文件中加上alert弹框弹出关键节点的信息,这可以有利于调试。特别是前端调试。或者当我们发现网络文件有问题的时候,需要修复问题,就可以本地改文件,然后代理,这样访问指定页面就可以看到修改后的效果。

3.1常规代理

常规代理指http代理,即代理http协议的各种网络请求。代理需要用到第三方代理工具:Windows上推荐用Fiddler,Mac上推荐用Charles。

下面以Fiddler为例,介绍如何使用Fiddler进行常规代理。

1.首先下载Fiddler,并安装。Fiddler实质上是一款基于网络抓包的Web Debuger工具。

2.打开Fiddler,点击右侧的AutoResponder的Tab页,勾选图6所示的几个选项。

3.在左侧网络列表中选择自己需要代理的请求,拖拽到右侧,进入下面的Rule Editor。

在Rule Editor中把下面的输入框中的值设为本地文件,可以通过下拉选择“Find a File”弹出文件选择对话框进行选择。

点击右下角的保存,代理设置完毕。重新刷新网页,请求即可,这时,指定的网络请求将会直接用本地的文件替代。

img图6 Fiddler代理配置示意

3.2 https代理

https是采用了SSL加密服务的Http协议,客户端与服务器间的通信是加密传输的,Fiddler如果需要做中间人,就必须拥有被代理域名的证书,可以解密远端数据,并且通过自己的证书传给浏览器。

下面介绍如何配置https代理,可以参照图7.

1.打开Fiddler,一次进入菜单:ToolsàFiddler Options àHTTPS

2.勾选“Captrue HTTPS CONNECTs”,

3.勾选“Decrypt HTTPS traffic”,选择“from all process”

4.勾选“Ignore server certificate errors”

5.点击右边“Actions”按钮,选择“Trust Root Certificate”选项,选择Yes安装证书。

至此,Https代理已经配置完毕,如果要进行代理,剩下的步骤可以参照3.1。

img图7 HTTPS代理配置示意

3.3手机代理

移动端请求如何代理,这块也可以通过Fiddler完成。按照以下步骤完成设置:

保证手机和电脑上的Fiddler在同一个网段(连接同一个Wifi,比如LabWifi)。

1.打开Fiddler,进入ToolsàFiddler OptionsàConnections

2.设置Port为一个固定数字,比如8888

3.勾选:“Allow remote computers to connect”

4.勾选:“Reuse client connections“

5.勾选:“Reuse server connections“

6.设置手机wifi代理到PC的ip地址,并且端口设置为上面的固定数字,比如8888。

此时完成设置,手机上的http请求也可以用fiddler抓取了。

注:如果要进行手机上的https抓包,需要在以上步骤完成之后,手机访问PC的ip:port(和fiddler上设置的port保持一致),获取证书并安装之后才可以。

4移动端debug技巧

移动端调试指在安卓机/iphone/ipad等手持设备上调试前端页面逻辑的概念。这里将针对几种典型的情况给出最合适的debug方法。

4.1 安卓 微信/手Q/QQ浏览器/腾讯产品APP

这几种情况都有一个共性,就是app是腾讯的产品,而且在安卓手机上,我们知道安卓支持连接数据线结合Chrome内核的调试器进行inspector调试,故这几类情况我们将推荐使用TBS Studio进行调试。

TBS Studio是QQ浏览器X5内核前端调试平台,支持断点调试,抓取网络请求,查看DOM结构,console控制台等,功能非常丰富。电脑上安装TBS studio之后,就可以将手机通过数据线连接到电脑,然后通过TBS Studio进行调试。

具体的操作方法见 https://x5.tencent.com/

4.2安卓其它环境/ios环境

安卓其它环境下,或者ios环境下调试前端问题很难进行断点调试,只能采用最原始的打log,即alert弹框。这种环境下我们需要借助fiddler结合手机进行代理文件,并在代理的js文件中按需打alert。

相关阅读
【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识

此文已由作者授权腾讯云+社区发布,更多原文请点击

搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!

海量技术实践经验,尽在云加社区


腾讯云技术社区
最专业的云解读社区
21.6k 声望
17.3k 粉丝
0 条评论
推荐阅读
“GPT们”背后,谁来支撑大模型训练需要的极致算力?
近期大量 AIGC 产品横空出世,可以聊天、写代码、解答难题、写小说,饱受热捧。其技术基座大模型的给力支持,往往伴随着大规模、长时间的 GPU 集群训练任务。这对网络互联底座的性能、可靠性、成本等各方面都提出...

腾讯云开发者

程序员英语学习指南
动机为什么程序员要学习英语?工作:我们每天接触的代码都是英文的、包括很多技术文档也是英文的学习:最新最前沿的技术最开始都是只有English版本就业:学好英语让你的就业范围扩大到全球,而不只限于国内目标读...

九旬6阅读 636

安卓逆向之破解某成人APP播放次数限制
某成人水果APP非VIP用户存在播放次数限制,每天只能播放3次。超过3次需要购买VIP。 由于过于贫穷,于是抽空,对其安卓APP进行了逆向分析,最终成功破解了其播放次数限制。

悖论3阅读 1.3k评论 3

封面图
一文教会你mock(Mockito和PowerMock双剑合璧)
Mock有模仿、伪造的含义。Mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法。mock工具使用范畴:

京东云开发者2阅读 533评论 1

封面图
这一次,解决Flutter Dialog的各种痛点!
4.0版本做了重大调整,迁移请参照: SmartDialog 3.x 迁移 4.0本文内容已更新,文中内容及其代码皆为4.0用法前言Q:你一生中闻过最臭的东西,是什么?A:我那早已腐烂的梦。兄弟萌!!!我又来了!这次,我能自信...

小呆呆6661阅读 3.4k

封面图
uni-app中安卓包检查更新、新版本下载、下载进度条显示功能实现
如果想要做一个app的话,可以有很多种选择方案,uni-app是其中的一个性价比高一些(坑多一些)的方案。本文记录一下,uni-app打安卓包以后,需要检查并下载更新,且显示进度条的功能。

水冗水孚2阅读 743

Flutter 让你的Dialog脱胎换骨吧!(Attach,Dialog,Loading,Toast)
4.0版本做了重大调整,迁移请参照: SmartDialog 3.x 迁移 4.0本文内容已更新,文中内容及其代码皆为4.0用法前言Q:你一生中闻过最臭的东西,是什么?A:我那早已腐烂的梦。兄弟萌!!!我又来了!这次,我能自信...

小呆呆6662阅读 2.3k

封面图
21.6k 声望
17.3k 粉丝
宣传栏