微信中打开h5页面 js错误如何定位到源码报错位置

Question

我们有个微信端的h5网站，最近出现了偶发的少部分用户js报错导致白屏 过一段时间或多次刷新就好了，无法复现

我们尝试在电脑上Chrome，完全复现不了问题。

我们加入了vconsole来捕捉微信页面中的报错，发现报错位置是一个压缩合并后的位置，完全不知道是源代码的哪行报错了

于是我们开启了devtool:sourcemap 但是发现基于js捕捉error的vconsole weinre这一类调试工具都无法访问到map文件的源码错误位置，只有Chrome或者Safari的调试工具点击错误能跳到map文件的源码错误位置

我又尝试ios_webkit_debug_proxy的起代理服务的形式，发现只能捕捉到手机Safari或者UIwebview打开的页面，而微信现在已经是基于WKwebview封装，已经无法捕获到。

不知道还有没有其他方式能定位到源码错误位置，或者使用Chrome来调试微信页面

Answer 1

android 手机，chrome://inspect/ 是可以调试微信网页的，就看你的网页在android下是不是也有同样问题了

Answer 2

浏览器可以利用sourcemap定位到源码的报错位置，那我们用工具也可以啊。

可以参见这篇文章，在线追踪压缩后的JS出错代码，输入sourcemap文件和错误堆栈，这个工具就能输出map后的堆栈信息。