在真实手机上运行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对象。