lusteng / daily-notes Goto Github PK

回忆下吧

• 假如说移动端能像PC一样方便调试，那移动端开发会比PC端简单多了（个人观点，勿喷，哈哈~），But， 这是现实中不存在的滴~
• 想起以前使用XXDebugger工具调试平板，调试iphone、vivo、小米、华为等一众手机，真是苦不堪言。再到后面不用兼容低版本android，就使用chrome （打开 chrome://inspect 链接）调试安卓机，但是此大法不支持其他系列浏览器调试。后面又引进weinre来调试项目，然鹅每次调试的项目都要植入脚本，好麻烦的说。

spy-debugger 调试

上面废话那么多，也不浪费写的时间，直接引入正主，这位大哥内部集成了weinre，可以通过代理的方式拦截所有html自动注入weinre所需的js代码，相对weinre简便很多

特点

1.操作简单
2.调试&抓包
3.支持HTTPS(手机安装证书，略麻烦)
4.混合app下只拦截webview发起的https请求。（最近混合app搞得少了，这块用的少）

spy-debugger安装

全局安装

   npm install spy-debugger  -g   //window

运行

   spy-debugger 

设置手机代理

• 代理的地址为PC的IP地址，代理的端口为spy-debugger的启动端口(默认端口为：9888)默认端口是 9888。
• 如果要指定端口： spy-debugger–p8888。
• Android设置步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动。
• iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动。
  安装证书
• 参考https://github.com/wuchangming/spy-debugger

网站证书安装不了？
1.生成证书

//生成本地证书
//生成目录  /Users/yourName/node-mitmproxy
spy-debugger initCA

2.安装证书
把node-mitmproxy文件夹下的 node-mitmproxy.ca.crt 传到手机上，点击安装即可。

IOS 打开Safari浏览器

3.iOS新安装的证书需要手动打开证书信任
(https://github.com/wuchangming/spy-debugger/issues/42)[https://github.com/wuchangming/spy-debugger/issues/42]

经历上面几步，就可以愉快的拿手机点开页面，然后直接pc上进行调试了。Of course， 你的手机和电脑必须处于同一网段

后记

如果您有更好的真机调试方案，欢迎给我提issues，本人感激不尽~（虽然github写的少，推广更加米有，云笔记依赖症者，无奈(ノ﹏ヽ)）

vue 可以通过对$route 对象的watch来监听路由对象的变化，但是react并没有对这块很好的封装，下面总结在平时的业务中使用的三种方法

• 使用 history 控制路由跳转

this.props.history.listen(location => {
      // 路由变化了，do something
});

• 使用 context history 控制路由跳转 (不太推荐方式)

• 使用底层hashchange事件监听

window.addEventListener('hashchange', function(e){
   console.log(e.oldURL, e.newURL); 
})