当前位置: Chrome插件首页 > 开发者插件 > Page Ruler - chrome屏幕尺子插件 Chrome插件

Page Ruler - chrome屏幕尺子插件 Chrome插件

插件分类:开发者插件

Page Ruler - chrome屏幕尺子插件 Chrome插件图文教程

前端开发人员需要经常做一些网页美工或者是网页前台开发,对于某一个元素的具体尺寸,像素的要求会比较高,即使我们普通用户在上传图片或者其他操作时也会有这样的需求,希望能够知道某个图片或者网页的具体大小尺寸的话,最好的方法有一把在线的尺子,而是一款Chrome浏览器中的Page Ruler插件就是这样一款屏幕尺子。这款插件可以很好地集成到谷歌浏览器中,在Chrome中启动PageRuler插件可以与当前网页的屏幕无缝地集成到一起,可以使得用户非常精确地测量出当前页面某个元素或者是整个页面的大小尺寸。
Pagerulericon

Page Ruler屏幕尺子插件概述

Page Ruler是一款可以测量Chrome浏览器中网页元素大小尺寸的谷歌浏览器插件。页面尺寸测量工具,前端设计师专用。可以测量页面元素、图片和文本的尺寸、位置。Page Ruler是一款可以快速测量出当前页面中某个元素大小尺寸的Chrome插件,在Chrome中安装了Page Ruler插件以后,可以点击浏览器右上角的Page Ruler插件在任何页面中启动它来测量相关的元素大小。
pageruler

Page Ruler屏幕尺子插件功能

 
PageRuler屏幕尺子插件是
一款非常轻量级的屏幕尺子插件,还可以为Chrome浏览器量身定做测量需求,使得用户的测量结果变得更加准确。简单直接点说
PageRuler屏幕尺子插件就是绘制一个标尺,得到像素的尺寸和定位,并测量在任何网页上的元素。页尺让你的画出一把尺子到任何页面,并显示它的宽度、高度和位置。

其功能特色有:
*画一把尺子到任何页面,并查看宽度,高度和顶部,底部,左,右位置
*拖动标尺的边缘来调整它的大小
*使用箭头键移动和调整标尺的大小
*显示从标尺边缘延伸的指南
*手动更新标尺的大小和位置,从工具栏上进行精确的更改
*启用“元素模式”来在页面上的元素,当你移动你的鼠标在他们
*通过任何被测元素的父母,孩子和兄弟姐妹

Page Ruler屏幕尺子插件安装和使用方法

PageRuler屏幕尺子插件可以在本站的下方找到下载地址。其安装方法同其他chrome插件的安装方法,具体可以参照:谷歌chrome浏览器怎么离线安装CRX格式插件

PageRuler的功能简单,使用起来也非常简单,网上都找不到详细的介绍,说明大家不需要介绍就能直接使用了。其使用方法步骤无外乎下面几种:
1.打开一个待测网页,选择到将要测量的元素(或者是整个网页)。
2.点击Chrome右上角的Page Ruler插件来启动屏幕尺子的功能。
3.拖动鼠标画出一个矩形来选中网页中的待测元素(其中选中的部分会以阴影部分表现出来)。
4.通过屏幕上面的Page Ruler插件工具条来查看当前选中的矩形大小的尺寸信息。
5.如果信息不符合要求,也可以选择屏幕上面的间距输入框来手动微调选中元素的位置。

pageruler的使用方法

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

Page Ruler屏幕尺子插件注意事项

使用本地网页上,您将需要启用“允许访问文件的网址”选项在您的扩展标签支持

Page Ruler - chrome屏幕尺子插件 Chrome插件图片

  • Page Ruler - chrome屏幕尺子插件插件图片
  • Page Ruler - chrome屏幕尺子插件插件图片
  • Page Ruler - chrome屏幕尺子插件插件图片

Page Ruler - chrome屏幕尺子插件基本信息

插件名称:Page Ruler - chrome屏幕尺子插件 插件作者: 插件语言:支持多种语言 官方站点:暂无官方站点 插件唯一标识:jlpkojjdgbllmedoapgfodplfhcbnbpn

Page Ruler - chrome屏幕尺子插件用户数和评分

下载次数:365785 用户评分:4.29365 (共5分) 参与评分人数:882

Page Ruler - chrome屏幕尺子插件文件信息

当前版本:2.0.9 最后更新日期:2020-07-08 文件大小:172KB

Page Ruler - chrome屏幕尺子插件下载地址

Page Ruler - chrome屏幕尺子插件相关插件

AngularJS Batarang

开发者插件 2020-12-23 23:10:12

angularjs batarang是一款针对谷歌浏览器用户打造的一款增强插件,该插件主要用于开发者进行脚本的编译和调试操作,可以有效地加速开发者的进程,是您调试AngularJS程序的好帮手。

AlloyDesigner - 前端重构开发辅助工具

开发者插件 2019-10-28 14:49:24

AlloyDesigner是来自Tencent AlloyTeam的前端开发工具,其只出现开发阶段的一定时期,可以在制作时期,也可以在开发测试期,旨在提高前端开发的效率,获得更加便捷的开发体验。

Page Ruler - chrome屏幕尺子插件

开发者插件 2019-02-22 16:40:30

