在手机端浏览器模拟F12(实用小工具)

发布时间:2024-12-04 22:34

在浏览器中,F12键可以打开开发者工具检查网页源代码 #生活知识# #生活经验# #软件#

最新推荐文章于 2024-10-15 19:55:32 发布

阵雨丶 于 2019-11-28 18:10:35 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

大家可能会遇到一些谷歌浏览器模拟手机端没问题,但是真机上会出现的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)

网址:在手机端浏览器模拟F12(实用小工具) https://www.yuejiaxmz.com/news/view/377280

相关内容

在日常中会用到的浏览器F12开发人员工具技巧
如何利用自动化工具减少人工操作?防关联浏览器自动化 – VMLogin指纹浏览器
前端浏览器兼容
虚拟现实生活模拟器手机版下载
Google Chrome谷歌浏览器清理缓存的常用方法
虚拟现实生活模拟器下载手机版安装
Edge浏览器访问特殊网站端口(如10080)出现ERR
浏览器内核+浏览器外壳+插件=操作系统?
6款浏览器实测 看手机上网谁最省流量
使用edge浏览器浏览B站网页端卡顿的一个解决方法

随便看看