移动端H5APP开发调试之Chrome远程调试

移动端采用原生开发还是H5开发一直接争论不休。但不论怎么说,采用H5开发app不仅仅快速高效,而且布局简单、漂亮,目前许多的框架已经可以做到让人看不出是原生还是H5开发了。

采用H5开发有一个好处就是可以用Chrome连上真机,直接调试,那真是神器啊。

除了Chrome Debug之外,也涌现出许多第三方开发的远程调试工具,诸如支持全平台调试的 Weinre 和Adobe Edge Inspect CC,国人自研的iOS专用工具MIHTool 等。但本人还是习惯于 Chrome,太方便了。

使用方法也很简单,只要真机的android版本在 4.4 以上,且开启了USB调试。

在Chrome中输入chrome://inspect 或者about:inspect,打开后DevTools后,确保打钩选中Discover USB devices。

如果USB连接成功,这时候我们可以看到移动设备的型号和设备上运行的页面和允许调试的WebView列表。找到需要调试的目标页面,点击inspect即可打开DevTools,点击reload可重新加载当前的调试页面,点击focus tab可将标签页置顶,close为关闭当前页面。更可以通过在输入框中键入网址新开一个页面。

注意:如果打开的页面为空白,则需要翻墙,确保 appspot.com 域名可以访问。提供一个可用的 hosts,64.233.162.141  appspot.com

时间: 2024-10-09 23:34:20

移动端H5APP开发调试之Chrome远程调试的相关文章

移动端Web开发调试之Chrome远程调试(Remote Debugging)

本篇主要说一下Chrome RemoteDebugging 的方法,之前也遇到一些坑,自己总结了一些经验,分享如下. Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器. ● 通过端口转发(port forwarding)与虚拟

安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码应用,通过移动设备访问打开浏览实际效果,每次换设备都要重复这些操作,页面多的话这些繁琐的事情就特别让人厌烦了.移动互联网的浪潮,

Chrome远程调试手机端UC浏览器

今天在手机UC上发现我的一个网页打不开,而在PC上是正常的,因此需要通过Chrome远程调试手机端UC浏览器查下问题,折腾了老久才弄好. 获取 Google USB 驱动程序 首先将手机通过USB接口与PC连接 接着要确认手机USB驱动程序是不是正常,可以在设备管理器中查看,如果设备左侧没有黄色感叹号,则说明正常. 如果不正常就需要手动安装了,给个链接:获取 Google USB 驱动程序 开发者选项 打开手机的开发者选项 进入手机中 我的设备 -> 全部参数,连续7次点击版本号,以Redmi

使用chrome远程调试设备

前言:在做ionic项目的时候,除了发现可以用weinre调试页面之外,还发现了用chrome一样可以远程调试手机上的页面. 使用chrome开发工具远程在Android上远程调试 准备工作 开始远程调试之前,需要做好如下准备: 在你电脑上安装Chrome 32 或者更新的版本 一根连接Android设备的USB线 手机系统是Android 4.0+ 并且在手机上安装 Android版本的Chrome浏览器. 注意:远程调试需要电脑上的chrome浏览器版本比手机上的chrome浏览器版本新.

使用 桌面的 chrome 远程调试 Android 的页面

手机浏览器是没有开发者工具的,所以调试手机网页是非常麻烦.使用 chrome 的远程调试功能可以像调试桌面端那样调试手机页面. 准备 手机端:chrome for Android, 安装谷歌浏览器 桌面端:谷歌浏览器,版本建议大于手机端的,最好使用 chrome canary USB 连接线, 也就是你充电器的那条线 开启调试模式 使用 USB 连接你的电脑,并开启调试模式. 使用 android 4.2 或以上的手机可能没有调试模式选项,可以找到 “设置 > 关于手机 > 版本号(Build

使用chrome远程调试设备及调试模拟器设备

使用chrome开发工具远程在Android上远程调试 准备工作 开始远程调试之前,需要做好如下准备: 在你电脑上安装Chrome 32 或者更新的版本 一根连接Android设备的USB线 手机系统是Android 4.0+ 并且在手机上安装Android版本的Chrome浏览器. 注意:远程调试需要电脑上的chrome浏览器版本比手机上的chrome浏览器版本新. 设置Android手机 在Android手机上选择 设置>开发人员工具>USB调试,然后会弹出一个提示框"是否允许U

spark JAVA 开发环境搭建及远程调试

spark JAVA 开发环境搭建及远程调试 以后要在项目中使用Spark 用户昵称文本做一下聚类分析,找出一些违规的昵称信息.以前折腾过Hadoop,于是看了下Spark官网的文档以及 github 上 官方提供的examples,看完了之后决定动手跑一个文本聚类的demo,于是有了下文. 1. 环境介绍 本地开发环境是:IDEA2018.JDK8.windows 10.远程服务器 Ubuntu 16.04.3 LTS上安装了spark-2.3.1-bin-hadoop2.7 看spark官网

[转] 在安卓设备上使用 Chrome 远程调试功能

你的网页内容在移动设备上的体验可能和电脑上完全不同.Chrome DevTools 提供了远程调试功能,这让你可以在安卓设备上实时调试开发的内容. 安卓远程调试支持: 在浏览器选项卡中调试网站. 在原生安卓应用中调试网页内容. 将屏幕从你的安卓设备上投影到你的开发机器上. 使用端口转发和虚拟主机映射来让安卓设备访问开发使用的服务器. 需求 要开始远程调试,你需要: 安装 Chrome 32 或者之后的版本. 连接安卓设备用的 USB 线缆. 对于通过浏览器调试:安卓 4.0 以上并且安装了 Ch

如何通过Chrome远程调试android设备上的Web网站

网上的帖子很多,但很多都是老版本的,试过了,根本不管用,花了一天时间,终于在本机试验通过了,特记录下来,以备用.有需要的朋友也可以参考.先上一张图,看看PC端chrome上调试的效果: 左边是手机的模拟操作器,右边是大家熟悉的开发人员工具,也可以在手机上操作,PC端左边屏幕会同步到手机上的界面. 下面再说一下环境配置: 1.手机端,我手机是华为荣耀4,android4.4.4,很旧的手机了,大家别笑话,但不影响本次试验.安装chrome版本为58.0.3029.83: 2.PC端,win7 64