移动端调试方法

于 2022-09-20 15:50:05 发布
阅读量686 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42274644/article/details/126954792
版权

移动端调试方法

移动端调试方法

Vconsole
  • Vconsole github地址
  • 安装方法：npm install vconsole
  • 在项目中使用：import VConsole from 'vconsole'; new VConsole();
  • 手机与项目处于同一IP下，通过手机访问项目地址，在Vconsole调试面板中可以进行调试。

Chrome + Android

  • chrome中输入 chrome://inspect
  • 通过数据线连接你的电脑和 Android 手机，打开USB的调试模式
  • 就可以在上面的页面中看到自己的设备
  • 和使用谷歌调试pc端一样，可惜ios不适用

Safari + iOS + Mac

  • 打开手机点击设置 -> Safari浏览器 -> 高级
  • 打开JavaScript和web检查器。
  • 在Mac上打开Safari，执行【偏好设置】->【高级】->【在菜单栏中显示“开发”菜单】勾选
  • 通过数据线将Mac和iPhone连接，在Mac上的Safari浏览器中执行【开发】->【手机名称】->【正在调试的网站】
  • 在Mac上的Safari浏览器中打开网页检查器。
  • 就可以按照调试pc端页面的思路来调试ios的页面
最低0.47元/天 解锁文章
葫芦娃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端测试方法
weixin_43620848的博客
11-06 280
移动端测试方法汇总 1、UI测试 导航测试 1.1对话框、按钮、窗口，页面跳转是否需要导航 1.2导航是否直观 1.3导航是否准确 1.4导航与页面风格是否一致 1.5导航是否需要增加搜索引擎 图形测试 2.1页面控件操作方式是否一致，横向比较 2.2自适应设置，内容是否根据页面大小调整 2.3页面是否美观 2.4页面图片是否根据实际意义要求整体有序美观 2.5页面风格是否统一 内容测试 3.1...
H5页面如何引入vConsole
wm9028的专栏
04-03 1万+
vConsole github地址 vConsole 是腾讯开源的项目，这就简单的介绍一下使用 使用npm引入vconsole.min.js 下载 vConsole 的最新版本。（不要直接下载 dev 分支下的 dist/vconsole.min.js） 或者使用 npm 安装： npm install vconsole 引入 dist/vconsole.min.js 到项目中： <scr...
移动端调试神器vconsole
weixin_46176363的博客
10-21 174
安装：npm install vconsole //main.js import Vconsole from 'vconsole'; let vConsole = new Vconsole(); export default vConsole 结束，波波出品，定是精品
移动端调试神器vConsole
weixin_30907523的博客
06-20 258
vConsole.js 其实就是重写console方法，实现了类似于微信小程序的移动端调试效果 在普通html文件里使用 <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> <script> // init vConsol...
get到了一个移动端调试工具VConsole
inprivacy的博客
11-01 600
vconsole github地址：https://github.com/Tencent/vConsole ionic4中应用 1. npm install vconsole 2.angular.json "scripts": ["node_modules/vconsole/dist/vconsole.min.js"] 3. app.component.ts const...
VConsole 前端移动端调试神器
Lik1024
07-03 1029
vconsole.js git地址：https://github.com/Tencent/vConsole 使用方式： <script type="text/javascript" src="vconsole.min.js"></script> <script type="text/javascript"> new VConsole(); </scr...
vue-mobile-debug:vue 移动端调试工具
05-08
基于 vue 的移动端调试小工具 功能 移动端模拟 console 信息 一键清理 cookies、localstorage，刷新页面 显示 cookies、localstorage 显示页面性能数据 安装 npm install --save vue-mobile-debug // or cnpm ...
移动端开发调试方法1
08-08
### 移动端开发调试方法概述 随着移动互联网的发展，移动设备的多样性为前端开发者带来了新的挑战。在传统的Web开发中，Firebug和Chrome开发者工具等工具被广泛应用于JavaScript、DOM元素以及CSS样式的调试。然而，...
移动端浏览器调试方法汇总
chunliti8112的博客
06-12 1029
Blog 原文地址 浏览器兼容性一直以来都是让 Web 前端开发人员头疼的问题。虽然移动端其内核趋于统一（Webkit），兼容问题也不再像 PC 端那么严重。但在生产环境当中，考虑到第三方浏览器在内核上面的 “优化”，如（Wechat、UC、QQ、360 等），兼容问题依旧是无法忽略。 本文汇...
H5,移动端调试神器 微信web开发者工具.zip
最新发布
03-18
标题中的“H5,移动端调试神器 微信web开发者工具”指的是微信官方推出的Web开发者工具，主要用于帮助H5（HTML5）开发者在移动端进行高效、便捷的页面调试工作。这款工具集成了丰富的功能，旨在解决在微信内置浏览器...
手机前端开发调试利器 (可以在手机上进行打印数据)
Oliver_web的博客
09-28 2548
我们在开发手机版网页的时候，常常会出现下面的情景： (1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log； (2) 上线后，某用户表示页面失灵，但我们自己又重现不出来，看不到用户侧的出错信息。 如果说(1)还可以通过电脑连接手机以查看log来解决，那(2)在没有完善的前端上报体系时就非常被动了。 作为开发者，我们的诉求很简单：有
关于vConsole 源码的理解分享（vConsole一个移动端调试控制台工具）(1)
你记住你不是一个人在苦逼
06-24 7991
一个轻量、可拓展、针对手机网页的前端开发者调试面板。 特性 查看 console 日志 查看网络请求 查看页面 element 结构 查看 Cookies 和 localStorage 手动执行 JS 命令行 自定义插件 这是github的readme介绍，对于调试移动端以及上线后出现的一些问题确实是一个很好的工具！！ 为腾讯开源点个赞。 使用方法请参考：腾讯开源vConsle...
Vue-cli中使用vConsole，以及设置JS连续点击控制vConsole按钮显隐功能实现
weixin_30562507的博客
10-31 1317
最近发现了一个鹅厂的仓库，实现起来比我这个方便[捂脸]。https://github.com/AlloyTeam/AlloyLever 一、vue-cli脚手架中搭建的项目引入vConsole调试 1.首先npm安装，大家都懂的。 npm install vconsole 2.在合适的地方新建一个文件vconsole.js，内容如下： import Vconsole from...
vConsole ——开源的前端 console 调试面板
qq_36663951的博客
01-09 5265
兄弟团队开发了一个针对手机网页的前端 console 调试面板，并将其开源了，一个非常有用的开发调试工具。 项目地址： https://github.com/WechatFE/vConsole 。 不多介绍，以下内容直接 copy 了项目的 README.md 简介 vConsole 是一个网页前端调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。
vConsole 插件
qq_36788686的博客
07-03 1099
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> <script type="text/javascript"> var vConsole = new VConsole(); console.log("hello word!"); </script> 备注：vconsole.min.js源文件代码如下 /*! * vConsole
前端js错误日志收集
weixin_30955617的博客
12-06 2609
今天一个客户说他们的一个同事用OPPO R11的手机访问不了我们的项目,打开后一片空白,虽然后面发现你的手机网络断了,但是想起来毕竟手机端没有调试的工具可以查看抛出的错误信息,方便我们追踪问题,后端的大牛同事提示我们看看vconsole.js.写这个js的大牛的github地址是:https://github.com/Tencent/vConsole 实现效果地址(可能时间久了就访问不了,各位见...
移动端调试神器 vConsole
小傲哥哥的博客
07-20 1020
不管是vue项目还是react项目都适用 前言： 平时在web应用开发过程中，我们可以console.log去输出一些信息，但是在移动端，也就是在手机上，console.log的信息我们是看不到的。 这种情况下，可以选择使用alert弹出一些信息，但是这种方法不怎么方便，也会阻断JS线程，导致后面的线程都不执行。也影响调试体验。 那么，如果将console.log应用到移动端呢？ 需要借助第三方插件：vConsole 首先下载依赖 ： // 首先使用 npm 下载依赖 npm install vconsol
实用！移动端vConsole使用方法
热门推荐
小小喵的博客
01-04 3万+
平时在web应用开发过程中，我们可以console.log去输出一些信息，但是在移动端，也就是在手机上，console.log的信息我们是看不到的，这时候就需要移动端调试工具vConsole 那么，如果将console.log应用到移动端呢？ 需要借助第三方插件：vConsole 第一种用法：引入js文件 资源链接 &amp;amp;amp;amp;lt;script src=&amp;amp;amp;quot;path/to/vconsole.min.j...
vue移动端调试工具
08-26
Vue移动端调试工具主要有Eruda和vConsole。Eruda是一个轻量级的前端调试工具，可以用于移动端的调试。它提供了一个浮动调试面板，可以查看和修改页面的HTML、CSS和JavaScript代码。如和所示，你可以通过引入Eruda的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值