欢迎大家前往腾讯云 + 社区，获取更多腾讯海量技术实践干货哦~
本文由 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 相应知识