前言
HTML5有很多很多新的改进特性，特别是针对移动设备的优化改进，让HTML5在公众号、小程序及App上有着越来越多的使用场景。随着使用场景的增多，遇到的问题也会相应增加，在这种情况下，如何去定位前端的问题，是前端开发人员一个比较头痛的问题。
通常要定位问题，一个合格的程序员应该是首先想到的是看现象，然后通过日志去分析（我这个不合格的程序员在CTIE应用中练就了目测这个本领）。说到这里，后端的同学们会觉得查看日志这些是何其容易，得服务器者得天下。然而，这件在后端同学看来很简单的事，到了前端的同学这边就没那么简单了，因上H5是运行到客户那边（不然客户也没法端啊），所以你要取个日志是挺难的。
如果运行H5的载体在PC上的话，开发人员还可以通过浏览器的开发工具进行问题的定位。然而，当H5在公众号、小程序里面面运行都是依托微信客户端提供WebView浏览器内核运行的，在App中也差不多是基于客户端提供WebView浏览器内核运行的（App如果是自家研发团队开发可以定制化配合前端定位问题，但成本也很高），微信及App可不像PC浏览器那样自带开发工具，一是使用场景少影响体验，二应该是考虑到安全问题，总不能让客户随便就能调试你的代码吧（当然，这样子也挡不住懂些技术的用户）。
三种方法
1.抓包替换
借助Fiddler、Wireshark、Charles等工具，抓包看http请求状态及报文，然后把本地的页面替换到端机上，通过alert来进行问题定位。这种方式太麻烦了，要在手机上设置代理，然后手机及PC处于同一个网络环境，并且只能通过Alert来显示打印的日志信息。
2.远程调试
iOS的页面可以配合safari浏览器进行远程调试（推荐大家使用macOS进行开发，谁用谁知道），Android的页面可以借助Chrome浏览器进行远程调试。这种方式可以适用大部份使用场景。关于这方面的内容，网上教材也比较多，不是本文的重点，不在此展开讨论。
3.自带控制台
这里推荐前端开发一大神器，由腾讯团队开源的vConsole。github: https://github.com/Tencent/vConsole
使用起来很简单，只要在HTML中引用vconsole.js（生产上建议引用vconsole.min.js，76.8k），然后在脚本上实例化vConsole对象即可。
<script src="vconsole.min.js"></script>
<script>
new VConsole();
</script>
通过下面三张图来看看引用vConsole的效果。
未引用vConsole
引用了vConsole
点击vConsole之后
做过小程序开发的同学到这里应该觉得很眼熟，这不就是小程序的调试控制台嘛。控制台的使用很简单，可以通过官方的文档快速上手，还有中文版的，链接在这：https://github.com/Tencent/vConsole/blob/dev/README_CN.md 大家自己上去看看就知道，这也不是本文的重点，本文的重点是讲如何优雅的使用它。
优雅的使用
通常，我们在开发的过程中，为了方便在端机调试，我们会通过代码去打开vConsole，然后在发布生产的时候把相关的代码去掉，但这样子生产及开发老是要更改，容易出错，生产需要查问题的时候也没法打开，但是如果不关掉的话，除了影响体验之外，总不能让客户随意调试吧。（当然官方有支持webpack的插件，可以通过在webpack的脚本来控制开发和生产的开关，但是也一样不够灵活，例如生产上需要的时候没法打开。）
刚开始使用的时候，觉得就改一下代码这样来切换开关就好了，方便嘛，但是慢慢的要解决生产的问题的时候，发现这种方案是走不通的。终于有一天下定决心改变这一现状。
首先，这个vConsole的开关在于有没有创建vConsole实例出来，顺着这个思路，其实我只要控制vConsole这个实例的创建时机就可以解决这个问题了。基于我“丰富”的前端知识（容我装个逼先），寻思了片刻，方案一闪而出。利用H5的本地存储机制，利用同源策略，增加一个控制页面，用来进行状态开关控制，完美。
1.创建总控页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content=""/>
<meta name="msapplication-TileColor" content="#0e90d2">
<title>DEBUG_OPTION</title>
<script>
function openDebug(flag){
localStorage.setItem('W_DEBUG',flag);
}
</script>
</head>
<body>
<input type="button" value="打开DEBUG" onclick="openDebug(true)"/>
<input type="button" value="关闭DEBUG" onclick="openDebug(false)"/>
</body>
</html>
2.控制vConsole对象创建时机
在页面加载的事件中，增加下面的代码
var isDebug = LocalStorageUtil.getItem('W_DEBUG', false);
if(isDebug=="true"){
new VConsole();
}
3.将总控页面与前端一起部署，完成。
控制页面
后续我们想要对生产环境进行在线调试的时候，只需访问总控页面，然后点击打开DEBUG，刷新对应的页面，就会有vConsole加载出来了，不需要改代码，不需要发版，不影响客户，完美，可吃优雅的调试HTML5了。
网友评论