首页 > 其他分享 >移动端H5调试基础

移动端H5调试基础

时间:2022-08-19 19:12:56浏览次数:76  
标签:移动 USB Chrome H5 点击 手机 打开 调试

适用场景

此文档描述场景适用于Android机型及Chrome内核的浏览器

参考文档

Chrome Developer开发文档链接(需要梯子)
https://developer.chrome.com/docs/devtools/remote-debugging/

步骤

一、打开手机USB调试模式

不同厂商及系统的打开方式不一致,具体机型请百度

开启手机调试模式

示例:鸿蒙os
1、打开【设置】,然后在设置界面找到【关于手机】点击进入到关于手机界面;然后在界面中,连续点击【五次版本号】即可进入到开发者模式中,只有进入到此模式中,才能有开发者选项功能,进行USB调试;
2、依次进入【设置】-【系统和更新】-【开发人员选项】-【USB调试】

小米
1、【设置】-【我的设备】 -【全部参数】 -【MIUI版本】连续点击五次
2、【开发人员选项】-【USB调试】

连接数据线

等待系统安装驱动,确认手机系统下拉通知栏中有一个【已连接USB调试】提示
如果驱动有问题,请百度

二、在Chrome中打开调试页

Chrome地址栏输入chrome://inspect/#devices 并打开
image

三、真机调试

找到手机上已打开的移动端页面,点击inspect打开devTool,此步骤需要梯子,待完整打开devTool后可关闭梯子
image

image

标签:移动,USB,Chrome,H5,点击,手机,打开,调试
From: https://www.cnblogs.com/defaultlee/p/16603071.html

相关文章

  • 移动app测试安装与卸载(需要配置环境)
    一、app移动测试实战1、下载Android-sdk-windows。打开SDKManager.exe2、搭建环境设备:在手机的设置——>我的设备——>全部参数——>miui版本(redmik20pro)一直点击,知......
  • phpstorm双机远程调试环境搭建笔记
    原理:phpstorm监听一个调试端口,我设置为9001php运行时,xdbug连接调试端口cookie中如果带有XDEBUG_SESSION_START,并且XDEBUG_SESSION_START的值是phpstorm正在监听的值,则触......
  • JQuery案例qq表情选择和JQuery下拉列表选中条目左右移动案例
    JQuery案例qq表情选择点击qq表情,将其追加到发言框中<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>QQ表情选择</title><scriptsrc="......
  • 移动端布局
    移动端布局就是使你原先在电脑端展示的页面可以在移动端中展示,主要是控制屏幕的展示区域。比如电脑端的中心区域一般是固定版心,但是在移动端由于手机屏幕的原因都是全满状......
  • Pycharm Debug调试
    一、打断点一个断点标记了一个代码行,当Pycharm运行到该行代码时会将程序暂时挂起。注意断点会将对应的代码行标记为红色,取消断点的操作也很简单,在同样位置再次单......
  • 解决 Android真机调试 卸载后无法再次安装成功
    1、配置环境变量androidsdk中的tools目录和platform-tools目录都配置到系统环境变量path中; 2、运行cmd输入命令adbdevices查看当前连接设备的机器编号;......
  • linux下无法进入外加移动硬盘文件夹 No such file or directory
    (36条消息)linux下无法进入文件夹Nosuchfileordirectory_Katzelala的博客-CSDN博客_linux无法进入文件夹用Ubuntu系统遇到的一个小错误我们要进入一个文件夹,使用......
  • IDEA的debug调试技巧
    来自B站全网最实用的IDEADebug调试技巧(超详细案例)https://www.bilibili.com/video/BV1xa411Y72S?spm_id_from=333.337.search-card.all.click&vd_source=a3ca5632ce12......
  • React--移动端适配
    适配原理选择某个手机的尺寸大小作为基准,其他手机进行等比例缩放一般选择iPhone6(2倍屏幕),屏幕宽度为:375px适配方式rem:需要手动修改html元素的font-s......
  • 【快应用】打开一个H5页面,能修改标题吗?
    如果使用快应用webview接口打开网页,无法在快应用中修改标题栏,快应用显示的标题是来自于网页中设置的标题,开发者可以在网页中去修改标题,这样快应用中就同步修改了。如果使......