在我们在进行移动端开发时经常会碰到页面错误无法定位的问题，特别是在APP中。因为移动端的开发无法像 pc 端开发一样使用 Chrome 的开发者调试工具，所以调试移动端需要一些额外的技巧。下面小邹为大家介绍几种方法，希望能帮助大家：

远程调试（Remote Debugging）

远程调试就是通过 USB 连接、端口转发、搭建代理等方式，将一个设备的 web 页面映射到另一个设备上，比如将手机的 webview 映射到 pc 上，达到调试的目的。

移动端 web 应用调试难题从一开始就有，不过后来浏览器厂商基本都推出自己的远程调试工具来解决这个问题，包括 OperaMobile、 iOSSafari、 ChromeforAndroid、UC 浏览器等，另外还有一些第三方开发的远程调试工具，比如 weinre(http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/) 等。

以 Android 为例，可以将 webview、 ChromeforAndroid 中的页面映射到 pc 端的 ChromeDevTools，然后就可以在 pc 端调试移动端的页面了。

可以参考小邹的博客：移动端Web开发调试之Chrome远程调试(Remote Debugging)(https://blog.csdn.net/itKingOne/article/details/83782198)。这个可能需要翻墙！

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板（ chrome 开发者工具的便利实现）。

这个是内嵌的页面当中的便捷调试器，基本上能够满足一般的需要远程调试的页面。

• github：https://github.com/Tencent/vConsole
• demo：https://wechatfe.github.io/vconsole/demo.html

TBS Studio

因为微信浏览器是定制的浏览器，一般的远程调试方式都不可用，需要配合特定的工具，如微信开发者工具。

TBS Studio(https://x5.tencent.com/tbs/guide.html) 是另一个可以像 Chrome 一样调试远程微信浏览器页面的强大工具。

可以参考：

• tbs studio - 腾讯浏览服务-调试工具(https://x5.tencent.com/tbs/guide/debug/season1.html)
• TBS Studio(https://x5.tencent.com/tbs/guide.html)

8. 页面 js 脚本错误异常监控

当用户在用线上的程序时，怎么知道有没有出 bug；如果出 bug 了，报的是什么错；如果是 js 报错，怎么知道是那一行运行出了错？

所以，在程序运行时捕捉 js 脚本错误，并上报到服务器，是非常有必要的。

这里就要用到 window.onerror 了，当然vue或者react都有相应的异常捕获钩子函数，对于跨域加载的远程脚本需要script标签上添加crossorigin=”anonymous，并且服务器添加Access-Control-Allow-Origin设为*，一般的CDN网站都会将Access-Control-Allow-Origin配置为*，意思是所有域都可以访问：

<script src="http://cdn.xxx.com/index.js" crossorigin="anonymous"></script>

window.onerror=(errorMessage,scriptURI,lineNumber,columnNumber,errorObj)=>{
 const data ={
 title: document.getElementsByTagName('title')[0].innerText,
 errorMessage,
 scriptURI,
 lineNumber,
 columnNumber,
 detailMessage:(errorObj &&errorObj.message)||'',
 stack:(errorObj &&errorObj.stack)||'',
 userAgent: window.navigator.userAgent,
 locationHref: window.location.href,
 cookie: window.document.cookie,
 };
 ajax('url',data);
 // 上报到服务器
};

线上的 js 脚本都是压缩过的，需要用 sourcemap 文件与 source-map(https://github.com/mozilla/source-map) 查看原始的报错堆栈信息。

可以参考：

• webpack - devtool(https://webpack.js.org/configuration/devtool/)
• source-map(https://github.com/mozilla/source-map)