谷歌浏览器 | Chrome DevTools系统学习篇-Device Mode

已于 2023-05-15 09:27:38 修改
阅读量1.9k 收藏 3
点赞数 1
分类专栏： 前端工具 文章标签： chrome devtools 学习 chrome
于 2023-05-12 16:35:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happy921212/article/details/130630131
版权

大家好，文接上回谷歌浏览器 | Chrome DevTools系统学习篇-概述。所谓“工欲善其事，必先利其器”，我们进一步来熟悉谷歌开发者工具。今天分享的是Device Mode，使用设备模式来估算您的页面在移动设备上的外观和性能。


设备模式是 Chrome DevTools 中的一组功能的名称，可帮助您模拟移动设备。这些功能包括：

 模拟移动设备窗口（自适应模式， 设备尺寸模拟， 添加自定义尺寸设备，输入宽高， 缩放窗口，限制网络， 将窗口旋转到横向，隐藏控件，隐藏控件-设备像素比
隐藏控件-设备类型，隐藏功能--显示设备边框，隐藏功能--显示媒体查询，隐藏功能--显示标尺，隐藏功能--截取屏幕截图，隐藏功能--截取完整尺寸的屏幕截图，隐藏功能--重置为默认值，隐藏功能--关闭DevTools）

此外，在传感器选项卡中（以后对此功能再做介绍）：

  • 模拟地理定位
  • 设置方向
  • 强制触摸（可以强制触摸而不是单击）
  • 模拟空闲检测器状态（可以模拟用户状态和屏幕状态的空闲状态更改）

目录

局限性

模拟移动设备窗口

自适应模式

设备尺寸模拟

添加自定义尺寸设备

输入宽高

缩放窗口

限制网络

将窗口旋转到横向

隐藏控件

隐藏控件-设备像素比

隐藏控件-设备类型

隐藏功能--显示设备边框

隐藏功能--显示媒体查询

隐藏功能--显示标尺

隐藏功能--截取屏幕截图

隐藏功能--截取完整尺寸的屏幕截图

隐藏功能--重置为默认值

隐藏功能--关闭DevTools

关注我，我们一起进步！

欢迎点赞、评论，谢谢！~

局限性

先说一下Device Mode(设备模式)的局限性：

  • 设备硬件
  • GPU和CPU的行为无法模拟。
  • 浏览器的用户界面（UI）
  • 系统显示，比如地址栏，不会被模拟。
  • 本地显示器，如 <select> 元素，不会模拟为一个模态列表。
  • 一些增强功能，如打开数字输入键盘，可能与实际设备的行为有所不同。
  • 浏览器功能
  • WebGL可以在模拟器中实现，但iOS 7设备不支持。
  • Chrome不支持MathML，但iOS 7设备支持。
  • iOS 5定向缩放Bug不会被模拟。
  • line-height CSS属性在模拟器中运行，但Opera Mini不支持。
  • CSS规则的限制，如在Internet Explorer中的哪些限制，不会被模拟。
  • APPCache
  • 模拟器不会覆盖AppCache 的 清单文件 或 查看源代码请求 的UA

尽管有这些限制，Device Mode(设备模式)对于大多数任务都足够稳健。当你需要在真实设备上测试时，您可以使用远程调试从笔记本电脑或台式机查看、更改、调试和分析页面代码。

模拟移动设备窗口

点击切换设备图标，开启模拟移动视口。

 默认情况下，设备工具栏在视口中打开，尺寸设置为自适应。

自适应模式

拖动手柄以将视口大小调整为您需要的任何尺寸。

或者，在宽度和高度框中输入特定值。

或者，使用宽度预设栏通过单击将宽度设置为以下值之一：

Mobile S

（小型移动设备）

Mobile M

（中型移动设备）

Mobile L

（大型移动设备）

Tablet

（平板电脑）

Laptop

（笔记本电脑）

Laptop L

（大型笔记本电脑）

4K

（4K屏设备）

320px375px425px768px1024px1440px2560px

设备尺寸模拟

要模拟特定移动设备的尺寸，请从尺寸列表中选择该设备。

 需要添加自定义设备，点击尺寸最下方的修改（Edit…），这里可以勾选需要模拟调试的设备尺寸，或者点击添加自定义设备…

添加自定义尺寸设备

