浏览器开发者工具提供四种网页尺寸测量方法：一、启用屏幕标尺实时显示像素距离；二、用元素检查模式查看DOM节点分层尺寸；三、在设备模拟器中开启标尺叠加层验证响应式布局；四、通过控制台JavaScript命令获取视口与文档精确尺寸。
如果您需要快速获取网页元素的精确尺寸或页面整体布局参数，浏览器自带的开发者工具提供了屏幕标尺功能。以下是使用该功能测量网页尺寸的具体操作步骤：
一、启用开发者工具中的屏幕标尺
屏幕标尺是Chrome、Edge等基于Chromium内核浏览器内置的可视化测量工具，无需安装扩展即可直接调用，用于实时显示鼠标悬停位置到页面边缘的距离及元素宽高。
1、在目标网页任意位置按 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（macOS）打开开发者工具。
2、点击右上角三个点图标，选择“更多工具”，再点击“渲染”（Rendering）。
3、在渲染面板中勾选 “显示屏幕标尺”（Show Rulers） 选项。
4、关闭渲染面板，此时将鼠标移至网页任意位置，页面顶部与左侧即会显示动态标尺，单位为像素。
二、使用元素检查模式测量具体元素尺寸
通过元素检查模式可精准获取DOM节点的边界盒（border-box）尺寸，包括内容区、内边距、边框和外边距的分层数值，适用于调试响应式布局。
1、按 Ctrl + Shift + C（Windows/Linux）或 Cmd + Shift + C（macOS）激活元素选择器。
2、将鼠标悬停在目标元素上，页面会高亮显示该元素轮廓，并在右侧面板的“Styles”或“Computed”标签页中显示其 width、height、padding、border、margin 的具体值。
3、点击该元素后，在“Computed”标签页中查找 “box-sizing” 属性，确认尺寸计算方式为 content-box 或 border-box，以准确理解所见尺寸含义。
三、使用设备模拟器中的标尺叠加层
设备模拟器不仅支持响应式预览，还可在视口上方叠加像素级标尺，便于验证移动端断点宽度与元素实际占用空间。
1、在开发者工具中按 Ctrl + Shift + M（Windows/Linux）或 Cmd + Shift + M（macOS）进入设备模拟模式。
2、点击模拟器顶部工具栏中的设置图标（齿轮形状），勾选 “显示标尺”（Show rulers）。
3、调整设备宽度滑块或输入自定义尺寸，顶部与左侧标尺将同步更新，数值直接对应当前视口像素宽度与高度。
四、通过控制台执行命令获取视口与文档尺寸
控制台提供JavaScript接口，可编程化读取当前窗口可视区域（viewport）与整个文档（document）的尺寸数据，适用于需批量验证或多尺寸比对场景。
1、在开发者工具中切换至“Console”标签页。
2、输入并回车执行：console.log("视口宽:", window.innerWidth, "高:", window.innerHeight)。
3、继续执行：console.log("文档宽:", document.documentElement.scrollWidth, "高:", document.documentElement.scrollHeight)。
4、结果将显示在控制台中，单位均为像素，可复制用于记录或进一步分析。
