使用chrome调试android前端页面

移动端开发时,我们常使用chrome自带的模拟器,模拟各种手机设备。

但模拟毕竟是模拟,当开发完毕,使用真机访问页面出现问题时如何调试呢?

下面介绍一种针对android机的调试方法

1. 在pc和android手机上都安装最新版本的chrome

2. 使用usb将手机的PC相连接

3. 手机中打开“设置”->"开发人员选项"->"USB调试"

   

4. 打开pc侧chrome, 在地址栏中输入chrome://inspect/#devices

选中discover usb devices。可以看到我们的手机设备,如下图所示:

5.在手机侧chrome中访问页面

比如:m.haha.sogou.com

同步的,我们会在pc侧的chrome上看到到手机侧访问的页面,如下图所示

6. 点击上图中的inspect, 熟悉的调试界面出现!

注意图中右上角的手机图标,点击后,效果更加酸爽。手机打开的页面被直接拉到pc上显示了。调试更加事半功倍!

时间: 2024-10-08 23:03:13

使用chrome调试android前端页面的相关文章

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

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

OkHttp+Stetho+Chrome调试android网络部分(原创)

android网络调试一直是一个比较麻烦的部分,因为在不同序列的请求中,返回的数据会有不同的变化,如果能像web开发一样使用调试功能查看页面的访问数据该是多么美好的事情! 很幸运的是,现在Android开发也可以实时监听网络访问了,能够看到你的发送数据信息,也能够看到返回数据信息. 如图: 点击每个请求会看到详细页面,可以查看请求的详情,如图: 如果要达到上面的效果,你需要改造你的网络请求模块,使用Chrome浏览器和android程序之间的中间件来连接,这就是本篇要介绍的主题: OkHttp+

使用chrome调试微信浏览器页面

1 打开手机的USB调试功能 由于华为手机的特殊性需要在拨号页面输入 *#*#2846579*#*# 后台设置的-> USB端口设置 为Google模式 2 打开微信手机调试 微信中打开 http://debugx5.qq.com 在信息选项卡中勾选 打开TBS内核Inspecor调试功能 打开vConsole调试功能 3 打开chrome调试页面 chrome://inspect/#devices 即可看到手机型号及打开的页面 原文地址:https://blog.51cto.com/13504

OkHttp+Stetho+Chrome调试android网络部分

如果要达到上面的效果,你需要改造你的网络请求模块,使用Chrome浏览器和android程序之间的中间件来连接,这就是本篇要介绍的主题:OkHttp+Stetho+Chrome进行网络调试. okhttp是Square的一款非常优秀的网络访问框架,它的使用非常简单,可以通过github去获取其源代码:https://github.com/square/okhttp Stetho则是facebook开发的一款连接android程序和Chrome开发者工具的一个桥梁:https://github.c

chrome://inspect 移动前端调试方案(Android + Chrome 实现远程调试)

一:背景通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新 那怎么能达到在pc端修改代码 在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了 二.功能 我们先看下最终想要达到的效果 上图的左边是pc端的chrome浏览器,右边是手机上的chrome 然后可以看到当鼠标移动到某个d

移动前端页面与Chrome的远程真机调试

一年不见,博客园都长草啦...... 前几日刚入手新手机小米5,系统真心流畅呀.为啥要买小米5呢,因为要提高生产力呀,好好玩移动前端开发呀哈哈哈 那么问题来了,要怎么调试手机上的前端页面呢? 很久很久以前,我的做法是:在PC上用Chrome移动模拟器调试好后,基本OK,再把相关文件传到手机上,在真机上测试以防特殊问题出现. 这个主要有两个缺点:一是传来传去的麻烦,数据量大的那就更麻烦了:二是只能显示地看着页面测试,不能做到真正的调试,测试出现问题了又得重新传. 现在,我的做法是:用PC端的Chr

在 Chrome 中调试 Android 浏览器

最近需要使用 Chrome Developer Tools 调试 Android 浏览器,但是官方指南并不是很好使,经过一番折腾,终于调试成功了,在此把经验分享给需要的朋友. Chrome Developer Tools 是前端工程师必不可少的工具,它极大的提高了我们的开发调试效率.在移动开发的时代,我们也必须掌握手机浏览器在 Chrome 中调试的方法.本篇仅介绍 Android. 环境 不同的环境可能存在一些差异,我的环境是: Windows 10 电脑 Chrome 50.0.2661.7

利用 Chrome 开发者工具远程调试 Android 中的原生 WebView

之前写过一篇关于 Android Studio 断点调试技巧 的文章,但都是针对 Native 代码的调试,对于 Hybrid 开发模式下的 WebView 却无从下手.幸运的是,PC 中的 Chrome 浏览器提供的开发者工具能够帮助我们远程调试 Android 中的 WebView 加载的网页. Android 4.4 (KitKat) 开始,使用 Chrome 开发者工具可以帮助我们在原生 Android 应用中远程调试 WebView 网页内容.一起来看看怎么操作吧. 第一步,设置 We

chrome inspect 远程调测:Chrome on Android之一 普通调试

本文PC环境: Chrome: 版本 33.0.1750.22 dev MAC OS:OS X 10.9.1 特别注意:Chrome DevToolsl使用时会联接到appspot.com,而此网址被墙,以下教程需要先在本机使用翻--墙代理,否则在chrome://inspect中无法点击网页的inspect链接打开Deleloper Tools. Mac上使用goagent教程:http://maolihui.com/goagent-mac-detail.html 其他操作系统如何使用goag