https://github.com/matmanjs/matman-devtools-extensions
Chrome devtools for matman
https://github.com/matmanjs/matman-devtools-extensions
Last synced: 3 months ago
JSON representation
Chrome devtools for matman
- Host: GitHub
- URL: https://github.com/matmanjs/matman-devtools-extensions
- Owner: matmanjs
- Created: 2018-12-01T09:33:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-04-29T14:41:21.000Z (about 3 years ago)
- Last Synced: 2025-02-02T02:29:03.606Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 11 MB
- Stars: 0
- Watchers: 2
- Forks: 3
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# matman-devtools-extensions
Chrome devtools extensions for [matman](https://github.com/matmanjs/matman) 。
## 如何使用
- 安装扩展程序之后，打开开发者工具
- 它将出现在 `Elements` 面板中，与 `Styles` 平级，命名为 "matman" 的子面板。只要选择了元素，则该工具会有相应的变化（与调试样式的体验一致）
- 同时还会有一个 `matman-exec` 的页面，与 `Elements` 平级，在其中可以进行爬虫脚本的编辑与执行，执行结果将实时反馈（目前仅支持一个函数的情况）
## 开发调试
### 安装
1. 运行 `npm i` 命令；
2. 运行 `npm run build:install` 命令；
3. 打开 chrome 浏览器，访问 `chrome://extensions/` ；
4. 点击右上角的 "开发者模式"；
5. 点击 "加载已解压的扩展程序"，然后选择到本项目的 `build` 目录即可
### 更新
当改变了代码之后，在 `chrome://extensions/` 找到本程序，点击 "刷新" 的图标，然后再重新打开开发者工具。
> 有时候刷新了程序还不够，可能还需要刷新页面，尤其是有 content script 的场景；为了识别当时加载的时最新的代码，建议在某些地方输出不一样的标记，例如 panel ui 中，或者使用 `console.log` 输出不一样的标记。
## 更多资料
- https://developer.chrome.com/extensions/devtools
- http://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html#%E5%86%99%E5%9C%A8%E5%89%8D%E9%9D%A2
- [Publish in the Chrome Web Store](https://developer.chrome.com/webstore/publish)
- https://chrome.google.com/webstore/developer/dashboard?hl=zh-CN&gl=CN