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

最新推荐文章于 2023-05-12 16:35:37 发布
最新推荐文章于 2023-05-12 16:35:37 发布
阅读量2.1k 收藏 6
点赞数 1
分类专栏： 实用工具 文章标签： Chrome 开发 Device Name 测试设备 型号
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weilapls/article/details/116951206
版权

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

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

Device NameWidthHeightDPRUser agent string
iPhone 114148962Mozilla/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 Pro3758123Mozilla/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 Max4148963Mozilla/5.0 (iPhone; CPU iPhone OS 13_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1
“iPad 10.2"” (2019)"81010802Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15
iPhone Xs3758123Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1
iPhone Xs Max4148963Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1
iPhone XR4148962Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1
iPhone X3758123Mozilla/5.0 (iPhone; CPU iPhone OS 11_1 like Mac OS X) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0 Mobile/15B93 Safari/604.1
iPhone 8 Plus4147363Mozilla/5.0 (iPhone; CPU iPhone OS 11_1 like Mac OS X) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0 Mobile/15B93 Safari/604.1
iPhone 83756673Mozilla/5.0 (iPhone; CPU iPhone OS 11_1 like Mac OS X) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0 Mobile/15B93 Safari/604.1
iPhone 7 Plus4147363Mozilla/5.0 (iPhone; CPU iPhone OS 11_1_1 like Mac OS X) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0 Mobile/15B150 Safari/604.1
iPhone 73756672Mozilla/5.0 (iPhone; CPU iPhone OS 11_1_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/11.0 Mobile/14E304 Safari/604.1
iPhone SE3205682Mozilla/5.0 (iPhone; CPU iPhone OS 9_3 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13E233 Safari/601.1
iPad Mini 476810242Mozilla/5.0 (iPad; CPU OS 11_1 like Mac OS X) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0 Mobile/15B93 Safari/604.1
iPad Pro (10.5")83411122Mozilla/5.0 (iPad; CPU OS 11_1 like Mac OS X) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0 Mobile/15B101 Safari/604.1
iPad Pro (12.9")102413662Mozilla/5.0 (iPad; CPU OS 11_1 like Mac OS X) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0 Mobile/15B101 Safari/604.1
Samsung Galaxy Tab S376810242Mozilla/5.0 (Linux; Android 7.0; SM-T827V Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.83 Safari/537.36
Samsung Galaxy Tab S411387122.25Mozilla/5.0 (Linux; Android 8.1.0; SM-T837A) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.80 Safari/537.36
Samsung Galaxy Note 84128463.5Mozilla/5.0 (Linux; Android 7.1.1; SAMSUNG SM-N950U Build/NMF26X) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/6.2 Chrome/56.0.2924.87 Mobile Safari/537.36
Samsung Galaxy S83607403Mozilla/5.0 (Linux; Android 7.1.1; SAMSUNG SM-N950U Build/NMF26X) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/6.2 Chrome/56.0.2924.87 Mobile Safari/537.36
Samsung Galaxy S83607403Mozilla/5.0 (Linux; Android 7.0; SM-G950U Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36
Samsung Galaxy S8+4128463.5Mozilla/5.0 (Linux; Android 7.0; SM-G955U Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36
Samsung Galaxy S73606404Mozilla/5.0 (Linux; Android 6.0.1; SM-G935V Build/MMB29M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.83 Mobile Safari/537.36

为方便大家本地使用，也可以直接下载表格，但表格不保持实时更新哦
下载链接

本表相当于一个工具表，会一直根据当下市面流行型号保持更新。

都说了要微辣的
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
chrome://inspect/#devices敲定手机chromedriver的版本
bluebiubiu的博客
01-13 8074
第一步、打开chrome浏览器，输入chrome://inspect/#devices 第二步、打开安卓手机，打开开发者选项中的USB调试 第三步、打开手机中有使用webview的应用，如工作任务新增，触发一下，chrome就可以捕捉到 第四步、重新回到chrome浏览器中，查看下（不行就刷新下） 第五步、根据这个版本号就可以去找对应的chromedriver版本下载了 与Chrome的版本匹配对应ChromeDriver镜像：https://npm.taobao.o.
chrome 适配调试_终于明白怎么用Chrome开发适配各种移动端屏幕尺寸了
weixin_42547335的博客
01-14 6100
都知道Chrome浏览器可以模拟真机尺寸，进行调试开发很方便，但是如果你的真机在预制的配置参数中没有，而且又不知道该输入什么尺寸参数，该怎么办？(我就是遇到了这样的问题，折腾了好几个小时，终于弄清楚了)1、首先如果不知道自己手头的设备的可视屏幕尺寸是多少，那么就在代码里写下以下这些代码const screenWidth = document.body.clientWidthconst screen...
Chrome浏览器模拟手机访问网站的设置方法
小糊涂涂的专栏
04-08 3017
以前我们介绍过如何通过修改Chrome浏览器运行参数的方法来模拟手机访问网站，但是在Chrome 32和33版本以后增加了更加便捷的方法，在开发者工具中只需要设置一下就能方便的模拟各种手机型号的访问效果了。
10年测试工程师 —— 手把手教会你做前端性能测试（超详细）
m0_58026506的博客
09-08 7456
普通用户如何评价一个网站的体验好不好呢？ 除了满足他的功能需求以外，用得爽不爽可能是最大的评估因素。这个爽不爽可以简单理解为快不快，好不好看，是不是符合他的操作习惯等等。而这里的快不快就是我们说的性能。 有数据表明，性能在一定程度上跟公司的收益直接相关。
谷歌浏览器开发工具使用教程
luckyrass的专栏
07-10 567
转自：http://jingyan.baidu.com/article/20b68a886d7112796cec62ed.html
谷歌模拟器：谷歌浏览器模拟手机调试添加机型
qq_42931285的博客
04-16 3157
谷歌模拟器
chrome21-模拟移动设备
qq_41632427的博客
06-18 217
html
Chrome浏览器内嵌的各种手机模拟器
GBin1.com
10-15 3270
打开chrome的控制台标签，然后，点击simulator子标签页，选择需要的手机即可，如下图： 模拟器如下： 阅读原文：Chrome浏览器内嵌的各种手机模拟器
谷歌浏览器 | Chrome DevTools系统学习篇-Device Mode
happy921212的博客
05-12 1914
对谷歌浏览器，Device Mode模块的学习。我们学习了使用Device Mode(设备模式)的屏幕模拟器测试你的网站的响应式布局。学习了保存自定义预设，以便以后轻松访问它们……
在chrome模拟器中添加手机型号
bing_gan的专栏
10-13 1万+
1.打开chrome，F12，选择toggle device mode（打开设备模拟器 手机图标那个） 2.切换到手机模拟器模式，手机类型下拉列表，选择Edit，进入setting，选择devices-add custom device 3.输入device name，例如 xiaomi note 4.输入手机分辨率的width、height，例如540、960（这里可能会问为什么，因为涉及
vue_devtools_chrome_5.3.4.crx Chrome浏览器Vue调试插件
03-28
（1）vue 2.x 调试工具：vue_devtools_chrome_5.3.4.crx Chrome浏览器Vue调试插件； （2）直接安装使用无需自己编译； （3）安装方法：打开Chrome浏览器，输入“chrome://extensions/”打开扩展程序，启用开发者模式...
devtools_vue_6.1.4_chrome.cn chrome版本devtools_vue插件
05-04
devtools_vue_6.1.4_chrome.cn chrome版本devtools_vue插件，直接拖到 chrome://extensions/ 就可使用
Chrome浏览器插件Vue Devtools 插件
05-11
后端是当用户打开 Vue Devtools 时注入到网页的脚本 - 它处理注册 Vue 应用程序并与 Vue Devtools 前端通信。前端是浏览器开发工具窗格中显示的 Vue 应用程序。Hook 是添加到页面的全局变量，以便 Vue 应用程序和您...
User-Agent Switcher and Manager 0.4.9 CRX for Chrome.crx用户代理切换器
11-30
User-Agent Switcher and Manager 0.4.9 CRX for Chrome.crx 用户代理切换器和管理器0.4.9 CRX for Chrome.crx。这个Chrome扩展允许你可靠地欺骗你的浏览器“用户代理”字符串自定义一个。该扩展为不同的浏览器和...
chrome_remote：Ruby中的Chrome DevTools协议的客户端实现
02-01
它使您可以从Ruby代码中远程控制，检测，检查，调试和配置基于Chrome / Chromium的浏览器实例。使用范例以下代码段导航至https://github.com ，转储加载页面时发出的所有请求，并在加载页面后截取屏幕截图： ...
3个方法实现微信多开登陆 适用电脑端(WIN7/WIN10)
热门推荐
都说了要微辣
09-20 2万+
在电脑上，微信多开，为什么需要这个功能，原因大家心里都有数，有些人真是为了工作便捷，本人就很需要同时登陆个人微信和工作微信。然鹅企鹅这边一直扼制，应该也是被那些所谓的微营销逼的，甚至一些干违法的人逼的，能理解。个人认为，大家在使用时不要太过分就都OK，以下方法也是通过网络一个个测试有用才发出来，至于能有效多久，随缘吧。 方案一：按键组合法(WIN7和WIN10都可以) 顾名思义，就是利用按键的...
解决PHPstudy(PHP工具箱)中host文件无法保存的问题
都说了要微辣
12-07 4036
笔者是在给电脑重装完系统后，全新安装PHP工具箱（或者PHPstudy）的时候，要给host文件加域名绑定127.0.0.1，结果内容无法保存，CTRL+S之后，会让你另存一个host文件，原来的文件无法保存，这绝对是哪里出问题了。 解决方法如下 步骤一：找到host文件地址 C:\Windows\System32\drivers\etc 步骤二：右击这个文件，将文件里的只读和隐藏复选框...
基于matlab实现的空间调制通信过程，包含信号调制、天线选择等发送过程，以及采用最大似然估计的检测过程 .rar
最新发布
05-02
基于matlab实现的空间调制通信过程，包含信号调制、天线选择等发送过程，以及采用最大似然估计的检测过程。.rar
vue.js devtools_5.3.3_chrome.cn.zip
06-21
### 回答1： vue.js devtools_5.3.3_chrome.cn.zip是一种用于谷歌浏览器的vue.js开发工具包，适用于开发vue.js前端应用程序。该工具包可以协助开发者对vue.js应用程序进行调试和监视。它包含了一些非常有用的功能，例如实时调试、状态管理、路由、组件、事件和动画工具等。 除了基本的功能外，vue.js devtools_5.3.3_chrome.cn.zip还提供了其他一些高级功能，例如缩放、搜索、过滤、追踪等。开发者可以使用这些功能来调试js代码、优化性能、测试响应时间等。 总体来说，vue.js devtools_5.3.3_chrome.cn.zip是一款非常实用的开发工具包，它可以协助开发者快速快速定位和解决vue.js应用程序中的问题，以便更好的提升应用程序的质量和用户体验。 ### 回答2： vue.js devtools_5.3.3_chrome.cn.zip是一个用于开发vue.js应用程序的Chrome浏览器插件，它提供了一系列工具和功能，帮助开发人员更好地调试和优化vue.js应用程序。 该插件允许你检查Vue组件的状态、属性、事件、计算属性和生命周期钩子，以及Vue实例的状态和组件层次结构。还可以追踪Vue活动，包括事件和网络请求，以及检查Vue.js开发者工具现有的应用程序状态。 该插件的另一个有用的功能是实时编辑和重载Vue组件，从而加快开发和测试过程。这个特性可以帮助开发人员实时查看他们所做的更改的结果，而无需手动刷新。 使用vue.js devtools_5.3.3_chrome.cn.zip将大大简化Vue.js应用程序开发和调试的过程，并帮助开发人员更加高效地工作。无论是在开发阶段还是在生产环境中，这个插件都是一个必备的工具。 ### 回答3： vue.js devtools_5.3.3_chrome.cn.zip是一款针对Vue.js开发的Chrome浏览器插件，可用于更方便地透视Vue.js应用程序并进行调试。使用此插件，用户可以轻松查看Vue组件树，进行状态和属性的检查和更改，并进行事件分析和调试。此外，vue.js devtools还具有性能分析功能，可以帮助开发者分析应用程序的性能数据，以及验证和优化应用程序的瓶颈。总之，vue.js devtools是一款实用而强大的工具，可以大大提高开发Vue.js应用程序的效率和质量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值