Page Ruler是一款可以测量Chrome浏览器中网页元素大小尺寸的谷歌浏览器插件。页面尺寸测量工具,前端设计师专用。可以测量页面元素、图片和文本的尺寸、位置。Page Ruler是一款可以快速

WEB前端助手(FeHelper)

开发者插件 2019-01-25 22:37:24

WEB前端助手:FeHelper是一款chrome浏览器插件。包含一些前端实用的工具,如字符串编解码、代码美化、JSON格式化查看、二维码生成器、编码规范检测、栅格规范检测、网页性能检测、页面取

AngularJS Batarang v0.10.9

开发者插件 2020-12-23 22:54:19

angularjs batarang是一款针对谷歌浏览器用户打造的一款增强插件,该插件主要用于开发者进行脚本的编译和调试操作,可以有效地加速开发者的进程,是您调试AngularJS程序的好帮手

推荐十二款Web开发必备的Chrome插件

聚合专题 2021-02-20 12:57:43

之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展,这次我们继续展示一组很有用的 Chrome 应用程序。这些免费的 Chrome 应用程序可以简化您的工作流程,为了加快您的工作流

Web Developer - 网页开发者必备工具

开发者插件 2019-02-13 23:42:46

Web Developer 这款扩展集成了各种各样的 Web 开发工具,几乎是网页开发人员必备的 Chrome 开发者工具扩展插件,安装之后会在浏览器工具栏添加一个齿轮状的小图标,点击小图标之后就可

Page Ruler - chrome屏幕尺子插件同类插件推荐

Xdebug helper Chrome插件

开发者插件 2019-12-06 11:21:12

每个人都必须拥有使用Xdebug调试,分析和跟踪PHP代码的功能。 此扩展将帮助您轻松地启用/禁用调试,性能分析和跟踪,而不必费力地处理POST / GET变量或cookie。对于使用带有Xdebug支持的

Chrome extension source viewer v1.6.9 Chrome插件

开发者插件 2020-01-25 20:10:24

在 Chrome Web store 中查看任何 Chrome 扩展的源代码,而无需安装它。
特点: chrome Web store 的按钮-下载扩展名为 zip 文件-查看源
-通过按钮上的上下文菜单可配置: 通过 “设置一键操作点击 “主要操作。
-查看来源:
-文件名/类型过滤器
-在文件内容中搜索 (文字或 regexp)
-

CrapApi-接口调试工具 Chrome插件

开发者插件 2019-04-29 22:21:37

CrapApi接口调试工具是CrapApi接口管理系统的插件,可以单独使用,用于接口调试,也可配合管理系统使用,登录后可直接同步管理系统中的接口。


ApiDebug & CrapApi-Plug(crapApi)区别:
ApiDebug为独立插件,与CrapApi接口管理系统接口数据没有互通,能不依赖服务器运行,服务器仅作数据备份
CrapApi-Plu

前端开发助手 Chrome插件

开发者插件 2016-06-18 23:17:05

二维码生成(QRCode),短网址生成,默认图片(占位图)生成,图片外链(图床),HTML/CSS/JS 压缩格式化,JSON 格式较验等。
二维码生成(QRCode),短网址生成,默认图片(占位图)生成,图片外链(图床),HTML/CSS/JS 压缩格式化,JSON 格式较验等。

Augury v1.22.0 Chrome插件

开发者插件 2019-08-28 12:33:15

Augory 是 Google Chrome 开发工具的扩展,用于在运行时调试和可视化 Angular 应用程序。
-1.22.0 版本中的新功能
* 修复了启用 HMR 的应用程序的问题

Akamai debug headers Chrome插件

开发者插件 2016-03-30 11:07:52

Add diagnostic headers to Akamai'd websites
Akamai debug headers makes it much easier to figure out what's happening with websites fronted by Akamai.

This simple, lightweight exte

NoFollow Simple Chrome插件

开发者插件 2019-05-19 03:13:46

概述网页上
这个扩展的所有nofollow的链接将勾勒出网页上的所有链接nofollow的

- 网址:
http://www.igorware.com/
- 联系方式和放大器;报告问题:
http://www.igorware.com/co

Responsive Inspector Chrome插件

开发者插件 2016-01-13 14:20:53

Responsive Inspector allows inspecting page media queries.
Responsive Inspector is a simple Google Chrome extension that allows viewing media queries of visited websites. It is very useful when de

Visual Studio Marketplace Metrics v1.0.6 Chrome插件

开发者插件 2019-07-06 07:53:57

此扩展允许用户在 Visual Studio Marketplace 网站 https://marketplace.visualstudio.com 中查看扩展的安装计数总计和其他度量。适用于 Azure Dev Ops (以前的 VSTS) 扩展、 Visual Studio IDE 扩展和 VS 代码扩展。
显示扩展总数,安装和审查。
包括评论数量占下载百分比。扩展结果

axe v3.7.0 Chrome插件

开发者插件 2019-12-02 10:52:35

注意: Chrome 的 axe 扩展要求 Chrome 浏览器版本 55 或更高。 WCAG 2 和第 508 节的辅助功能检查器。使用 axe Chrome 扩展在网站或 web 应用程序上查找辅助功能缺陷。删除可访问性缺陷的斧头!Chrome 的斧头可访问性检查器是一种快速、轻便的可访问性测试工具,返回零误报。它只测试可以通过自动化准确检测到的可访问性问题,只测试您正在测试的页面或应用程序上