如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面

本教程用的是我自己的手机三星A9,其他安卓手机方法也相同。

第一步首先你得打开手机的开发者选项,确保USB调试和通过USB验证应用程序保持打开状态,如图所示

第二步,确保你的电脑和安卓手机都已经安装了谷歌浏览器

第三步,打开你电脑的上谷歌浏览器,调出控制台,,点击如图所示这个3旁边的3个点,这里面有更多的功能,会出现这个选项,我们点击More tools,再选择,在之后的页面中如图所示的选项必须打钩,然后用你数据链连接你的电脑和手机,手机就会弹出一个连接提示,你点是就可以了,连接成功就会跟上图中红色箭头标注的一样,出现带绿色小圈的你的手机型号。

第四步,在电脑上的谷歌浏览器输入这个网址chrome://inspect/

就会出现这个面

第五步,打开你手机上的谷歌浏览器,输入你想要调试的网页,我一般都是把网页放到我的本地服务器,在手机浏览器上输入我的本地网址,如果是一个百度页面的例子

最后一步,我们点击inspect就可以审查手机页面了,,审查方法就跟审查PC网页一样了。

第一次发表博客,以前也想着写一些,一直很忙,今天心血来潮,就写了一遍,接下来会再接再历分享更多经验,谢谢大家~本人还创建了一个前端技术交流qq群,群号是399627992,感兴趣的朋友可以加下。我下次分享如何使用safari浏览器调试ios手机上的移动网页。

时间: 2024-07-30 20:30:39

如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面的相关文章

在安卓手机上学习C语言 - 安卓手机C/C++编译环境的搭建 : 程序世界的创建

   在安卓手机上学习C语言           安卓手机C/C++编译环境的搭建 : 程序世界的创建 在电脑上运行的QQ,手机上的QQ都是程序, 这些通电就能用的神奇玩意, 如果我说它们都是程序员用一个一个英文字母,数字,奇奇怪怪的符号创造出来的,我想那些没有任何概念的朋友可能会感到惊讶. 是的, 在没有揭开程序世界的神秘面纱之前, 一切都是那么神奇. 实际上, 程序确实是用一个一个英文字母(或者说拼音字母...)来写出来的, 就和写小说一样写出来的. 但是并不是写完之后把写出来的内容保存到一

Unity3D 如何在安卓手机上播放视频

以前只会在电脑上通过Unity3D播放视频,研究了下发现通过Unity3D在手机上播放视频也非常简单.现介绍如下. void OnGUI() { if (GUI.Button(new Rect(0,0,150,80),"播放/继续")) { Handheld.PlayFullScreenMovie("test.mp4", Color.blue, FullScreenMovieControlMode.Full); } } 简单吧 Unity3D 如何在安卓手机上播放视

如何在你的安卓手机上运行Windows XP?

?? 如何在你的安卓手机上运行Windows XP? 原理很简单:用虚拟机运行在安卓手机中,然后把Windows XP运行在虚拟机里面.这个虚拟机怎么做呢,用"BOCHS"的电脑版XP安装好之后再把影像文件放到安卓上,使用安卓版BOCHS运行XP. 详细步骤可以参考: http://www.techulator.com/resources/7523-How-Run-Windows-XP-Android.aspx 或者 http://www.androidgyan.com/how-to-

安卓手机上怎么录制屏幕视频

我们已经进入互联网时代,每个人都寸步不离手机.电脑等电子产品,看到美丽好看的视频总想记录下来,毕竟看到喜欢的视频还真不太容易,所以问题来了,安卓手机上怎么录制屏幕视频呢? 使用工具: 手机 操作方法: 1.随着手机的更新换代,很多手机上都是有屏幕录制这个功能,可以录制手机上的任何画面,但是有时候录制下来的视频可能会有一些模糊,所以想要录制好视频,还得需要专业的录制视频工具. 2.比如说我们要录制手机游戏视频,那么首先在手机上打开想要录制的王者荣耀游戏并进入一场游戏对局. 3.然后设置录制游戏时需

[Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决办法

Ext.Msg.alert等弹出框在某些安卓手机上,点击确定后不消失. 原因是: 消息框点击确定后有一段css3 transform动画,动画完成后才会隐藏(display:none).有些奇葩手机就是不一样. 解决办法就是禁用消息框的动画: 方法一: 在app.js的launch方法里面加上 Ext.Msg.defaultAllowedConfig.showAnimation = false Ext.Msg.defaultAllowedConfig.hideAnimation = false

手机背景图片在安卓手机上不显示

遇到一小问题,做好的手机页面在安卓手机上不显示 红框里的图片都不显示: 代码是div里套一个a标签,两个都是背景图片 后来把背景图片的background-size:cover;去掉就显示了,不知道为什么.先记录下来

如何破解安卓手机上的图形锁(九宫格锁)

http://mobile.51cto.com/iphone-441496.htm 安卓手机的图形锁(九宫格)是3×3的点阵,按次序连接数个点从而达到锁定/解锁的功能.最少需要连接4个点,最多能连接9个点.网上也有暴力删除手机图形锁的方法,即直接干掉图形锁功能.但假如你想进入别人的手机,但又不想引起其警觉的话……你可以参考一下本文. 前提条件:手机需要root,而且打开调试模式.一般来讲,如果用过诸如“豌豆荚手机助手”.“360手机助手”一类的软件,都会被要求打开调试模式的.如果要删除手机内置软

用Chrome devTools 调试Android手机app中的web页面。

(1) 手机要满足Android系统为4.4或更高版本,低版本不支持这种方式.(2) 确保App已经开启了webview的debug调试模式,由Android工程师协助.(2) 用usb数据线连接好手机与电脑.(3) 将手机中的 设置 - 开发人员工具 - USB调试功能打开.(4) 打开chrome://inspect/#devices,即单击chrome右上角控制按钮 - 更多工具 - 检查设备 - 勾选上 Discover USB devices(5) 在app中访问一个web页面,对应的

在安卓手机上学习C语言 -- 前言

现在有很多学习C语言的系列教程, 不过这些教程都是在电脑上进行练习的, 这系列文章是给那些手上还没有电脑, 但对于编程有很大的兴趣的朋友看的. 这一系列的文章是写给没有编程基础的朋友的, 在这系列文章的前期, 可能会有一些类似于童话的谎言, 因为没有基础的朋友对于一些非常专业的术语可能会非常迷茫,而想要解释清楚这些术语需要非常多的陌生的概念.而这些概念可能比一个术语更加复杂, 所以在前期, 我会对一些非必要的术语进行片面的阐述. 这系列的文章我也是一时想起, 并没有建立好完善的体系 , 不过我会