乐趣区

前端调试入门

欢迎大家前往腾讯云 + 社区,获取更多腾讯海量技术实践干货哦~
本文由 MarsBoy 发表于云 + 社区专栏

1 控制台
这里的控制台特指 PC 端浏览器进入开发者模式之后新打开的操作界面。常见的控制台有 Chrome 的控制台,Firefox 的 firebug。这些都能帮助我们调试前端问题。本手册将以 Chrome 浏览器控制台为例进行讲解。
下图 1 为 Chrome 浏览器控制台,图 2 为 Firefox 控制台。
图 1 Chrome 浏览器控制台
图 2 Firefox 浏览器控制台
1.1 脚本执行
上图 1 中,点击 tab3 进入“console”Tab 页,即为脚本执行区域。在这里,可以输入任何可执行的 js 代码,回车即可执行并打印返回值。比如:输入“alert(‘hello,world’)”。即可在浏览器弹出弹框,显示‘hello,world’。
1.2 网络请求
上图 1 中,点击 tab5 进入“Network”Tab 页,可以看到当前的所有网络请求,包括 url,请求参数,返回数据,请求 cookie 等详细信息。前面提到的流水号,就可以在这里通过查看具体接口返回值找到。网络请求截图,请见:图 3.
图 3 Network 截图
1.3 cookie
开发者工具中也可以查看 cookie 等本地存储相关数据(包括 localStorage,sessionStorage 等)。Tab6 进入 Application 选项卡,即可查看相关数据,其中就有 Cookie 等详细信息。见图 4 示意。
图 4 cookie 查看截图
2 断点 debug
断点是指 js 代码在运行的过程中,我们需要人为中断执行,并查看此刻的运行时变量等相关信息的一种调试方法。
2.1 如何打断点
以 Chrome 为例,打断点首先需要切换到 Tab4 Source。找到需要打断点的文件和行,在此行之前点击一下即可。然后刷新页面或者执行其他可以让程序运行到断点位置的逻辑 (比如触发一个事件,console 裸调指定方法函数等)。
下图 5 是在一个活动页面对注销逻辑打断点的示意图,图中,我们事先对 login.js 的 913 行打了一个断点,然后点击页面上的注销按钮,程序运行到断点位置暂停。
快捷键:
1)F8,恢复执行并跳到下一个断点
2)F10,恢复执行并跳到下一个运行栈,一般为子函数。
图 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”弹出文件选择对话框进行选择。
点击右下角的保存,代理设置完毕。重新刷新网页,请求即可,这时,指定的网络请求将会直接用本地的文件替代。
图 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。
图 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 相应知识

退出移动版