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

sencha inspector(调试工具)的更多相关文章

  1. 初探 Ext JS 6 (sencha touch/ext升级版)

    Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...

  2. Sencha EXTJS6的 Eclipse 插件安装指南

    Sencha EXTJS的 Eclipse 插件安装指南 (翻译:苏生米沿) 本文地址:http://blog.csdn.net/sushengmiyan/article/details/52566 ...

  3. nodejs的调试

    js的调试始终是一个比较麻烦也是比较困难的事情,从最原始的alert调试,到火狐的firebug工具,在到后来各个浏览器厂商的调试工具.调试工具的发展历程,也可以看出由JS构建的业务和技术逻辑越来越复 ...

  4. 【翻译】如何创建Ext JS暗黑主题之二

    原文:How to Create a Dark Ext JS Theme– Part 2 我已经展示了如何去开发一个精致的暗黑主题,看起来就像Spotify.在本文的第一部分,了解了Fashion.S ...

  5. 【翻译】如何创建Ext JS暗黑主题之一

    原文:How to Create a Dark Ext JS Theme– Part 1 概述 我是不是都要演示我的Spotifinder Ext JS应用程序.它是一个很酷的应用程序,可连接到Las ...

  6. Ext Js 6+ 动态切换皮肤

    在这里以ext js 6.2.1版本为例(注:需要安装Sencha Cmd,以及下载对应的sdk) 1.创建空白项目 在命令行中输入sencha -sdk D:\Code\ext-6.2.1 gene ...

  7. 【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测(App Inspector)

    和其他的Sencha开发人员一样,我会花费大约半天的时间在我喜欢的IDE工具上编写JavaScript,而另一半时间则是在浏览器上测试和调试我的应用程序.在过去几年,每一个主要的浏览器都已大为改善.现 ...

  8. NodeJS 调试工具(node-inspector)

    node-inspector是基于Chrome的调试工具. 安装: npm install -g node-inspector 1.启动node-inspector来监听node.js的debug调试 ...

  9. HTML Inspector – 帮助你编写高质量的 HTML 代码

    HTML Inspector 是一款代码质量检测工具,帮助你编写更优秀的 HTML 代码.HTML Inspector 使用 JavaScript 编写,运行在浏览器中,是最好的 HTML 代码检测工 ...

随机推荐

  1. IS Decisions如何帮助企业提高安全标准

    PCI DSS标准有什么要求? 简单地说,PCI DSS要求最高级别的网络安全性.这一标准如今广泛应用于需要存储.管理.传输客户(或持卡人)个人数据的行业和领域. 施行严格的访问监控措施 为了保证关键 ...

  2. Java NIO(三) Buffer

    Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到通道中的. 缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被包装成NIO ...

  3. SQLite入门操作(一)

    //++其他的头文件 #include "sqlite3.h" #pragma comment(lib,"sqlite3.lib") int GetItemCo ...

  4. spring的开发

    spring与web的整合 1. 整合的原理: Spring容器随着tomcat容器ServletContext的启动而启动,并且在初始化完成后放到整个应用都可以访问的范围. ApplicationC ...

  5. OpenSSL.Net 在生产环境中无法正常加载的原因分析与解决 z

    http://blog.csdn.net/wangjia184/article/details/6990098 http://www.openssl.org/ 在本地测试好好的代码部署到生产环境后,遇 ...

  6. HCNA修改OSPF基准带宽

    1.拓扑图 2.R1配置ip开启OSPF The device is running! <Huawei>sysEnter system view, return user view wit ...

  7. Struts2学习-横切关注点

    1.建空项目 2.建包 3.建类 4.编写 package com.nf.action; import com.opensymphony.xwork2.ActionInvocation; import ...

  8. POJ 1423 斯特林

    题意:进制问题 分析: 打表,但是要用不能 long long 型,超内存. n! = log_{10}\sqrt{2{\pi}n}*(\frac{n}e)^n 精度要求 #include <c ...

  9. 【转】学习jar命令 创建和解压jar文件包

    java编程中每天都用不少jar文件,项目开发中不停地导包,在忙完了一天的工作,放下那些复杂的业务实现,不仅想问这些jar包怎么生成的,jar包有哪些独特的地方等等. 原来这些经常见到的jar包是ja ...

  10. 学校管理系统设计java(数据库、源码、演讲内容、ppt等)

    该系统使用java语言编写 获取班级项目展第二名 项目展示:https://www.bilibili.com/video/av27910081/?p=10 登录截图 git:https://githu ...