如何在Chrome、Edge等浏览器中启用鼠标查看HTML元素宽度功能

你所说的鼠标悬停查看元素宽度的功能是Chromium内核浏览器（Microsoft Edge、Google Chrome均属于此类）开发者工具的自带功能，开启操作如下：

• 打开开发者工具：可任选以下任意一种方式操作：按F12快捷键、在页面空白处右键点击「检查」、按下快捷键Ctrl+Shift+I（Mac系统对应快捷键为Cmd+Opt+I）。
• 激活元素选择模式：点击开发者工具左上角的箭头形状「选择页面中的元素」按钮，或者直接按下快捷键Ctrl+Shift+C（Mac系统对应快捷键为Cmd+Shift+C）。
• 查看尺寸：激活选择模式后，鼠标悬停在任意页面元素上，就会自动弹出信息提示框，直接显示元素的宽度、高度、内外边距数值。默认状态下该提示为开启状态，如果你操作后没有弹出提示，可手动开启：
  • 点击开发者工具右上角的齿轮形「设置」图标
  • 在设置页侧边栏选择「元素」分类，勾选「悬停时显示元素信息提示框」选项即可。

如果你需要查看包含内边距、边框的元素总宽度，选中元素后可直接在开发者工具「元素」面板右侧的「样式」栏底部，查看官方提供的盒模型示意图，所有尺寸参数都会明确标注。

内容的提问来源于stack exchange，提问作者user17190872