可以输入设备名称，宽度，高度，设备像素比，用户代理字符串几个选项设置自己需要模拟的设备。

这里提供一份设备参数，便于大家添加复制使用：

 参数如下：

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 X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1"
"iPad 10.2"" (2019)",810,1080,2,"Mozilla/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 Xs,375,812,3,"Mozilla/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 Max,414,896,3,"Mozilla/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 XR,414,896,2,"Mozilla/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 X,375,812,3,"Mozilla/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"
Samsung Galaxy Fold,586,820,2.625,"Mozilla/5.0 (Linux; Android 9; SM-F900U1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.93 Mobile Safari/537.36"
Samsung Galaxy Note10,412,869,2.625,"Mozilla/5.0 (Linux; Android 9; SM-N970XU) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.93 Mobile Safari/537.36"
Samsung Galaxy Note10+,412,869,3.5,"Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-N975XU) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/10.2 Chrome/71.0.3578.99 Mobile Safari/537.36"
Samsung Galaxy A20,980,1734,2.25,"Mozilla/5.0 (Linux; Android 9; SM-A205U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.93 Mobile Safari/537.36"
Samsung Galaxy S10,412,869,3.5,"Mozilla/5.0 (Linux; Android 9; SM-G973U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.105 Mobile Safari/537.36"
Samsung Galaxy S10+,412,869,3.5,"Mozilla/5.0 (Linux; Android 9; SM-G975U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.105 Mobile Safari/537.36"
Samsung Galaxy S10e,360,760,3,"Mozilla/5.0 (Linux; Android 9; SM-G970U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.105 Mobile Safari/537.36"
Samsung Galaxy S9,360,740,3,"Mozilla/5.0 (Linux; Android 8.0.0; SM-G960U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.111 Mobile Safari/537.36"
Samsung Galaxy S9+,320,658,4.5,"Mozilla/5.0 (Linux; Android 8.0.0; SM-G965U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.111 Mobile Safari/537.36"
Samsung Galaxy Note 9,412,846,3.5,"Mozilla/5.0 (Linux; Android 8.1.0; SM-N960U Build/M1AJQ) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.91 Mobile Safari/537.36"
Google Pixel 4,353,745,3,"Mozilla/5.0 (Linux; Android 10; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Mobile Safari/537.36"
Google Pixel 4 XL,412,869,3.5,"Mozilla/5.0 (Linux; Android 10; Pixel 4 XL) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Mobile Safari/537.36"
Google Pixel 3,393,786,2.75,"Mozilla/5.0 (Linux; Android 9; Pixel 3 Build/PQ1A.181105.017.A1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.158 Mobile Safari/537.36"
Google Pixel 3 XL,412,846,3.5,"Mozilla/5.0 (Linux; Android 9; Pixel 3 XL Build/PQ1A.181105.017.A1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.158 Mobile Safari/537.36"
Palm PVG100,360,640,2,"Mozilla/5.0 (Linux; Android 8.1.0; PVG100 Build/OPM1.171019.019) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.126 Mobile Safari/537.36"
iPhone 8 Plus,414,736,3,"Mozilla/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,375,667,2,"Mozilla/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 Plus,414,736,3,"Mozilla/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 7,375,667,2,"Mozilla/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 SE,320,568,2,"Mozilla/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 4,768,1024,2,"Mozilla/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"")",834,1112,2,"Mozilla/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"")",1024,1366,2,"Mozilla/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"
Red Hydrogen One,412,732,3.5,"Mozilla/5.0 (Linux; Android 8.1.0; H1A1000 Build/H1A1000.010ho.01.01.01r.089) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.91 Mobile Safari/537.36"
Samsung Galaxy Tab S3,768,1024,2,"Mozilla/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 S4,1138,712,2.25,"Mozilla/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 8,412,846,3.5,"Mozilla/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 S8,360,740,3,"Mozilla/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+,412,846,3.5,"Mozilla/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 S7,360,640,4,"Mozilla/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"

比如我设置一个ipone11pro的栗子：

 如上图，设置设备类型，这个用来模拟移动设备或桌面设备。这边只是预设，在尺寸自适应下设置中还可以再切换设备类型。设备尺寸添加后，勾选上，尺寸中就可以选择这个尺寸了。

输入宽高

在尺寸自适应下，在宽度和高度框中输入特定值。选了特定尺寸后，禁止输入。

