使用VConsole调试代码

在真实手机上运行H5页面时，无法看到控制台。为了能在真实手机上使用控制台，可以加入如下代码实现控制台：

//引入VConsole
var isTestEnvironment = true
if(isTestEnvironment){
    var script,
    scripts = document.getElementsByTagName('script')[document.getElementsByTagName('script').length-1]
    function load(url) {
        script = document.createElement('script')
        script.async = true
        script.src = url
        scripts.parentNode.insertBefore(script, scripts)
    }
    load('https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js')
    window.onload = function(){
        var vConsole = new VConsole()
    }
}

VConsole界面如下：

该代码的要点为：

1.异步加载第三方的js。当无法报证嵌入的第三方内容可以正常工作的时候，可考虑用异步加载这些代码，避免阻塞整个页面加载。

上面的代码是为了能在公共的js中按照测试环境和正式环境的不同进行加载与否的处理，所以采用了这种加载js的方式，并且避免了每个页面都要加上加载第三方js和new VConsole对象的语句。

2.当页面加载js完成，才会触发onload事件，从而顺利地new出VConsole对象。

来源：https://www.cnblogs.com/luoyihao/p/12206259.html