前言
在PC前端线上缺陷的修复过程中，一般包含几个步骤，缺陷问题复现、原因定位、设计解决方案。其中，由于权限、客户端环境等差异，部分缺陷复现成本高，即使复现了，当前用户的缺陷问题的现场信息难以被有效记录和识别出来，事后再来排查缺陷问题，开发成本和沟通成本都很高。
行业中已有的一些解决方案
Fundebug是一种用于事后分析缺陷问题场景信息以定位bug原因的工具，主要特点是能够主动收集比较全面的缺陷问题场景信息，包括用户行为记录甚至屏幕录制，但受限于技术实现，首先只有页面出现了JS Error的情况下才能触发缺陷现场记录，要知道，缺陷并不等于JS Error，并且其屏幕录制实现是基于DOM监听变化和还原技术，只能大概还原问题现场UI。
Vorlon.JS是一款SAAS产品，提供远程JS调试功能，和Fundebug一样，需要先接入SDK，提供了模拟Devtools的Network和Console面板供开发者使用，但毕竟不是原生的，使用上并不是很方便，功能也不够全面。 这里要介绍的一种方案是使用Chrome DevTools协议的远程调试技术，啄木鸟远程调试套件，它能够支持网站开发者对网站用户的Chrome浏览器进行远程调试。因其使用了前端开发者非常熟悉的内置Devtools，使用起来就像在本地调试网页一样便利。
啄木鸟远程调试套件
使用它进行远程调试需要配合Chrome插件和Proxy服务使用，如果想要进一步了解其原理，可以移步啄木鸟远程调试套件。
使用方法：
- 用户在Chrome浏览器安装woodpecker-remote插件，打开任意网页【如www.google.com】, 点击插件图标“
”，此时如果浏览器显示【“Woodpecker Remote”已开始调试此浏览器】就表示浏览器开启远程调试成功。插件会自动生成秘钥并复制到剪贴板，用户只需要将剪贴板的调试id秘钥【如_1b6d7893-87c3-4d22-9abd-9c936235d83e_】发送给开发者即可。
- 开发者打开新页面，使用该调试id秘钥，在新打开的chrome标签页输入Devtools开发者工具网址【devtools://devtools/bundled/inspector.html?ws=[Proxy网址]/devtools/page/[调试id秘钥]】进行调试。目前已在线上部署了Proxy服务，[Proxy网址]为_ws-devtools.df.r.appspot.com_，因此只需输入_devtools://devtools/bundled/inspector.html?ws=ws-devtools.df.r.appspot.com/devtools/page/[调试id秘钥]_即可开启调试。
使用效果演示
优势和限制
- 因只传输当前网页的调试数据，比起使用传统的桌面远程连接要快很多倍。比起本地调试网页可能会受网络速度原因显示信息有所延迟，因为调试JSON数据是通过websocket在开发者和网站用户之间经Proxy服务转发。
- 由于使用的是Chrome自家的协议，只支持Chrome调试。
- Proxy服务已部署到Google Cloud Platform，因google域名被墙，网站用户需要能够访问google域名才可使用。
