Chrome浏览器Chrome DevTools添加额外测试模拟移动设备（含Device Name_Width_Heigh_User agent等）

最新推荐文章于 2024-12-16 08:30:00 发布
最新推荐文章于 2024-12-16 08:30:00 发布
阅读量3k 收藏 6
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 实用工具 文章标签： Chrome 开发 Device Name 测试设备 型号
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WeilaPls/article/details/116951206
本文提供了一张详细的表格，包含谷歌Chrome浏览器中用于模拟不同移动设备的参数，如iPhone和Samsung Galaxy系列等，便于开发者进行响应式网页设计和测试。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

开发者最爱用的浏览器，谷歌Chrome浏览器，是诸多程序猿最受欢迎的模拟器之一，其开发者模式下的测试设备（类似模拟器）功能更是相当好用，其他浏览器的类似功能都是根据Chrome的内核优化过来的，但是官方给的测试设备列表有点少，只能自己添加，为了方便查询，做了下这个表格，供大家收藏使用。

在这里插入图片描述
这个功能官方是叫“Chrome DevTools”，需要的设备参数如下表
Device Name：设备名称 Width：宽 Height：高
device pixel ratio：设备像素比 User agent string：浏览器标识

Device Name Width Height DPR User agent string
iPhone 11 414 896 2 Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Mobile/15E148 Safari/604.1
iPhone 11 Pro 375 812 3 Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Mobile/15E148 Safari/604.1
iPhone 11 Pro Max 414 896 3 Mozilla/5.0 (iPhone; CPU iPhone OS 13_2 like Mac OS
最低0.47元/天 解锁文章

200万优质内容无限畅学
Chrome的启动参数
Criss@陈磊
02-23 5544
List of Chromium Command Line Switches Condition Explanation --[1]⊗ Classic, non-material, mode for the |kTopChromeMD| switch.↪ --0⊗ Value of the --profiler-timing flag that will disable timin...
【Python】高效的Web自动化测试利器—Python+Playwright快速上手自动化实战指南
墩墩分墩
08-16 6751
**Playwright是微软在` 2020 年初 `开源自动化测试工具，功能和 selenium 类似，都可以驱动浏览器进行各种自动化操作。** - 支持主流浏览器，如Chrome、Firefox、Safari 等，同时支持以**无头模式、有头模式**运行，并提供了**同步、异步的 API**，可以结合 `主流测试框架`使用，并且支持浏览器端的自动化脚本录制等功能。 **特点：** - 跨浏览器：Playwright 支持所有现代渲染引擎，包括Chromium、WebKit 和 Firefox； - 跨
Chrome浏览器devtools使用系列二：模拟不同设备和视口
zzyp1927314的博客
06-20 5576
本文讲解的版本信息如下，如果使用的版本和讲解的版本差距过大，可能会有不同的地方。本。
给Chrome浏览器添加 IPhone 13、12等手机型号做兼容适配
蓝即正义
12-08 1万+
1、圣诞将至，近期在为圣诞项目上活动，发生了下图的小问题，就写个blog。在做移动端适配时离不开的手机型号调试。 测试说有1PX的误差，但是在我的浏览器就没问题。 2、以下是Chrome自带的一些手机型号。可以看出在2021年底的今天，可以说是非常陈旧了。 3、接下来我们就添加新的手机型号。 先拿目前苹果系的最新机型iPhone 13为例，（我不喜欢IPhone）。 我们要填一些想要加入的设备的信息： 1）、首先是名称可以自行命名 2）、宽、高、像素比，这三项是重要的，要模...
Chrome自定义设备（自定义分辨率）设备分辨率设备、浏览器添加并启用设备、模拟屏幕、模拟分辨率、模拟设备
Dontla的博客
12-16 6787
添加自定义设备如果你的开发机器屏幕分辨率较小，可能需要调整缩放比例以便更好地查看页面内容。通过以上步骤，你可以在 Chrome 开发者工具中添加并启用自定义设备，从而模拟各种高分辨率屏幕。
Chrome添加调试机型
小布1994的博客
09-06 8620
打开chrome,按F12。选择toggle device toolbar。切换到手机模拟器模式，手机类型下拉列表，选择Edit device name 输入设备名称 如 HuaWei P10 device pixel ratio（设备像素比），一般是输入2 输入手机分辨率的width、height(如果像素比是2,19201080分辨率的手机，在这里widthheight就要输...
Chrome浏览器内嵌的各种手机模拟器
GBin1.com
10-15 3554
打开chrome的控制台标签，然后，点击simulator子标签页，选择需要的手机即可，如下图： 模拟器如下： 阅读原文：Chrome浏览器内嵌的各种手机模拟器
selenium启动chrome模拟器模拟手机
weixin_34247299的博客
07-11 340
一、如果chrome选项里边有这个模拟设备（比如iPhone 6 Plus）： 1、先启动Selenium Grid，比如命令：java -jar selenium-server-standalone-XXX.jar。 2、代码如下： #coding=utf-8 from selenium import webdriver mobile_emulation = { "devic...
浏览器模拟设备添加
最新发布
04-04
好的，用户想知道如何在浏览器中添加和使用设备模拟功能进行调试或测试。首先，我需要回忆一下相关的知识。根据提供的引用内容，特别是引用[1]和[2]，Chrome浏览器有开发者工具可以模拟移动设备。用户可能需要步骤...
模拟移动设备：Chromedriver的高级应用与测试方法
![模拟移动设备：Chromedriver的高级应用与测试方法](https://qarocks.ru/wp-content/uploads/2023/02/selenium-webdriver-1024x576.jpg) # 摘要 本文旨在深入介绍和分析...此外，文章也探讨了移动设备模拟测试的
Chrome Emulated Devices Add iPhone XS Max
aiqi1964的博客
09-11 2297
转载于:https://www.cnblogs.com/mr-hu2009/p/11507372.html
探究Chrome仿真模拟设备时Click区域不准确问题
q1003675852的博客
12-28 1410
在Chrome DevTools中开启仿真设备（微信开发者工具也有类似问题），如果页面元素有绑定click时，实际点击事件响应区域会溢出绑定事件的对象范围。本文通过实验代码重现问题情景，并通过查阅资料给出了调查结果。
Chrome模拟平板调试
weixin_30723433的博客
06-27 1101
1. 按F12，打开开发者工具，右上角，点击红圈中的标志。然后在弹出的面板中点击'Emulation'。 2. 会看到左侧的四个选项卡 Device 设备、Screen 屏幕、User Agent 和 Sensors 传感器。 3. Device 不多说了，先选择是哪一款移动设备，从IPhone5 到 Samsung Galaxy Tab应有尽有。 Screen 注意一点...
在Pycharm中使用selenium对Chrome浏览器进行web测试（从配置环境到测试）
阿_巴打的博客
04-04 1989
在学习web测试时，遇到了一些问题，下面整理一遍在pycharm中用selenium对Chrome浏览器进行web测试的流程。 前提需要安装好Python环境、Pycharm、pip等 通过pip安装selenium，在cmd控制台以管理员身份执行命令pip install selenium，安装好后输入命令pip show selenium查看版本号。 打开Chrome浏览器，查看当前的版本号，进入安装浏览器驱动|Selenium选择对应版本进行driver驱动的下载（除了Chrome也可选
【最佳实践】Chrome调试利器~移动端H5调试工具_chrome://inspect/#devices
一起寻找DX3906-探索未知
06-11 5046
Chrome调试利器~移动端H5调试工具_chrome://inspect/#devices
使用chrome调试手机,平板,pc上各种浏览器上的页面
热门推荐
05-31 1万+
使用chrome调试手机,平板,pc上多种浏览器的页面展示 作为web开发者，特别是现代web开发者，是否要调试手机，平板，电脑上的显示效果？chrome自带了这种很强大的神器 1、打开chrome（下面的步骤如果不成功，请先升级chrome浏览器）,打开一个页面 如http://www.baidu.com 2、按F12打开Developer Tools,之后点击developer
用谷歌浏览器来当手机模拟器
sunvince的专栏
03-19 1398
很多网站都通过User-Agent来判断浏览器类型，如果是3G手机，显示手机页面内容，如果是普通浏览器，显示普通网页内容。 谷歌Chrome浏览器，可以很方便地用来当3G手机模拟器。在Windows的【开始】-->【运行】中输入以下命令，启动谷歌浏览器，即可模拟相应手机的浏览器去访问3G手机网页： 谷歌Android：chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) App
chrome://inspect/#devices敲定手机chromedriver的版本
bluebiubiu的博客
01-13 8681
第一步、打开chrome浏览器，输入chrome://inspect/#devices 第二步、打开安卓手机，打开开发者选项中的USB调试 第三步、打开手机中有使用webview的应用，如工作任务新增，触发一下，chrome就可以捕捉到 第四步、重新回到chrome浏览器中，查看下（不行就刷新下） 第五步、根据这个版本号就可以去找对应的chromedriver版本下载了 与Chrome的版本匹配对应ChromeDriver镜像：https://npm.taobao.o.
用桌面版Chrome模拟移动浏览器：chrome mobile emulation
loadindinding的专栏
12-18 6569
一、功能简介 chrome emulation可以实现在桌面上调试移动网页，模拟各种主流移动设备及其相关参数： 仿真触摸事件 仿真设备视角（尺寸/规格/版本） User Agent模仿 网络带宽流量控制 地理定位覆盖 设备方向覆盖 CSS媒体类型仿真 FAQ 二、如何开启 1、打开chrome浏览器，按F12，打开开发者工具，点击最左侧类似手机的图标，然后我们
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值