sencha inspector（调试工具）

Sencha Inspector

一：安装sencha inspector

1. 使用Sencha Inspector下载Ext JS试用版（可在此处获得）。
2. 下载后，双击下载的文件以启动安装程序，然后按照说明进行操作。
3. 安装完成后，从其安装路径运行Sencha Inspector。接下来，让我们用Sencha Inspector连接一个示例应用程序。
4. 视频演练，显示了使用Sencha Inspector 连接应用程序的过程。

二：连接应用程序

1. 使用sencha cmd直接连接（连接方式一），在不向应用程序添加任何代码的情况下，您可以运行sencha app watch --inspect以启动Sencha Cmd Web服务器。附加--inspect标志将自动注入一些代码，将您的应用程序连接到Sencha Inspector。注意：在运行该命令之前，请确保Sencha Inspector已在您的计算机上的端口1839上运行。您的应用程序现在可以在浏览器中查看，http://localhost:1841Sencha Inspector应自动检测它并允许您检查应用程序。
2. 配置连接应用程序（连接方式二），您可以添加几行代码，将您的应用程序连接到Sencha Inspector。首先，打开app.json并找到“js”数组。接下来，编辑它以包含以下行：

"js" : [

      {

           "path" : "http://local.xxxx.com:1839/inspector.js",

           "remote"    : true,

           "bootstrap" : true

      }

添加此配置后app.json，您还需要向应用程序添加初始化代码。找到{appRoot}/app/Application.js并修改它以包含launch() 下面示例中的方法。

Ext.define('DemoClient.Application', { 

      extend: 'Ext.app.Application',      

      name: 'DemoClient', 

      launch: function () {

         try {

SenchaInspector.init();

} catch (e) {}

      }

  }); 我们将调用包装到init()内部调试标志中。Sencha Cmd将忽略生产构建期间这些块之间的所有代码。最后，使用Sencha Cmd运行sencha app watch。这将允许您在浏览器中预览您的应用程序http://localhost:1841。如果配置正确，Sencha Inspector应自动检测它并允许您检查应用程序。

三：概述

 

“组件”选项卡可用于检查应用程序当前运行时中组件的结构。

“仓储”选项卡允许您在运行时检查应用程序的数据存储。

“布局”是Ext JS最强大的部分之一。它处理应用程序中每个组件的大小和位置。通过“布局运行”选项卡，您可以查看Sencha应用程序在用户实时与其交互时如何重新计算组件的大小和位置。

“事件”选项卡允许您跟踪应用程序中生成的所有事件。

“应用程序架构”选项卡列出了当前加载的应用程序的所有类。这些类在文件夹中的组织方式与它们在文件系统中的显示方式相同。

 

 Q群：851794664