web前端教程

用大白话，来讲编程

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

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

你心想：怎么可能，我手机里挺好的呀，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开发者工具的移动调试也是借助于此。

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

热门文章

原创教程

原创教程：

附加习题：

趣味职场

行业困惑：

职业规划：

新手求职：

新手学习：

职场感悟：

学习困惑：

职场焦虑：

感到迷茫：

薪资待遇：

培训出身：

培训费用：

培训简历：

搞笑黑话：

职业自由：

职场形象：

合作广告分割线

推荐3款移动端网页开发调试神器相关推荐

  1. 移动端html怎么调试工具,移动端网页开发调试神器Eruda的介绍与使用技巧

    前言 众所周知,我们在做移动端Web开发的一大痛点就是,在真机运行下无法查看console.log日志和其他信息如网络请求.显示本地存储等信息.如果网页是运行在手机浏览器中还算好,可以把网址在电脑上打 ...

  2. 推荐一款移动端日历App吉日历

    推荐一款移动端日历App吉日历 一 应用描述 万年历.日历.农历.黄历.假期安排.天气预报.记事提醒便捷查看,一目了然! 二 功能介绍: 1.万年历:精美的日期展示,完整的节日日历随意查看,节假日.休 ...

  3. windows串口调试linux工具,推荐一款好用的串口调试软件PuTTY

    原标题:推荐一款好用的串口调试软件PuTTY PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件.较早的版本仅支持Windows平台,在最近的版本中开始支持各类Unix平 ...

  4. 移动端网页开发)------响应式网页

    移动端网页开发 移动端网页开发的两种方案: 响应式网页 开发一个新的网站.使用移动端的布局方式. 响应式网页 概念 同一个网页会根据视口的不同,显示不同的样式. 优缺点 优点 面对不同分辨率的设备比较 ...

  5. 移动端网页开发-vh/vw/rem

    第一次做移动端网页开发,接触到的几个单位vh/vw/rem,记录一下. vh:相对可见视区的高度 vw:相对可见视区的宽度 rem:相对根元素的字体大小 "视区"所指为浏览器内部的 ...

  6. 推荐一款 iOS 端黑科技自动化应用脚本

    1. 场景 相信大部分同学早上醒来之后,都是手动打开音乐软件,播放自己喜欢的音乐,然后手动滑动屏幕,查看今天的天气,日复一日,生活显得特别的朴实无华且枯燥 试想一下,如果清晨醒来时,按掉闹铃后能自动化 ...

  7. Rosin-移动端页面开发调试Fiddler插件

    前言 随着移动互联网大潮流的到来,移动端H5开发需求也愈加强烈.而移动端页面的调试对开发效率起着重要作用,都有什么调试方法呢? 对于Android设备,可通过设备连接Chrome浏览器进行调试(chr ...

  8. 移动端网页开发三（纠结适配的那些年）

    前面两篇文章介绍了移动端网页开发所要具备的基础知识. 今天着重来讲解移动端的适配方案. 做PC端页面的工程师聊的最多的是兼容,这是因为浏览器之间的差异引起的.而移动端基本是没有兼容问题的,全是css3 ...

  9. 推荐一款移动端天气App即刻天气

    推荐一款移动端天气App即刻天气 一 应用描述 即刻天气预报是一个提供全国各城市15日天气预报和空气质量的APP,包含全国3000个城市天气预报,3万个乡镇天气,15日及48小时空气质量预报,是万千用 ...

最新文章

  1. python3 匹配空格 正则_玩转正则表达式
  2. lan交换和无线教师手册_简单几步，无线路由器变交换机
  3. 蚂蚁庄园 php源码,蚂蚁庄园五体投地
  4. python写乘法口诀表好记方法_如何用python编写乘法口诀表
  5. 提高编程技能最有效的方法
  6. C语言程序设计第四次作业
  7. 翻译：如何理解K-means的缺点
  8. EDA设计流程是怎样的，看完这篇文章就知道了
  9. 郝兵c语言_郝斌C语言教程全套视频180集下载地址
  10. android脚本,安卓好用的脚本程序—Gscript
  11. 2.1 VB语言基础——关键字和标识符
  12. python对医学图像的基本处理_python OpenCV 实现图片的医学处理
  13. 春季必买明星款流行春装
  14. mbp touchbar设置_Macbook Pro 上 有什么好的 Touchbar 使用技巧？
  15. CBOW(Continous Bag of Words)模型学习(2020-08-19)
  16. Python编曲实践（八）：我，乔鲁诺·乔巴那，能用两百行代码写出JOJO黄金之风里我自己的出场曲！
  17. node+express+mysql搭建一个系统
  18. 炼数成金数据分析课程---7、数据分析简介
  19. Cocoa: keyEquivalent（NSXXFunctionKey） modifierFlags
  20. 当当吃海货，不算不会过

热门文章

  1. 2021中国集成电路行业投资市场研究报告
  2. 互联网日报 | 4月7日 星期三 | 雷军称小米首款汽车售价10至30万；携程通过港交所上市聆讯；深交所主板与中小板正式合并...
  3. 3 css 奖品出现弹出动画_基于jquery css3实现点击动画弹出表单源码特效
  4. 作者：胡青青（1984-），女，现就职于中国人民银行征信中心数据部，主要研究方向为数据挖掘。...
  5. oracle 创建用户表空间及赋权
  6. 【数理统计】基础理论归纳
  7. N进制正反累加判回文数（洛谷P1015题题解，Java语言描述）
  8. Python全栈开发之并发编程
  9. 区块链每日一问 | 数字货币的场内交易和场外交易各指什么？各有哪些特点？...
  10. HTML script 标签