现在移动端开发越来越火，随之而来的问题也越来越多，今天给大家介绍一款移动端调试神器，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>

浏览器显示如下：

基本的一些用法，大家可以上网查找，我着重写一下我在配置时候的一些小问题

首先我们是一个成熟的项目，而且我想在整个页面里面都引用整个方法，显然每个页面直接引用再实例化不怎么合适，而且工作量有点大，下面是我遇到的一些小坑以及小技巧

  1. 我们需要动态添加一个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这个方法都可以引用成功了。

　　感谢您的阅读，欢迎留言评论，大家一起探讨。

移动端调试利器-vConsole的更多相关文章

  1. 移动端调试神器vconsole,手机端网页的调试工具Eruda

    移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...

  2. 移动端调试利器 JSConsole 介绍

    先看这篇文章 Web应用调试:现在是Weinre和JSConsole,最终会是WebKit的远程调试协议. 我们先不看未来,从此文可见,当下的移动端调试还是 Weinre 和 JSConsole 的天 ...

  3. 移动端调试神器vConsole

    vConsole.js 其实就是重写console方法,实现了类似于微信小程序的移动端调试效果 在普通html文件里使用 <script src="https://cdn.bootcs ...

  4. 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

    记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...

  5. vConsole移动端调试利器

    图示: ,  简单的几步操作: 1. 引入cdn     可以从https://www.bootcdn.cn/vConsole/下载,也可以下载保存在本地,直接引用 <!DOCTYPE html ...

  6. 移动端开发利器vConsole.js,app内嵌H5开发时调试用

    vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...

  7. 移动端调试神器-vConsole

    什么是vConsole?   官方说明是一个web前端开发者面板,可用于展示console日志,方便日常开发,调试. 简单来说相当于移动版的Chrome调试控制台,就是我们在PC端常用的F12 vCo ...

  8. 手机前端开发调试利器 – vConsole

    我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己 ...

  9. 手机前端开发调试利器-vConsole

    最近因为做抽奖页面,在android上可以使用手机连上电脑后用chrome浏览器chrome://inspect进行页面探测,但是ios中的页面就不能这样探测 在网上搜索后发现此插件,大大解决了问题 ...

随机推荐

  1. springboot 简单自定义starter - beetl

    使用idea新建springboot项目beetl-spring-boot-starter 首先添加pom依赖 packaging要设置为jar不能设置为pom<packaging>jar ...

  2. 导入别的类中的bean

    @Configuration class CommonContext { @Bean public MyBolt myBolt() { return new MyBolt(); } } ... @Co ...

  3. 关于Spring @RequestBody 自动映射模型原理

    关于Spring @RequestBody 自动映射模型 2016年10月18日 22:17:12 稻子丶 阅读数:5049   在很多时候,Spring的注解为我们提供了很多方便,但只知道其用法,不 ...

  4. Eclipse中mybatis的xml文件没有提示，出现the file cannot be validated as the XML definition.....

    1.下载dtd文件 2.在eclipse中配置本地dtd文件: Window->Preferences->XML->XML Catalog->User Specified En ...

  5. E. Beautiful Subarrays 字典树

    http://codeforces.com/contest/665/problem/E 给定一个序列,问其中有多少个区间,所有数字异或起来 >= k 看到异或,就应该想到异或的性质,A^B^B ...

  6. Sqoop概述

    sqoop Sqoop 是传统数据库与 Hadoop 之间数据同步的工具,它是 Hadoop 发展到一定程度的必然产物,它主要解决的是传统数据库和Hadoop之间数据的迁移问题.这节课我们将详细介绍 ...

  7. PIO导出

    1..HSSFWorkbook 声明一个工作簿,创建一个excel文件 //创建HSSFWork对象(excel的文档对象) HSSFWorkbook wb=new HSSFWorkbook(); / ...

  8. AJPFX总结java创建线程的三种方式及其对比

    Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类,并重写该类的run方法,该run方法的方法体就代表了线程要完成的任务.因此把run()方法称为执行 ...

  9. python全栈测试题（一）

    1.执行Python脚本的两种方式 如果想要永久保存代码,就要用文件的方式 如果想要调试代码,就要用交互式的方式即终端命令下和python环境中 2.Pyhton单行注释和多行注释分别用什么? pyt ...

  10. 渐进式jpeg(progressive jpeg)图片及其相关

    最近看有些网站上的jpg格式的图片在呈现的时候,有两种方式,一种是自上而下扫描式的,还有一种就是先是全部的模糊图片,然后逐渐清晰(就像GIF格式的交错显示). 一.基本JPEG(baseline jp ...