缩放窗口

使用缩放列表来放大或缩小。

自动调整缩放级别- 自动将缩放级别设置为最大可用空间（自适应尺寸下仅显示这个）
适合窗口大小100% - 如果您想要测试图像上的DPI，显式百分比是有用的（其他固定尺寸后新增）

限制网络

要限制网络和 CPU，请从Throttle列表中选择Mid-tier mobile（中端移动设备）或Low-end mobile（低端手机）、（offline）离线。

 这边可以和network(网络选项卡)中限制网络和CPU同时配置： 

将窗口旋转到横向

单击“旋转” 将视口旋转为横向。请注意，如果您的设备工具栏很窄，则旋转按钮会消失。

隐藏控件

在窗口右上方的三个点，展开可以显示和移除设备像素比和设备类型两个控件：

隐藏控件-设备像素比

设备像素比 (DPR)是硬件屏幕上的物理像素与逻辑 (CSS) 像素之间的比率。换句话说，DPR 告诉 Chrome 使用多少屏幕像素来绘制一个 CSS 像素。Chrome 在 HiDPI（每英寸高点数）显示器上绘图时使用 DPR 值。

如果您想在非Retina屏的机器上模拟Retina屏设备，或反过来，只需要调整Device pixel ratio(设备像素比)就可以了。Device pixel ratio(设备像素比)（DPR）是逻辑像素和物理像素之间的比率。具有Retina屏的设备，例如Nexus 6P，比常规设备具有更高的像素密度，它可以影响内容的视觉清晰度和视觉大小。

网上有一些关于Device pixel ratio(设备像素比)（DPR）的例子：

  • CSS媒体查询,比如:@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }
  • CSS image-set 规则。
  • 图片上的srcset属性。
  • window.devicePixelRatio 属性。

如果你有一个原生Retina显示，您会注意到，低 "Dots Per Inch" (DPI) 的资源看起来像素化，而较高DPI的资源是清晰的。为了在标准显示器上模拟这种效果，将DPR设置为2并通过比例缩放视口。2x的资源看起来依然清晰，而1x将看起来像素化。

隐藏控件-设备类型

在尺寸自适应下设置中还可以再切换设备类型：

渲染方式是指 Chrome 将页面呈现为移动视口还是桌面视口。

光标图标是指将鼠标悬停在页面上时看到的光标类型。

事件触发是指当您与页面交互时页面是否触发touch或click事件。

选项渲染方式光标图标事件触发
Mobile(移动的)移动的圆圈触碰

Mobile(No Touch)

手机（无触摸）

移动的普通的点击

Desktop (桌面)

桌面普通的点击

Desktop (Touch)

桌面（触摸）

桌面圆圈触碰

这个在添加设备尺寸时，与默认的类型选项一致。

注意：非自适应的尺寸下，分辨率，设备像素比，设备类型等都是禁用状态：

隐藏功能--显示设备边框

注意：如果您没有看到特定设备的设备框架，这可能意味着 DevTools 没有针对该特定选项的设置。DevTools 显示了 Nest Hub 的设备边框：

隐藏功能--显示媒体查询

媒体查询是响应式网页设计的一个重要组成部分。要查看媒体查询检查器，在三点菜单中点击Show Media queries(显示媒体查询)。


DevTools 会检测样式表中的媒体查询，并在顶部标尺中将其显示为彩色条。
媒体查询的颜色编码如下： 

  • 定位最大宽度的查询
  • 定位范围内宽度的查询
  • 定位最小宽度的查询

媒体查询对于前端开发人员可以直接定位@media声明的样式：

隐藏功能--显示标尺

DevTools 在视口上方和左侧显示标尺，标尺的尺寸单位是像素。

隐藏功能--截取屏幕截图

要捕获您当前在视口中看到的内容的屏幕截图。

 

隐藏功能--截取完整尺寸的屏幕截图

要捕获整个页面的屏幕截图，包括当前在视口中不可见的内容。

隐藏功能--重置为默认值

这个功能点击后，某些配置就恢复默认初始值。

隐藏功能--关闭DevTools

这个功能点击后，关闭DevTools，取消移动设备模拟状态。

 以上就是对谷歌浏览器，Device Mode模块的学习。我们学习了使用Device Mode(设备模式)的屏幕模拟器测试你的网站的响应式布局。学习了保存自定义预设，以便以后轻松访问它们。但要知道设备模式不能完全代替真实设备的测试， 注意其局限性。

