如何调试移动端的前端开发？

谢谢邀请！
作为一名前端，小生70%的工作都是在做移动端的开发，在移动端上开发web应用是不能借助强大的chrome debug工具的，没有控制台，不能打断点，跟不了代码逻辑，还看不见dom树，调试

谢谢邀请！

作为一名前端，小生70%的工作都是在做移动端的开发，在移动端上开发web应用是不能借助强大的chrome debug工具的，没有控制台，不能打断点，跟不了代码逻辑，还看不见dom树，调试起来比较困难，下面我来谈谈我的调试经验！

1、alert

虽然用不了

console.log

，但是alert还是可以用的，会在手机上弹出一个框，至少可以打印一些字符串和数字，如果需要打印对象，要不对象序列化一下！用它可以判断我们的代码有没有更新，代码有没有走到指定的逻辑以及输出是不是想要的值！

2、background

背景色在调试css样式时比较好用，比如我们有时会遇到布局不符合预期的情况，但是不清楚是哪个dom节点导致的，可以给dom节点加背景色，每个dom节点所占的区域一目了然，进而判断哪个节点的样式出了问题！

3、二分删除法

当你在调试一个非常复杂的页面时，你很难快速确定问题所在，特别是你突然被抓去调试一个陌生的页面！怎么办？我的杀手锏就是删代码，以每次删除一半（具体删除多少自己决定），删完至少保证语法没问题！看看需要解决的问题还在不在，如果还存在，就继续删，如果不存在了，那问题就在自己刚刚删除的代码片段里面，继续缩小范围！还有一个场景，就是如果你的代码依赖别人的代码，出了问题，你可以用此招快速定位是不是自己的问题，如果不是赶紧甩锅！

4、Fiddler/Charles

window上用Fiddler，mac上用Charles，都可以用来代理本地文件！修改了本地的代码，就可以代理到自己的手机上！上面的三个方法可以基于代理来使用！5、safari开发者工具

打开苹果手机的web inspector，在mac上打开safari，菜单栏中显示“开发”菜单。用iphone usb插线连接mac，在safari中访问页面，在mac的菜单栏里面就可以找到对应的手机页面，点开会出来一个safari的控制台，长得几乎和chrome控制台一样，然后就可以方便的调试！缺点：必须要有mac，而且只能苹果safari，局限性比较大！

6、vconsole

想过自己开发一款移动端控制台吗？腾讯的前端就开发了一款移动端调试模块！

https://github.com/Tencent/vConsole

，umd规范，直接放在自己的代码就行，小伙伴们自己去试一试吧！

7、集思广益

大家有什么好点子，可以写在评论里，大家一起分享一下！

喜欢我的回答就点赞关注我吧，有问题可以发表评论，我们一起学习，共同成长！