前端好用工具推荐-获取页面区块坐标

最新推荐文章于 2024-07-05 17:44:01 发布
原创 最新推荐文章于 2024-07-05 17:44:01 发布 · 2.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了Chrome浏览器中的一款实用插件——FE助手。该插件可以帮助开发者轻松获取页面元素的位置坐标，并具备页面代码分析等功能，是进行网页区块逻辑分析和坐标定位的好帮手。

最近分析网页的区块的逻辑关系和区块的坐标，找了一下相关的画图工具和插件，最后发现还是chrome牛叉，工具多，插件也多，而且非常方便好用。

其中一个插件叫做“FE助手”，能够方便的确定页面位置的坐标，而且使用起来相当方便，除此之外还有很多页面代码分析和探测的功能，大家可以试试。

截图如下：


大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1522
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
按住 Ctrl 测距？我用纯前端实现了canvas在线MarkMan智能测距小工具 (文末附完整代码)
最新发布
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
04-13 457
最近在做一个组件展示页面，设计那边经常甩过来个图，要我“对齐一下这个按钮”和“看看这个卡片宽多少”，MarkMan 虽然好用，但不能直接嵌在网页里看效果，看了一圈都没有类似的网站可以实现的。所以我干脆自己撸了一个简版“MarkMan 测距功能”，纯前端搞定，按住 Ctrl 就能显示距离，效果不要太爽！今天就来分享下我是怎么做的。只要上传一张截图，按住 Ctrl 在 Canvas 上随便移动，系统会自动识别当前区域颜色的边界，然后绘制出测量框，标出宽高。✅ 支持色差容忍度调节（低容忍度精准、高容忍度适合渐变背
屏幕坐标获取工具
11-30
双击该exe文件，鼠标滑到屏幕的哪里，该工具就会显示该坐标位置的X轴和Y轴，对网页开发元素大小的设置有一定的帮助。
HTML 图片热点区域＜area＞
weixin_46670730的博客
05-17 2112
html的标签使用详解，对图片标签生成热点区域
推荐一款高效的设计稿标注、测量工具--前端工程师必备
那记忆搁浅的博客
08-08 7875
之前做前端的时候一直都是用ps放大图片进行测量，鼠标稍微一抖。。又得重新拉一次选框。。而且ps程序较大，启动速度也比较慢，对于配置低点的电脑来说还是有点费内存的。 今天偶然发现一款很好用的标注和测量工具——make man，中文马克鳗。 官方网址：http://www.getmarkman.com/ 马克鳗markman是既有爱又给力的长度标注神器，马克鳗使用起来也是非常简单，双击添加测量，...
前端实现坐标系转换
qq_41765777的博客
07-05 1425
地理坐标系和投影坐标系在GIS中扮演着不同的角色：地理坐标系提供了全球范围内位置的标准描述，而投影坐标系则将地球表面的曲面投影到平面上，以便于地图制图和分析。选择合适的坐标系取决于数据的来源、使用的地图投影以及需要进行的空间分析和测量任务。
网页中的坐标
m0_71873158的博客
01-04 1841
event.screenX:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的水平距离（与浏览器窗口大小无关） event.screenY:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的垂直距离（与浏览器窗口大小无关）:相对浏览器可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离（常用）（不包括滚顶条内的距离）:相对浏览器可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离（常用）（不包括滚顶条内的距离）：向下滑动滚动块时元素隐藏内容的高度。
pdfdemo2-master_pdf.js坐标点_加工_pdf关键字坐标获取_
09-30
接下来，`pdf.js坐标点`是指PDF.js库提供的API，例如`page.getTextContent()`方法，用于获取页面上的文本内容及其布局信息。返回的对象包含一系列的`Item`，每个`Item`代表一行文本或者一个单独的字符，包含其几何...
前端基础总结--CSS
chenyouleww的博客
07-08 724
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
点坐标很好用的小工具
10-08
首先打开cad，然后打开Excel，可点坐标到excel中，很方便
截图辅助定位工具
01-09
当你需要重复在同一位置截图时，如果用鼠标框选，每次的图片大小会不一致。此程序可以生成一个透明的窗口，辅助定位。提供了VB.net的源码。
html页面绘制热区工具
08-21
可以在html绘制矩形、圆形、图片等形状，形成热区坐标。
前端常用属性知识点--文档
JackieDYH的博客
03-08 1189
清除浮动带来的影响--.clearfix .clearfix{ *zoom:1; } .clearfix::after{ content: ""; display: block; clear:both; visibility: hidden; height: 0; 弹性盒子-flex 1）弹性盒子——css3中新增的布局方式。是一种当屏幕大小、设...
Chrome 获取屏幕位置问题
Mr-Song的博客
05-08 909
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop; 转自http://www.jiaonan.tv/html/blog/1/27606.htm
桌面坐标获取工具，win，免费
nu12345的博客
11-18 3428
pyautogu.exe - 蓝奏云
html热区坐标,HTML之六：图像的热区连接
weixin_28859539的博客
05-30 1223
HTML之六：图像的热区连接。前面说了一下图像的插入，这次说说设置一张图片上不同地区的链接。比如一张地图上，河北，山东两省，点击河北的覆盖区域，转到一张河北的大地图，点击山东的覆盖区域，转到一张山东的大地图。这里我们就要用Dreamweaver找到它的坐标(coods)当然我们要首先插入中国地理图片。(还记得吗？嘿嘿。)并且使用usemap命名：示例如下：然后再定义河北、山东这两个热区以及热区的属...
html热点区域确定坐标,html图片热点连接区域上的坐标是如何定位的？
weixin_29811891的博客
05-31 6892
通过和以及三个标签一起使用，可以在html页面中插入图片，并在该图片上创建一个或多个不同形状区域的热点链接，点击热点区域可以跳转到指定的其他页面。那么， 我们今天就学习一下，如何定位图片热点区域上的坐标呢？一、如何确定原点html中的图像热点区域上的坐标，都是以该图片左上角为原点的，其坐标是(0,0)。二、如何确定某点的坐标从原点开始，向右的方向是X轴，向下的方向为Y轴，图像上的任意一点的坐标用(...
IE Chrome Opera 获取坐标
qq_38308109的博客
11-13 853
chrome： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——无 e.clientX——相对可视区域的坐标 e.x——无 opera： e.pageX——相对整个页面的坐标 e.l
使用前端制作一个武汉地铁客流量分析页面
03-28
用户可能希望从数据获取到可视化展示的整个流程，包括使用的前端技术和工具。接下来，我需要考虑用户可能的技能水平，可能对HTML、JavaScript有一定基础，但可能需要具体的步骤指导。 首先，数据获取部分。武汉地铁...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值