一个 Chrome 插件,增强调试工具的元素选择功能,能够标记元素边框和大小,标记选择的元素间间距。
鼠标移动到页面任意元素,移动到的元素会有蓝色边框,如下图:
此时鼠标单击该元素或者按下 Ctrl
键(有些元素绑定了点击事件,使用 Ctrl
键可以避免该情况下选不到元素)将会选中该元素,效果如下图:
此时鼠标再移动到除其之外的任意元素,将会标示出选中元素和鼠标经过元素之间的距离,如下图:
.
├── crx // 插件打包目录
| ├── _locales // i18n
| │ ├── en
| │ │ └── messages.json
| │ ├── zh_CN
| │ │ └── messages.json
│ ├── imgs
│ │ ├── alipay.jpg
│ │ ├── logo16.png
│ │ └── logo48.png
│ │ ├── logo128.png
│ ├── popup
│ | ├── popup.html
│ | └── popup.js
│ ├── background.js
│ └── manifest.json
├── img // 文档截图
│ ├── diff.png
│ ├── hover.png
│ ├── load.png
│ ├── load_en.png
│ ├── pack.png
│ ├── pack_en.png
│ └── select.png
├── src
│ ├── css
│ │ ├── style.css
│ │ └── style.less
│ └── ts
│ ├── const.ts
│ ├── crx.ts // Webpack 打包入口
│ ├── guidLine.ts
│ ├── line.ts
│ ├── mockup.ts
│ ├── model.ts
│ ├── rectangle.ts
│ ├── seletedRectangle.ts
│ ├── style.ts
│ ├── trick.ts
│ └── utils.ts
├── crx.crx
├── index.html
├── LICENSE
├── package.json
├── package-lock.json
├── postcss.config.js
├── README.md
├── README_EN.md
├── tsconfig.json
└── webpack.config.js
npm install
npm run start
然后浏览器打开 localhost:4200。
地址栏输入 chrome://extensions/
跳到插件页面。点击 加载已解压的扩展程序
,选择 crx
目录。
点击 打包扩展程序
按钮,按照页面提示完成即可。