Chrome浏览器真机调试web页面

简介: 写前端页面的时候,移动端页面开发需要模拟触摸事件,在电脑上操作不太方便,使用物理机可以操作起来会更舒服。但是在使用物理机触摸屏幕的时候,调试起来有有点不太方便,好在谷歌浏览器给我们提供了真机调试的功能。

写前端页面的时候,移动端页面开发需要模拟触摸事件,在电脑上操作不太方便,使用物理机可以操作起来会更舒服。

但是在使用物理机触摸屏幕的时候,调试起来有有点不太方便,好在谷歌浏览器给我们提供了真机调试的功能。一些人可能会使用UC浏览器进行调试,但是在Mac电脑上无法安装UC浏览器。想起来谷歌浏览器用的更广泛,经常使用,还是使用谷歌浏览器调试真机吧。

操作

  1. 手机连接USB

  2. 打开开发者控制台,选择远程调试remote devices

    img_e4c40a1cf7750dbe9d9d64c29f376b55.png
    控制台

  3. 配置remote devices,在手机端信任此电脑。等到设备哪里看到手机型号为connected之后,就可以了。

img_851308d17bbf04a17ba29649526499ad.png
发现USB设备
  1. 调试页面,你访问的页面可以点击 设备符号看到,点击你的浏览器访问的页面。点insepect


    img_efea6b8da09abf43c50a599f160b8fc3.png
    访问记录
  2. 开始调试,和普通的PC端页面调试差不多,不过是在真手机上。


    img_c91480f19dad86147d759a46ee2176b3.png
    调试页面

最后

这篇文章主要介绍了如何配置谷歌浏览器,来调试真实的物理机设备。

目录
相关文章
|
1月前
|
前端开发 安全 UED
【项目实战】从终端到浏览器:实现 ANSI 字体在前端页面的彩色展示
在学习和工作中,我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级,我们可以使用不同的颜色来呈现,使其更加醒目和易于阅读。 在下图运行结果中,我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色,我们可以在控制台中以彩色的方式显示日志信息。例如,DEBUG 级别的日志使用白色,INFO 级别的日志使用绿色,WARNING 级别的日志使用黄色,ERROR 级别的日志使用红色,CRITICAL 级别的日志使用蓝色。
|
27天前
|
Web App开发 前端开发 JavaScript
Chrome 浏览器中执行 JavaScript
Chrome 浏览器中执行 JavaScript
54 0
|
28天前
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
18 0
|
3天前
|
Web App开发 JavaScript 前端开发
最新的 Chrome 浏览器架构有什么新的改变吗
最新的 Chrome 浏览器架构有什么新的改变吗
|
12天前
|
机器人 Shell 开发者
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
|
1月前
|
存储 前端开发 搜索推荐
Web前端网站(一) - 登录页面及账号密码验证
页面背景动态是烟花和文字特效与缓缓下落的雪花相结合,在登录表单的旁边还有五个白色光圈以不规则的方式环绕,当鼠标靠近时,会发出彩色的光芒~~~
37 1
Web前端网站(一) - 登录页面及账号密码验证
|
1月前
|
机器学习/深度学习 人工智能 前端开发
WebAssembly:浏览器中的新语言,引领Web性能革命
【6月更文挑战第12天】WebAssembly,简称Wasm,是浏览器中的新语言,旨在带来近乎原生的性能,引领Web性能革命。它具有高效、可移植、安全和多语言支持的特点,适用于游戏开发、图形处理、计算机视觉等领域。随着浏览器支持增强,Wasm将在跨平台应用、AI、机器学习、云计算和边缘计算中发挥更大作用,推动Web应用的发展。
|
1月前
jetty内嵌web页面服务入门
jetty内嵌web页面服务入门
18 1
|
20天前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
20天前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改

热门文章

最新文章