Backbone DevTools 项目教程
1. 项目的目录结构及介绍
backbone-devtools/
├── css/
│ └── styles.css
├── img/
│ └── logo.png
├── js/
│ ├── main.js
│ ├── utils.js
│ └── inject/
│ └── attach.js
├── templates/
│ └── sidebar.html
├── .gitignore
├── CHANGELOG.md
├── CONTRIBUTORS
├── LICENSE
├── README.md
├── devtools.html
├── elementsSidebar.html
├── manifest.json
├── panel.html
└── updated.html
目录结构介绍
- css/: 存放项目的样式文件,如
styles.css
。 - img/: 存放项目的图片资源,如
logo.png
。 - js/: 存放项目的JavaScript文件,包括主要的逻辑文件
main.js
和工具函数文件utils.js
。inject/
目录下存放用于注入的脚本文件attach.js
。 - templates/: 存放项目的HTML模板文件,如
sidebar.html
。 - .gitignore: 指定Git版本控制系统忽略的文件和目录。
- CHANGELOG.md: 记录项目的更新日志。
- CONTRIBUTORS: 列出项目的贡献者。
- LICENSE: 项目的开源许可证文件。
- README.md: 项目的说明文档。
- devtools.html: 开发者工具的主页面。
- elementsSidebar.html: 元素面板的侧边栏页面。
- manifest.json: Chrome扩展的配置文件。
- panel.html: 开发者工具的面板页面。
- updated.html: 更新提示页面。
2. 项目的启动文件介绍
项目的启动文件主要是 devtools.html
和 main.js
。
devtools.html
devtools.html
是开发者工具的主页面,包含了开发者工具的主要UI和功能。它通过加载 main.js
来启动项目的核心逻辑。
main.js
main.js
是项目的核心逻辑文件,负责初始化开发者工具的各个面板,处理事件监听,以及与Chrome开发者工具的交互。
3. 项目的配置文件介绍
项目的配置文件主要是 manifest.json
。
manifest.json
manifest.json
是Chrome扩展的配置文件,定义了扩展的基本信息、权限、页面和脚本等。
{
"name": "Backbone Debugger",
"version": "0.5.0",
"description": "Chrome Developer Tools extension for debugging Backbone.js applications",
"permissions": [
"activeTab",
"storage"
],
"devtools_page": "devtools.html",
"background": {
"scripts": ["js/background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/content.js"]
}
],
"icons": {
"48": "img/logo.png"
},
"manifest_version": 2
}
配置文件介绍
- name: 扩展的名称。
- version: 扩展的版本号。
- description: 扩展的描述。
- permissions: 扩展所需的权限,如
activeTab
和storage
。 - devtools_page: 指定开发者工具的主页面
devtools.html
。 - background: 定义后台脚本
js/background.js
。 - content_scripts: 定义内容脚本
js/content.js
,匹配所有URL。 - icons: 定义扩展的图标。
- manifest_version: 指定manifest文件的版本,当前为2。