如何安装ng-inspector？3分钟快速上手Chrome与Safari扩展教程

如何安装ng-inspector？3分钟快速上手Chrome与Safari扩展教程

【免费下载链接】ng-inspectorThe AngularJS inspector pane for your browser项目地址: https://gitcode.com/gh_mirrors/ng/ng-inspector

ng-inspector是一款专为AngularJS开发者设计的浏览器扩展工具，它能在浏览器开发者工具中添加一个专用面板，帮助开发者直观地查看和调试AngularJS应用的作用域（scope）、控制器（controllers）和指令（directives）等核心组件。通过实时展示应用的内部结构，ng-inspector极大地简化了AngularJS应用的调试流程，是前端开发必备的效率工具。

📋 准备工作：获取ng-inspector扩展文件

在开始安装前，需要先获取ng-inspector的扩展文件。你可以通过以下两种方式获取：

1. 直接下载扩展包（推荐新手）

访问项目发布页面，下载对应浏览器的扩展包。Chrome用户需要下载.crx格式文件，Safari用户则需要.safariextension格式的扩展包。

2. 从源码构建（适合开发人员）

如果你需要最新的开发版本或自定义扩展功能，可以从源码构建：

git clone https://gitcode.com/gh_mirrors/ng/ng-inspector cd ng-inspector npm install npm run build

构建完成后，扩展文件会生成在项目的dist目录下。

🔧 Chrome浏览器安装步骤

步骤1：打开扩展程序页面

在Chrome浏览器地址栏输入chrome://extensions/，并按下回车键。

步骤2：开启开发者模式

在扩展程序页面的右上角，找到并勾选“开发者模式”选项。此时页面会出现“加载已解压的扩展程序”、“打包扩展程序”和“更新”三个按钮。

步骤3：加载扩展

点击“加载已解压的扩展程序”按钮，在弹出的文件选择窗口中，导航到ng-inspector项目的ng-inspector.chrome目录（如果是从源码构建，则选择dist/ng-inspector.chrome目录），然后点击“选择文件夹”。

步骤4：验证安装

安装成功后，你会在Chrome的扩展程序列表中看到ng-inspector的图标。同时，在浏览器右上角的工具栏中也会出现ng-inspector的按钮。

🍎 Safari浏览器安装步骤

步骤1：准备扩展文件

确保你已经获取了ng-inspector.safariextension目录，该目录包含了Safari扩展所需的所有文件。

步骤2：打开Safari扩展偏好设置

打开Safari浏览器，点击菜单栏中的“Safari”，然后选择“偏好设置”。在偏好设置窗口中，切换到“扩展”选项卡。

步骤3：安装扩展

将ng-inspector.safariextension目录拖拽到Safari扩展偏好设置窗口中。此时会弹出一个确认对话框，点击“安装”即可。

步骤4：启用扩展

在扩展列表中，找到ng-inspector并勾选“启用”选项。安装完成后，你可以在Safari的工具栏中看到ng-inspector的图标。

✨ 开始使用ng-inspector

安装完成后，打开一个AngularJS应用，然后打开浏览器的开发者工具（通常按下F12或Ctrl+Shift+I）。在开发者工具的标签栏中，你会看到一个新的“ng-inspector”标签，点击它即可打开ng-inspector面板。

在ng-inspector面板中，你可以看到应用的作用域层次结构，包括根作用域（$rootScope）和各个控制器作用域。点击作用域可以展开查看其中的属性和方法，帮助你快速定位和调试问题。

📌 常见问题解决

问题1：扩展安装后无法在开发者工具中找到ng-inspector标签

解决方法：确保你打开的页面是一个AngularJS应用。ng-inspector只在检测到AngularJS的页面中才会显示。如果页面中没有AngularJS，标签将不会出现。

问题2：Safari提示“扩展未签名”

解决方法：这是因为扩展没有经过苹果的签名。在开发环境下，你可以在Safari的“开发”菜单中选择“允许未签名的扩展”。注意，这只适合开发和测试用途，生产环境中建议使用签名的扩展。

问题3：扩展无法正常工作或显示错误

解决方法：尝试更新到最新版本的ng-inspector，或者检查浏览器控制台（Console）中是否有相关错误信息。你也可以在项目的test/e2e/目录下找到一些测试用例，帮助你排查问题。

通过以上步骤，你已经成功安装并开始使用ng-inspector了。这款强大的AngularJS调试工具将帮助你更高效地开发和调试应用，提升你的前端开发体验！

【免费下载链接】ng-inspectorThe AngularJS inspector pane for your browser项目地址: https://gitcode.com/gh_mirrors/ng/ng-inspector