現在移動端開發越來越火，隨之而來的問題也越來越多，今天給大家介紹一款移動端調試神器，vconsole。
一、先引用文件，可以從https://www.bootcdn.cn/vConsole/下載，也可以下載保存在本地，直接引用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo.html</title> <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> </head> <body> <script type="text/javascript"> let vConsole = new VConsole(); </script> </body> </html>
瀏覽器顯示如下：
基本的一些用法，大家可以上網查找，我着重寫一下我在配置時候的一些小問題
首先我們是一個成熟的項目，而且我想在整個頁面里面都引用整個方法，顯然每個頁面直接引用再實例化不怎么合適，而且工作量有點大，下面是我遇到的一些小坑以及小技巧
- 我們需要動態添加一個script標簽，可以選擇原生添加，或者jQuery添加
- 原生添加
function loadJs(url,callback){ var script1=document.createElement('script'); script1.type="text/javascript"; if(typeof(callback)!="undefined"){ if(script1.readyState){ script1.onreadystatechange=function(){ if(script1.readyState == "loaded" || script1.readyState == "complete"){ script1.onreadystatechange=null; callback(); } } }else{ script1.onload=function(){ callback(); } } } script1.src=url; document.body.appendChild(script1); } loadJs("vconsole.min.js",function(){ let vConsole = new VConsole(); });
頁面里面直接引用js文件，谷歌報錯如下
這是因為js引用位置錯誤引起的，需要把js文件放置在body里面，不然會加載不到，調換位置，錯誤完美解決。
- jQuery引入，代碼如下，先引用jQuery
$.getScript('../vconsole.min.js',function(){
var vConsole = new VConsole();
});
谷歌報錯如下
這是同源策略的限制，需要我們本地啟動一個服務，來運行這個index文件，
使用http-server或者xampp都可以，根據個人喜好，這個問題也迎刃而解。
2. 我們的項目是H5項目，使用的庫是zepto，直接引用會報錯，說這個$.script這個方法不存在，這樣需要我們先往zepto這個庫里添加一個$.script方法才可以向上面那樣使用，添加方法如下：
; (function() { /** * 動態加載js文件 * @param {string} url js文件的url地址 * @param {Function} callback 加載完成后的回調函數 */ var _getScript = function(url, callback) { var head = document.getElementsByTagName('head')[0], js = document.createElement('script'); js.setAttribute('type', 'text/javascript'); js.setAttribute('src', url); head.appendChild(js); //執行回調 var callbackFn = function(){ if(typeof callback === 'function'){ callback(); } }; if (document.all) { //IE js.onreadystatechange = function() { if (js.readyState == 'loaded' || js.readyState == 'complete') { callbackFn(); } } } else { js.onload = function() { callbackFn(); } } } //如果使用的是zepto，就添加擴展函數 if(Zepto){ $.getScript = _getScript; } })();
按您所需，使用原生或者$.script這個方法都可以引用成功了。
感謝您的閱讀，歡迎留言評論，大家一起探討。