用手机调试h5项目

已于 2023-01-12 06:34:43 修改
阅读量1.6k 收藏 8
点赞数 2
分类专栏： 错误总结 文章标签： chrome 前端
于 2023-01-11 22:28:44 首次发布
原文链接：https://blog.csdn.net/fenglolo/article/details/107750361
版权

打开谷歌浏览器输入

chrome://inspect/#devices

 打开手机开发者模式

选择开发者模式: 选择usb配置==MDI,打开usb调试

打开手机上随便一个浏览器输入地址(只能是本机network的地址，不能是localhost地址，否则打不开)

67072f89442a9b7e1a25cc15515f4f8c.png

 当手机打开页面后(稍等半分钟)，浏览器中自动会出现以下内容

注：

1. 手机和电脑必须是同一网络

2. 配置network地址

 

避坑记录
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5：在手机上调试开发H5网址
干饭搬砖两不误。
05-24 2323
在开发H5网址的时候，特别是手机真机上，想要查看日志即可采取当前方式。
手机端h5怎么调试
Pistachio839的博客
01-20 5556
最近遇到h5页面调试，想查看web打印的log或cookie，于是搜索资料找到以下方法 一、Mac+IOS+Safari- 进阶调试（亲测有效） 1､浏览器设置：Safari - 偏好设置 - 高级 - 勾选「在菜单栏中显示开发」菜单。 2､iphone 设置：设置 - Safari - 高级 - 打开 Web 检查器。 3､通过手机的 Safari 来打开 H5 页面，我们通过浏览器开发选项可以看到： 4､通过这种方式成功解决问题。 *特点：不能调试webView里面的页面。 二、 Chrome+
Vue移动端项目实现使用手机预览调试操作
11-20
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi； b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以； 2.查询本地IP地址 WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4； 3.修改本地项目中IP地址 找到项目中config文件夹，下面index.js文件打开； 找到host: ‘localhost’, 改为上面本地IPv4地址； module.exports
H5 移动端调试全攻略
油墨香^-^的博客
09-22 636
随着移动设备的高速发展，H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧，修 Bug 于无形。
Chrome对安卓手机网页进行真机调试
最新发布
墨离的博客
07-29 654
前期准备 PC端安装Chrome浏览器。 手机安卓Chrome浏览器 连接电脑数据线一条。 梯子。 操作步骤 数据线连接电脑。 手机打开USB调试模式并选择USB连接用途为“传输文件”。 手机打开谷歌浏览器，并打开需要调试的网页。 电脑打开 chrome://inspect/#devices 会进入相应的工具页面。 选择你要调试的应用，点击下面的“inspect”进入对应的调试页面。 接下来就可以进行愉快的调试了。 后续 如果第一次调试的时候遇上 “HTTP/1.1 404 Not
h5项目手机端进行调试
h960822的博客
03-09 938
1：ctrl/window+r输入cmd回车，打开。1：在项目的配置环境中将host改为上面的Ip地址。2：搜索启动项目之后NetWork的地址便可以了。,查看本地ip， 选择IPv4地址。1：将手机与电脑连接同一无线。
H5移动端调试方案全解（iOS&Android&Chrome&vConsole）
m0_48176238的博客
08-30 9968
前言 在移动端盛行的今天，大家在日常中经常会接触到H5的移动端网页，不仅仅是在浏览器中，在各种的APP中也有存在着许多的H5页面，所以我们作为前端开发者就会有在开发时候进行移动端调试、甚至是真机调试的需求，本文旨在一文带领大家了解iOS、Android等平台的调试以及模拟器和真机的调试方法。 谷歌浏览器手机模式调试 优点：方便，常用 确定：无法完全模拟真机，无法发现真机上的一些问题 调...
在手机上访问和调试本地的 H5 页面
热门推荐
花铛
07-05 1万+
在 cmd 里输入 ipconfig，就可以看到 ipv4 地址，也就是电脑本机的 ip 地址。
移动端h5页面调试技术
02-27
移动端h5页面调试技术，如何在移动端调试，不错的入门教程
手机h5项目相关代码图片段
12-15
6. 测试与调试：在手机H5项目开发过程中，测试和调试至关重要。开发者可以借助Chrome开发者工具的移动模拟器，或者使用Safari的Web检查器在真实设备上进行测试，确保各功能在不同浏览器和设备上的兼容性。 7. 性能...
移动端H5前端设计项目源码
04-08
在移动端H5项目中，HTML5的引入带来了许多新特性，如离线存储、媒体元素和表单控件改进，增强了移动设备上的用户体验。 `Untitled-1.js`是一个JavaScript文件，这是网页动态功能的核心。JavaScript允许开发人员添加...
H5手机端调试
u013860230的博客
03-17 192
使用方法 下载vconsole github: https://github.com/Tencent/vConsole 引入模块 (1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块： <script src="./vconsole.min.js"></script> (2) 如果使用了 AMD/CMD 规范，可在 module ...
H5 中进行手机调试
阿乐的博客
11-10 65
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>var vConsole = new window.VConsole();
通过ADB实现移动端h5项目无线真机调试（超级简单！）
有事儿私信。
04-21 1983
做移动端h5项目的时候，电脑浏览器调试样式和效果，可能和真机展示出来的效果有差距，比如有的手机开启了home键，比如文字大小等样式有偏差。虽然可以通过手机扫描网页二维码在手机上看样式，但是和真机还是有区别。最近没有带数据线，记录下怎么利用ADB实现无线真机调试。
H5移动端调试
weixin_42317878的博客
11-30 442
  1. weinre是基于nodeJs程序，安装weinre包 首先 PC端要安装有node环境  没有的话先点击处安装 点击此处安装   npm install -g weinre 2.  启动weinre服务 （代理【agent】服务） weinre --boundHost 1111111 --httpPort 8888      其中111111 是本机的ip地址     可以...
手机端调试H5——vConsole
安歌
09-11 833
在开发H5中当需要调试页面时，我们可以利用pc端的控制台来进行页面调试，但有时候我们还需要在手机端进行调试，那么此时我们就需要使用到一些手机前端开发调试利器，可以方便我们在手机前端页面看到log日志，vconsole就是这样一个工具。 vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。 vconsole使用起来也比较方便，你可以通过npm或者cdn等方式引入，然后初始化vcon...
移动webH5真机调试方案
Javahtml12的博客
03-30 4492
Mac上可以使用Simulator模拟器（需要先安装Xcode），可以模拟调试多个版本iPhone手机，还可以配合Safari来调试页面，此模拟器的完成度几乎可以替代真机。页面，然后将Mac上的Safari浏览器打开，选择开发 -> iPhone，就出现调试界面了，在iPhone上也能断点调试js了。手机端安装Chrome浏览器，使用USB连接到PC，同时打开手机的USB调试模式。，选中"Discover USB devices"选项，打开页面进行调试。
vue项目钉钉h5微应用，安卓手机进入无反应
08-09
针对Vue项目钉钉H5微应用在安卓手机进入无反应的问题，可能有以下几个原因： 1. 引入的库和组件不兼容：Vue项目中可能使用了一些在安卓手机上不兼容的库或组件，导致应用无法正常加载。解决办法是检查使用的库和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值