web怎么嵌入三方网页_推荐3款移动端网页开发调试神器

最近有小伙伴在微信上跟我聊到了移动端网页开发调试困哪的问题，这个相信很多前端开发者都遇到过。

有一天，测试妹子拿着测试手机过来找你，说页面打不开。

你心想：怎么可能，我手机里挺好的呀，Chrome调试工具也没报错呀！就把她手机拿过来看了看，发现一进去还真就是一片空白。真是石乐志了！那问题就来了，开发环境下没报错，可真机又出现了意料之外的情况，而且没法像 PC端 那样祭出 F12 大法，怎么定位问题并解决呢？ 

这个时候我们就需要借助一些调试神奇，来帮助我们程序员快速的揪出问题，并修复它。下面推荐3款比较好用的调试工具给大家：

1. vConsole 

腾讯出品的 Web 调试面板，相信不少前端小伙伴都用过。vConsole 会在你网页中加一个悬浮的小按钮，可以点击它来打开关闭调试面板，并查看 DOM、Console、Network和 本地存储 等信息。

基本可以满足普通前端开发的需求。使用方法也很简单，通过npm安装或者直接在需要的页面引入 js文件 ，然后 new VConsole() 就可以了。

2. Charles 

Charles 是一款强大的抓包工具，可以截取包括 https 在内的各种网络请求并方便的查看具体信息。有 Mac、Windows 和 Linux多版本，通过配置 WIFI 代理，也可以拦截手机发出的请求。

毕竟前端相当一部分报错是网络错误或数据不符合预期导致的。所以通过拦截 http 请求,查看具体的请求信息和数据，能获取很多有用的信息，可以在一定程度上帮助 debug。

3. weinre 

weinre是一款很不错的网页检查工具，可以通过在本地启动一个 weinre 服务，并向手机网页嵌入一段 js 脚本来实现和电脑的通信，已达到类似浏览器开发工具那样的的调试效果，它的操作界面和 vConsole 差不多，主要包括查看 DOM、Console、Network 等，只不过这一切是在电脑上操作，而不是在手机上。

微信web开发者工具的移动调试也是借助于此。

如果有需要调试webApp的小伙伴，可以试一下这3款调试工具，或者你有更好用的工具，欢迎留言分享！

   作者： 前端君 往期 从零开始，打造一套自己的学习体系 Vue这些修饰符帮我节省20%的开发时间 转发在看就是最大的支持❤️