关注我，我们一起进步！

欢迎点赞、评论，谢谢！~

啥咕啦呛
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
devtools-frontend:Chrome DevTools用户界面
03-19
Chrome DevTools前端 Chrome DevTools的客户端，包括用于运行DevTools网络应用程序的所有JS和CSS。 源代码 前端可在。 设计准则 请注意，DevTools遵循其他。 问题分类 问题分类指南可以找到。 工作流程 可以找到有关设置，使用和维护DevTools前端结帐的说明。 其他参考 DevTools文档： 和 ：推荐的工具和资源 贡献给DevTools： 促成Chrome DevTools协议： DevTools设计审查指南： 源镜 DevTools前端存储库已镜像到。 DevTools前端也可以在软件包中在NPM上使用。目前无法通过CJS或ES模块获得，因此在其他工具中使用此软件包可能需要。 npm软件包的版本号（例如1.0.373466 ）是指最新前端git commit的Chromium提交位置。每次Chromium提交，它都会增加，但
谷歌vue调试工具devtools安装的傻瓜教程（图文详解）
darabiuz的博客
07-12 1457
1.去Chrome的插件网下载Vue.js devtools插件，链接如下 https://www.cnplugins.com/devtool/vuejs-devtools/ 2.下载完成之后会得到以下文件 我们点击重命名，将文件后缀改为.rar,把文件修改为以下形式 3.点击鼠标右键，选择解压到“…” 得到以下解压过后的文件夹 4.进入谷歌浏览器界面，点击右上角竖着的三点，点击‘“更多工具—拓展程序” 5.点击加载已解压的拓展程序，把我们刚刚解压的文件夹拖进来 5.安装成功 6.进行测试，
Appium自动化（15） - 针对 webview 进行自动化测试
jiegeniuboyi的博客
02-21 1168
webview简介
谷歌浏览器 chrome vue 调试插件 vue-devtools 及源码
05-04
谷歌浏览器 chrome vue 调试插件 vue-devtools chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
chrome-protocol-proxy：Chrome DevTools协议代理-用于调试目的的智能代理
02-01
Chrome协议代理 chrome-protocol-proxy是小型的反向代理，旨在与。 它捕获所有发送给Chrome的命令和从Chrome接收的事件，将请求与响应合并，从解压缩消息，并提供易于阅读的彩色输出。 该工具是的分支（受其启发）。 安装 通过自制 brew install wendigo/tap/chrome-protocol-proxy 通过去得到 go get -u github.com/wendigo/chrome-protocol-proxy 通过泊坞窗 docker run -t -i -p 9222:9222 wendigo/chrome-protocol-proxy:latest 该图像捆绑了最新版本的无头Chrome，因此调试器可以使用（访问进行验证）。 产品特点 彩色输出 协议帧过滤 :vulcan_salute: 请求-响应合并， 解释请求， 使用解释响应和事件， 理解扁平化会话（ ） 计算并显示连续帧之间的时间增量， 写入日志并根据连接ID和目标/会话ID对其进行拆分。 配置标志 -d write logs file per tar
chrome 谷歌浏览器模拟各种手机设置userAgent
热门推荐
weixin_38958405的博客
07-12 2万+
谷歌调试工具十分全面：可以模拟各种手机平台环境，只需要配置下userAgent就可以了，下面看图： 1、在选择手机型号的时候选择Edit 2、右边会跳出 编辑的地方，可以配置userAgent 3、配置完成后在左边选择手机型号的地方就会有自定义的userAgent了  ...
谷歌浏览器安卓（Android）版（com.android.chrome_72.0.3626.105_362610552）
04-24
Google Chrome是一款由Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
Vue项目上线后关闭vue-devtools调试工具
灵壹Eli的博客
04-20 1066
【代码】Vue项目上线后关闭vue-devtools调试工具。
5 个 Chrome DevTools 技巧，让你的coding更轻松
老司机的后备箱
03-09 321
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取) `console.trace()`提供此信息，因此您只需将其插入要跟踪的函数中即可。
谷歌浏览器 | Chrome DevTools系统学习篇-概述
happy921212的博客
05-05 4618
Chrome DevTools是一套直接内置到谷歌Chrome浏览器的web开发工具。DevTools可以帮助您即时编辑页面并快速诊断问题，最终帮助您更快地构建更好的网站。我们今天的概述主要讲述谷歌浏览器的日常使用和几大常见控制面板的介绍……
Chrome Devtools 高级调试指南（新）总结
JayYuen的博客
10-13 2027
1. Chrome Devtools 的用处 前端开发：开发预览、远程调试、性能调优、bug跟踪、断点调试等 后端开发：网络抓包、开发调试Response 测试：服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试 其他：安装扩展插件，如AdBlock、Gliffy、Axure等 2. 菜单面板拆解 Elements - 页面dom元素 Console - 控制台...
vue-devtools谷歌浏览器插件Chrome插件6.4.5版本
11-25
解压后将crx文件拖到Chrome浏览器扩展程序即可，亲测可用
Vue Devtools谷歌浏览器插件下载
07-06
Vue Devtools的谷歌浏览器插件，解压后在浏览器输入chrome://extensions/，选择加载解压后的插件，选择解压后的文件夹即可
chrome-devtools-theme-atom-dark-green-cursor:实验性的Chrome DevTools主题
05-17
转到chrome：// flags /＃enable-devtools-experiments 找到并启用“启用开发人员工具实验”。 选择页面底部的“立即重新启动”（警告：这将重新启动Chrome）。 打开DevTools>设置 选择实验标签，然后选中“允许...
Chrome DevTools中的骚操作
dfc_dfc的博客
03-31 1057
谷歌浏览器工具骚操作
限流的学习
最新发布
weixin_43675252的博客
05-01 174
限流算法：滑动窗口算法滑动日志算法漏桶算法令牌桶算法。
力扣数据库题库学习（4.28日）--1587. 银行账户概要 II
Jesse_Kyrie的博客
04-28 191
对于力扣题1587. 银行账户概要 II的解答，提供解题思路与解题方法，知识点为:1. GROUP BY 2. SUM 3. LEFT JOIN 4. HAVING
党务学习|基于SprinBoot+vue的大学生党务学习平台(源码+数据库+文档)
伟庭的博客
04-27 737
大学生党务学习平台管理系统按照操作主体分为管理员和用户。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。大学生党务学习平台管理系统可以提高大学生党务学习平台信息管理问题的解决效率，优化大学生党务学习平台信息处理流程，保证大学生党务学习平台信息数据的安全，它是一个非常可靠，非常安全的应用程序。大学生党务学习平台管理系统；入党申请,党课Mysql数据库；Java语言。
集成学习算法学习笔记
m0_46521579的博客
04-27 440
三个臭皮匠顶一个诸葛亮集成学习会考虑多个评估器的建模结果，汇总后得到一个综合的结果，以此来获取比单个模型更好的回归或分类表现。很多独立的机器学习算法：决策树、神经网络、支持向量机集成学习构建了一组基学习器，并将它们综合起来作为最终的模型。在很多集成学习模型中，对基学习器的要求很低。集成学习适用于机器学习的几乎所有领域：回归、分类、推荐和排序。相同的多个基学习器不会带来任何提升，不同的模型取长补短，每个基学习器都会犯不同的错误，综合起来犯错的可能性不大。
谷歌浏览器安装vue devtools
09-21
谷歌浏览器安装Vue Devtools的步骤如下： 1. 首先，你需要在谷歌浏览器中安装Vue Devtools插件。你可以通过以下两种方式之一进行安装： a. 打开谷歌浏览器的应用商店（Chrome Web Store），搜索"Vue Devtools"，然后点击"添加至Chrome"按钮进行安装。 b. 在谷歌浏览器中，点击右上角的菜单图标（三个垂直的点），选择"更多工具"，然后选择"扩展程序"。在打开的页面中，勾选"开发者模式"，然后点击"加载已解压的扩展程序"按钮。选择你已经下载的Vue Devtools插件文件夹并点击"选择"按钮进行加载。 2. 安装完成后，你会在浏览器的扩展程序栏中看到Vue Devtools的图标。现在你可以打开你的本地Vue项目，并在浏览器控制台中点击Vue Devtools图标以打开Vue Devtools面板。在该面板中，你可以方便地查看VueX的数据以及组件结构等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值