使用Chrome调试web app

鸿蒙开发-使用chrome调试APP web.webview HTML 【代码】鸿蒙开发-使用chrome调试APP web.webview HTML。 阅读详情

最近接到了一个完全用HTML5开发的项目,由于这个APP运行的时候需要调用Android原生代码,所以HTML5页面不能单独拿出来在Chrome中调试,所以只能用Chrome直接连接手机进行调试,下面就是手机连接Chrome教程。

  • 首先把手机连接到电脑,打开开发者模式

  • 等待驱动安装完成后,驱动装好连接成功后,你可能会在设备上看到一个弹框请求允许使用这台计算机通过usb调试,勾选一律允许,点击确定。
  • 这时候打开电脑的chrome,在地址栏输入  chrome://inspect  ,会看到一下的页面(者表示已经连接成功手机)

  • 这时候打开一个web APP,这时候会看到一个连接这个连接就是当前手机APP页面的地址,可以看到是asset文件夹下的一个HTML文件

  • 然后点击inspect,这时候chrome会弹出一个窗口(成功完成微笑)

注:当第一次点击inspect的时候回 弹出一个白的窗口,这个时候chrome会联网下载组件(翻墙),所以第一次情况下一定要有外网,否则只能一直白屏,需要科学上网,如果已经下载完成之后以后就不需要了,直接点击inspect就可以了。


Android的原生APP如何调试嵌入的H5页面 前言 现在原生app中混合web页面这种方式用的场景越来越多,app的原生代码很容易使用android studio进行debug调试,web页面在Chrome浏览器中F12打开开发者工具,也非常方便调试web页面。但是嵌入在app中的web页面如何调试代码呢? 使用混合开发WebView调试必备神器DevTools。 使用DevTools进行调试 准备工作 1.设置Webview调试模式 可以在... 阅读详情

相关推荐

在mac上使用android模拟器通过chrome调试webview内web页面

之前一直使用备用android机在做调试,这次正巧备用机坏了,临时装了个android模拟器来做调试,发现比用真机更方便 现在在mac上可以很方便的通过android模拟器来直接调试webview中的web页面,各种应用比如钉钉内的web 我们这里就以钉钉内的应用页面来举例

CloudJay的博客 2785

uni-app通过Webview调试在电脑上做app端调试

然后在 视图 中找到 显示Webview调试控制台(D) 点击勾选上。如果你没有开启真机调试 他就会找不到可以模仿的设备环境。我们就可以在弹出的窗口内像WEB端一样进行app调试了。首先 我们要按正常步骤 将项目用真机调试跑起来。点击这里的 Inspect(调试)中的就会出现 Webview调试。

weixin_45966674的博客 1938

Vue + quasar-framework进行Vue混合app开发 ─ App真机调试(三)

写代码总避免不了会出错需要调试,Quasar混合开发的app调试方法也很简单,就和平时写web端代码调试一样。 此处列几种常用的调试方法 真机调试 真机调试也就是用自己的手机进行调试,完全真实环境。 手机连接电脑,打开手机的开发者模式,将USB调试功能打开 手机连接WIFI,保持和电脑处于同一个网段内 如果电脑插的是网线,没有WIFI的话,可以手机在移动网络共享里面打开USB共享网络。 准备就绪后...

寻梦无痕 8002

安装Chrome插件时出现的“程序包无效”解决方法

打开谷歌扩展程序,将插件xxx.crx 拖至扩展程序时报错如下: 解决方法: 1、找到插件xxx.crx,把crx后缀名改为rar,解压缩得到文件夹xxx, 如下图sense: 2、打开该文件夹sense,把里面的"_metadata"文件夹改名为"metadata"(去掉下划线_): 3、进入扩展程序中心,启用开发者模式,加载正在开发的程序包,选择刚才的文件夹sense...

river106的博客 5256

Chrome Web App开发小结

前言 这篇文章主要分享下自己在开发Web App遇到的问题和过程,以及一些很已经(如何)填平的坑。如果您想要“如何开发Web App”或《30分钟学会开发Web App》,请移步官方的开发手册(文档)。(下有链接)。 背景 感觉现在大家都在争论(讨论)两件事情,Web App和Native App。前不久参加的HTML5守望者活动,各方大佬都在针对这二者之间的优劣,差异,兼容,普及等进行探讨。当然,有争议的才说明有价值嘛。 Chrome Web App 前不久Chrome又一次因超过了什么什么登上了各大新闻媒体的首页,是的这已经不是第一次了。Chrome自身有强大的插件市场,和最近(也不算最近

MS1030超声波流量计电路实战:如何用15ps精度优化水表设计(附配置代码)

本文深入探讨了如何利用MS1030超声波流量计芯片实现15ps高精度测量,以优化水表设计。文章从系统误差分配出发,详细解析了硬件电路设计要点、SPI通信配置及核心优化技巧,如利用可编程偏置电压和8回波累加功能来提升抗干扰能力与测量稳定性,并附有实用的配置代码示例。

svm4gardener的博客 331

chrome 上调试web app

现在,html5编写的web app越来越受到开发人员的欢迎,虽然和原生app相比还有很多不足,但是其强大的可移植性和简单性还是让其占有一席之地。在开发过程中,往往存在一个问题,浏览器中调试的样式和手机客户端上调试的样式是有一定的区别,但是在手机上又不能debug,查看css样式文件等,因此可以选用chrome远程调试手机上的web 应用。 1. 打开手机的开发者模式,允许USB调试

Laura Hong的博客 997

k8s学习笔记(3)--- kubernetes核心技术概念

kubernetes核心技术概念 1.API对象         API对象是K8s集群中的管理操作单元。K8s集群系统每支持一项新功能,引入一项新技术,一定会新引入对应的API对象,支持对该功能的管理操作。例如副本集Replica Set对应的API对象是RS。 2.集群(Cluster)         集群是指由...

梦谜的博客 1291

浏览器(chrome)调试app webview页面

浏览器调试安卓app页面

sinat_41694829的博客 5286

NR RRC协议(2)---RRC连接建立流程

RRC连接建立目的是建立SRB1 RRC连接建立还用于将初始NAS消息从UE传送到网络 RRC连接的初始阶段期间,不激活AS安全性 RRC连接建立由UE侧发起

crg2046的博客 1957

【Unity】Spine动态换装进阶:SkeletonGraphic插槽级皮肤切换与内存优化

本文深入探讨了Unity中Spine动态换装的进阶技术,重点解析了SkeletonGraphic插槽级皮肤切换的实现原理与内存优化策略。通过代码示例展示了如何高效管理皮肤实例、避免内存泄漏,并提供了对象池、纹理合并等性能优化方案,帮助开发者提升2D角色换装系统的运行效率与稳定性。

food6的博客 196

Android KitKat 4.4 使用Chrome DevTools 进行WebView远程调试 | remote debug web APP in chrome

google 出的 Chrome Dev Tool 支持了对 Android WebView 的远程调试,详细信息见下方链接:

刘燃的专栏 4516

ROS2初级面试题汇总

总结和收集了一些关于ros2的问题和解答记录

qq_57633442的博客 5550

Safari 调试iPhone web页面(App为开发版)

1、Safari设置: 打开Safari偏好者设置,选中“高级菜单”,将页面最下方的“在菜单中显示开发菜单”复选框打钩,这样设置完毕后就能在Safari菜单中看到开发菜单 2、iPhone 设置: 打开iPhone手机设置——>选择Safari,找到高级选项,有JavaScript开关web检查器开关,将两个开关打开 3、iPhone连接mac上,打开Safari浏览器,运行App(开发...

heqiang2015的博客 7664

TwinCAT3实战:从零搭建倍福PLC的Modbus-TCP Server

本文详细介绍了如何使用TwinCAT3从零搭建倍福PLC的Modbus-TCP Server,包括环境准备、工程配置、参数设置、客户端连接测试及常见问题排查。通过实战步骤和实用技巧,帮助工程师快速掌握倍福PLC与Modbus-TCP的通信实现,提升工业自动化项目的开发效率。

weixin_30797199的博客 173

mapbox高阶,加载倾斜摄影

本文详细介绍如何基于mapbox-gl v3.8.0版本实现倾斜摄影的加载,亲测可用。希望能帮助到您。一起学习,加油!加油!

我哎GIS博客 342

Win 10如何连接Android设备调试App Web应用

前言:最近测试Android大板上App内的web应用,总结一下所学的新知识 一、安装adb (1)pc端上有安装Android studio,找到adb的路径(默认路径一般为:C:\Users\user\AppData\Local\Android\Sdk\platform-tools) 二、adb连接Android 大板设备 (1)cmd上切换到adb的路径 (2)输入adb connect ×...

qq_42462719的博客 892

GStreamer中h264parse元素

h264parse是 GStreamer 中处理 H.264 视频流的关键元素,主要负责解析和准备 H.264 流以便后续处理。

深之JohnChen的专栏 1020

使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)

使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试也由于 safari 的打通变得很方便。而 Android 系统,尤其是国内环境下的 Android 系统,由于版本跨度大,且各家厂商采用自研内核,使得其成为移动端页面问题出现的主要平台。工程...

weixin_34138377的博客 1183

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

使用Android模拟机开发调试移动端页面

使用真机调试可以还原bug场景,但由于真机上不方便输出调试信息,不容易进行代码调试。这里可以通过在电脑上安装一个Android模拟器,然后结合Chrome的devices远程设备功能,进行移动端页面的开发和调试安装模拟器mac上面的Android模拟器可选择的比较少,且性能不太好,这里推荐夜神Android模拟器 https://www.yeshen.com/ ,windows上也可使用(wind...

kabuda0311的博客 1万+

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

APP开发调试样式

这样在调试时可以看到原始的 SCSS 源码位置。

TinaSlowDown的博客 787

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

Mac下的Chrome或Safari访问跨域设置,MBP上使用模拟器Simulator.app或iphone+Safari调试网页...

Mac下的Chrome或Safari访问跨域设置: mac下终端启动Chrome $ open -a Google\ Chrome --args --disable-web-security 或 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security mac下终端启动Safar...

weixin_33878457的博客 734

WebView 与PC机Chrome配合调试

参考自http://www.cnblogs.com/terrylin/p/4606277.html 移动端WebView开发调试:Chrome远程调试 Chrome DevTools调试移动设备Brower Page Tabs/WebViews 注意:有个很坑爹的地方,使用该功能需要FQ,你懂得。 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrom...

weixin_30268071的博客 427

浏览器调试app如何处理跨域

HBuilder X 调试app ,用浏览器调用,跨域问题解决

亲测,只为展现最完美的有效! 671

APP+web测试

APP分为安卓和IOS两种。由于IOS的限制,若想在IOS中安装APP,可在电脑上下载工具iTools,并在设置中授权信任该APP。由于APP测试主要是通过查看网关的返回值来判断是否正确,所以需要利用fiddler或者Charles抓包,获取每个请求的get,验证每个返回字段。其次由于APP测试是在手机端进行测试,所以需手机连接host。主要是电脑发出WiFi,切换host,将抓包工具的信任证书下...

romanlan的博客 393

本地调试H5页面

摘要 详细讲述微信H5页面调试(安装在安卓或iOS手机上的),钉钉内H5页面的调试,QQ、微博以及各浏览器上H5页面的调试方法 背景 大学毕业快要一年了,用leader的话说我也是有一年开发经验的前端开发工程师了,输出是检验输入的最好方法,那我就慢慢来总结这一年来在工作中总结的经验教训,分享给大家,有不专业和不完善的地方,请大家多多指点反馈,比心~ 做过一段时间的运营需求,一...

weixin_34326558的博客 1048
上一篇: Android 子线程发送handle更新UI遇到This message is already in use解决方法
下一篇: Android实现发短信,打电话
bbccloud
博客等级 码龄11年 23粉丝 25原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值