最近和朋友做了个好玩的项目颜值俱乐部,使用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的stateprops、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.logalert,但是这些工具可以帮你很快定位出错代码段,和逻辑错误,工具不重要,重要的是快速Debug。

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