How To Debug Mobile React Application

最近和朋友做了个好玩的项目颜值俱乐部，使用React做前端开发，我们的定位主要是移动端的web application，所以就需要支持响应式设计，支持移动端等等。这其中就无法避免的涉及到了如何去做好移动端的debug，在debug过程中我主要用到了下面一些工具和方法。

React Devtools

对于调试React Web Application，Facebook提供了一个官方chrome浏览器插件的debug工具，可以从Chrome Store下载，需要注意的是想要使用React Devtools需要在浏览器的window对象上绑定React对象，在代码的最上层执行window.React = require('react');就可以，然后就可以在react-devtools看到这种结构。
从上图可以看到devtool已树形列出了整改应用的Component，并且可以在右边看到每个component的state、props、component自身的方法等，对于debug来说非常有用。

Chrome Mobile Simulator

Chrome 浏览器是我的最爱，因为它提供了非常完善的调试工具。对于移动端的调试Chrome更是提供了一个手机模拟器，如图

并且可以通过选择不同的devices来查看应用在不同设备间的适配情况，甚至可以通过选择Network查看在不同网络情况下应用的数据资源加载情况等等。

Chrome Remote Debug

如果想要在Android设备上debug应用，在Chrome浏览器Menu > More tools > Inspect Devices添加一个打开调试模式的Android设备后
，就可以想桌面浏览器一样调试在Android Chrome下调试应用了。

Weinre

我在Debug应用的时候，最麻烦的就是在类似微信这种内置Webview的应用中Debug，因为你不知道这个时候应用本身发生了什么问题，包括css，JS的加载情况等等。这时候就需要使用weinre这个工具，weinre是Apache的开源项目，主要为了远程调试。

• 安装
  npm i -g weinre
• 运行
  weinre --httpPort 9000 --debug --boundHost 0.0.0.0
• 加载
  在你的web application 的所有js scripts的最上层插入
  <script src="http://you_ip_address:9000/target/target-script-min.js#anonymous"></script>

这时时候在微信打开你的web application的地址，然后你就可以在浏览器里打开http://you_ip_address:9000/client/#anonymous就可以看到

选择Element就可以看到一个和chrome developer tool和类似的控制台

总结

在前端Debug的过程中其实最有用的还是console.log和alert，但是这些工具可以帮你很快定位出错代码段，和逻辑错误，工具不重要，重要的是快速Debug。

Refs:
1.https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
2. https://developer.chrome.com/devtools/docs/dom-and-styles