如何扩展custom-device-emulation-chrome：添加自定义User Agent和设备类型

如何扩展custom-device-emulation-chrome：添加自定义User Agent和设备类型

【免费下载链接】custom-device-emulation-chromecustom device emulation chrome | How To Add Custom Device on Chrome Emulation ?项目地址: https://gitcode.com/gh_mirrors/cu/custom-device-emulation-chrome

custom-device-emulation-chrome是一款强大的Chrome扩展工具，能够帮助开发者轻松添加和管理自定义设备类型及User Agent，实现更精准的浏览器模拟测试。通过本文的简单步骤，即使是新手也能快速掌握扩展该工具的方法，打造专属的设备模拟环境。

📋 准备工作：获取项目源码

首先需要将项目代码克隆到本地，打开终端执行以下命令：

git clone https://gitcode.com/gh_mirrors/cu/custom-device-emulation-chrome

项目结构中包含核心配置文件device.json，这是存储所有设备定义的关键文件，我们将通过修改它来添加自定义设备。

🔍 认识设备配置文件结构

打开device.json，可以看到文件采用JSON格式，包含三类设备定义：

• desktop：桌面设备
• tablet：平板设备
• mobile：移动设备

每个设备条目包含四个基本属性：

• device：设备名称
• width：屏幕宽度
• height：屏幕高度
• dpr：设备像素比
• user_agent：用户代理字符串

示例：

{ "device": "iPhone 14", "width": 390, "height": 844, "dpr": 3, "user_agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/99.0.4844.47 Mobile/15E148 Safari/604.1" }

📱 步骤一：打开Chrome设备模拟界面

1. 打开Chrome浏览器，按F12或Ctrl+Shift+I打开开发者工具
2. 点击设备工具栏图标（或按Ctrl+Shift+M）切换到设备模拟模式
3. 点击顶部设备选择下拉菜单，选择"Edit..."选项

➕ 步骤二：添加自定义设备

1. 在打开的设置页面中，选择左侧"Devices"选项
2. 点击"Add custom device..."按钮
3. 在弹出的表单中填写设备信息：
   • 设备名称（如"My Custom Phone"）
   • 屏幕宽度和高度
   • 设备像素比（DPR）
   • User Agent字符串

📝 步骤三：编辑device.json文件添加自定义配置

除了通过Chrome界面添加，还可以直接编辑device.json文件添加批量设备：

1. 在对应设备类型数组（desktop/tablet/mobile）中添加新对象
2. 填写设备参数，确保格式正确
3. 保存文件并重新加载扩展

示例添加自定义Android设备：

{ "device": "My Custom Android Phone", "width": 412, "height": 915, "dpr": 2.625, "user_agent": "Mozilla/5.0 (Linux; Android 12; Custom Device) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Mobile Safari/537.36" }

✅ 步骤四：验证自定义设备

1. 回到Chrome开发者工具的设备模拟界面
2. 在设备选择下拉菜单中查找并选择你添加的自定义设备
3. 确认页面正确模拟了该设备的屏幕尺寸和User Agent

💡 高级技巧：User Agent优化

• 移动设备User Agent模板：

  Mozilla/5.0 (Linux; Android [版本]; [设备名]) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/[版本] Mobile Safari/537.36

• 桌面设备User Agent模板：

  Mozilla/5.0 ([系统]; [CPU类型]) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/[版本] Safari/537.36

可以通过在线User Agent生成工具获取不同设备的标准User Agent字符串，确保模拟的准确性。

📁 项目文件说明

• plugin/manifest.json：扩展清单文件，包含扩展基本信息
• plugin/popup.html：扩展弹出界面
• plugin/popup.js：弹出界面交互逻辑
• device.json：设备配置主文件

通过以上步骤，你已经成功掌握了扩展custom-device-emulation-chrome的方法。无论是开发响应式网站还是测试移动应用，自定义设备模拟都能帮助你更高效地完成工作。开始创建你的专属设备库吧！

【免费下载链接】custom-device-emulation-chromecustom device emulation chrome | How To Add Custom Device on Chrome Emulation ?项目地址: https://gitcode.com/gh_mirrors/cu/custom-device-emulation-chrome