• 注册
  • 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)

      请登录之后再进行评论

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