1、打开一个待测网页,选择到将要测量的元素(或者是整个网页)。
2、点击Chrome右上角的Page Ruler插件来启动屏幕尺子的功能。
3、拖动鼠标画出一个矩形来选中网页中的待测元素(其中选中的部分会以阴影部分表现出来)。
4、通过屏幕上面的Page Ruler插件工具条来查看当前选中的矩形大小的尺寸信息。
5、如果信息不符合要求,也可以选择屏幕上面的间距输入框来手动微调选中元素的位置。

用户在选择Page Ruler插件进行测量元素的时候,选中的元素会以一个阴影的形式存在于当前的网页中,其默认的颜色是淡蓝色,但是如果当前网页的颜色正好是淡蓝色的话,那就很容易使用户分不清到底选中来当前页面中的哪些区域,这时候就可以点击Page Ruler插件上方工具栏的颜色按钮来选择一个更加鲜明的颜色当作选中区域颜色的背景。
