Ember Inspector 使用与安装指南

Ember Inspector 是一款强大的工具，旨在简化 Ember.js 应用程序的调试和理解过程，通过在浏览器的开发者工具中添加一个专门的 Ember 标签页来实现。以下是关于其核心组件、启动、以及配置的详细介绍。

1. 项目目录结构及介绍

Ember Inspector 的项目结构组织有序，支持高效的开发和维护。下面是关键的目录和文件说明：

• main: 主分支存放最新开发代码。
• ember-debug: 包含与 Ember 开发模式相关的代码。
• lib: 项目的核心逻辑所在的库文件夹。
• public: 静态资源文件存放处，如前端可直接访问的文件。
• scripts: 启动脚本和其他辅助脚本的存放位置。
• test: 测试代码所在目录，确保软件质量。
• vendor: 第三方依赖库，非自主开发但项目依赖的代码放在这里。
• .editorconfig, .eslintignore, .gitignore: 代码风格与版本控制配置文件。
• ember-cli-build.js: Ember CLI 构建配置文件。
• gulpfile.js: Gulp 构建任务文件（如果使用）。
• package.json, pnpm-lock.yaml: 项目依赖定义和锁定版本。
• README.md: 项目的主要说明文档，包括安装和使用说明。
• LICENSE: 许可证文件，指示软件使用的法律条款，采用 MIT 协议。

2. 项目的启动文件介绍

• ember-cli-build.js: 此文件是 Ember 应用程序构建流程的核心配置，它告诉 Ember CLI 如何打包你的应用。你可以在其中配置各种编译选项，比如添加插件、修改输出目录等，以满足特定的构建需求。

  // 示例ember-cli-build.js中的基本配置
  module.exports = function(defaults) {
    let app = new EmberApp(defaults, {
      // 添加自定义的编译选项或启用特性
    });
  
    return app.toTree();
  };
  

• 对于 Ember Inspector 这类扩展工具，其“启动”更多指的是在浏览器环境中激活插件的过程。通常，安装浏览器扩展或手动加载构建产物至开发者工具中完成初始化。

3. 项目的配置文件介绍

• package.json: 这不仅记录了项目的元数据，也列出了所有Node.js依赖项和脚本命令。其中的emberVersionsSupported数组特别重要，它定义了Inspector支持的Ember版本范围。

  {
    "name": "ember-inspector",
    "version": "...",
    "dependencies": {...},
    "emberVersionsSupported": ["...", "..."]
  }
  

• .ember-cli (未直接提及但常见于 Ember 项目): 虽然在这个特定的引用中未直接提供，但一般Ember项目可能包含此隐藏文件，用于存储个人或团队的CLI偏好设置。

• 其他配置文件，如.env（环境变量）、.prettierrc（代码格式化规则）、editorconfig等，不在主干文档中直接描述，但在实际项目管理和开发过程中同样重要。

安装与激活

由于本指南重点在于项目结构和配置，实际的安装步骤主要涉及从Chrome Web Store安装扩展或通过源码自行编译加载。对于开发者来说，执行以下步骤：

1. 克隆仓库 git clone https://github.com/emberjs/ember-inspector.git.
2. 安装依赖 pnpm add -g ember-cli 然后 pnpm install。
3. 构建项目 pnpm build。
4. 根据浏览器类型进行扩展加载（例如，对于Chrome，在chrome://extensions页面上载入构建好的dist/chrome文件夹）。

通过上述步骤，您可以成功地准备并开始使用Ember Inspector。