• 注册
  • F12开发者调试工具 F12开发者调试工具 关注:10 内容:9

    在手机端浏览器实现模拟F12开发者调试工具

  • 查看作者
  • 打赏作者
  • 当前位置: F12开发者 > F12开发者调试工具 > 正文
  • F12开发者调试工具
  • Lv.9
    超凡入圣
    官方

      站长程序员一般使用电脑版谷歌浏览器模拟手机端没问题,但是真机上使用就会出现bug,手机浏览器没有F12,很难定位bug原因。

      偶尔找到一款工具,可以方便的在手机端打开F12,记录一下分享给大家。

      这款工具就是vconsole,记录一下使用方法:

      一、多页面,用script的方式引入

      首先引入vconsole

    <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>

      之后在需要使用的页面引入

    var vConsole = new VConsole();

      如果是生产环境,不想让用户看到,可以这样做:

    if(window.location.href.indexOf("debugger")!=-1){
    var vConsole = new VConsole();
    }

      在页面url加一个debugger就可以启动调试模式。

      二、单页面应用,比如在vue中引入

      首先

    npm install vconsole

      之后在main.js或者需要的页面引入

    import Vconsole from 'vconsole'
    const vConsole = new Vconsole()
    Vue.use(vConsole)

    请登录之后再进行评论

    登录
  • 发表内容
  • 实时动态
  • 偏好设置
  • 帖子间隔 侧栏位置: