Chrome inspect学习(二)Android端如何查看线上环境移动端内嵌H5页面在手机中真实渲染的DOM结构、CSS样式、接口调用
2023-09-27 14:26:39 时间
前言
问题一:我们在App内嵌H5开发的过程中,如果想要看线上环境下,页面在手机中真实渲染的相关信息,例如:DOM结构、CSS样式、接口调用怎么办呢?
tip:DOM结构就像在chrome控制台中看到的那种,可以看到层级关系,以及js动态渲染的DOM呈现
方案
方案一:使用charles,可以查看接口调用,可以抓取页面的HTML、CSS、JS但是无法看到DOM结构
参考:Charles学习(一)之macOS Charles 4.x版本的安装、激活、使用以及软件功能了解
方案二:使用Chrome inspect,可以查看DOM结构、CSS样式、接口调用,就像在chrome控制台中一样
效果
结果
看本地/测试环境下,页面在手机中真实渲染的相关信息了~~
相关文章
- 3、Android中Activity的跳转
- 检测android的版本的办法
- Android 面试题:为什么 Activity 都重建了 ViewModel 还存在?
- Android面挂8回终于拿下大厂offer,Framework真的太重要了
- 《Android应用开发入门经典(第3版)》——第1.1节建立开发环境
- 《Android 应用案例开发大全(第3版)》——第2.8节壁纸中的着色器开发
- Android+Jquery Mobile学习系列(7)-保险人信息
- Android Application的使用及其生命周期
- android在ubuntu中编译为.apk资料
- Android应用程序内部启动Activity过程(startActivity)的源代码分析
- Android系统在新进程中启动自定义服务过程(startService)的原理分析
- android构建过程
- android 实现2张图片层叠效果
- android 可拖动的浮动 view
- Android 内置webview避免外部跳转或内嵌chrome植入复杂vue项目
- Android WebRTC 音视频开发总结(一)
- Android ListView 的优化
- Android Studio 常见错误 之 一直处于 gradle download 状态,长时间出现超时,最后构建失败的问题的处理方法
- Android导航Tab栏实现
- 移动浏览器Chrome 32 for Android移除300ms点击推迟
- 谷歌加快Chrome和Android融合 首批产品明年末问世