sencha inspector(调试工具)
Sencha Inspector
一:安装sencha inspector
- 使用Sencha Inspector下载Ext JS试用版(可在此处获得)。
- 下载后,双击下载的文件以启动安装程序,然后按照说明进行操作。
- 安装完成后,从其安装路径运行Sencha Inspector。接下来,让我们用Sencha Inspector连接一个示例应用程序。
- 视频演练,显示了使用Sencha Inspector 连接应用程序的过程。
二:连接应用程序
- 使用sencha cmd直接连接(连接方式一),在不向应用程序添加任何代码的情况下,您可以运行sencha app watch --inspect以启动Sencha Cmd Web服务器。附加--inspect标志将自动注入一些代码,将您的应用程序连接到Sencha Inspector。注意:在运行该命令之前,请确保Sencha Inspector已在您的计算机上的端口1839上运行。您的应用程序现在可以在浏览器中查看,http://localhost:1841Sencha Inspector应自动检测它并允许您检查应用程序。
- 配置连接应用程序(连接方式二),您可以添加几行代码,将您的应用程序连接到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(调试工具)的更多相关文章
- 初探 Ext JS 6 (sencha touch/ext升级版)
Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...
- Sencha EXTJS6的 Eclipse 插件安装指南
Sencha EXTJS的 Eclipse 插件安装指南 (翻译:苏生米沿) 本文地址:http://blog.csdn.net/sushengmiyan/article/details/52566 ...
- nodejs的调试
js的调试始终是一个比较麻烦也是比较困难的事情,从最原始的alert调试,到火狐的firebug工具,在到后来各个浏览器厂商的调试工具.调试工具的发展历程,也可以看出由JS构建的业务和技术逻辑越来越复 ...
- 【翻译】如何创建Ext JS暗黑主题之二
原文:How to Create a Dark Ext JS Theme– Part 2 我已经展示了如何去开发一个精致的暗黑主题,看起来就像Spotify.在本文的第一部分,了解了Fashion.S ...
- 【翻译】如何创建Ext JS暗黑主题之一
原文:How to Create a Dark Ext JS Theme– Part 1 概述 我是不是都要演示我的Spotifinder Ext JS应用程序.它是一个很酷的应用程序,可连接到Las ...
- Ext Js 6+ 动态切换皮肤
在这里以ext js 6.2.1版本为例(注:需要安装Sencha Cmd,以及下载对应的sdk) 1.创建空白项目 在命令行中输入sencha -sdk D:\Code\ext-6.2.1 gene ...
- 【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测(App Inspector)
和其他的Sencha开发人员一样,我会花费大约半天的时间在我喜欢的IDE工具上编写JavaScript,而另一半时间则是在浏览器上测试和调试我的应用程序.在过去几年,每一个主要的浏览器都已大为改善.现 ...
- NodeJS 调试工具(node-inspector)
node-inspector是基于Chrome的调试工具. 安装: npm install -g node-inspector 1.启动node-inspector来监听node.js的debug调试 ...
- HTML Inspector – 帮助你编写高质量的 HTML 代码
HTML Inspector 是一款代码质量检测工具,帮助你编写更优秀的 HTML 代码.HTML Inspector 使用 JavaScript 编写,运行在浏览器中,是最好的 HTML 代码检测工 ...
随机推荐
- IS Decisions如何帮助企业提高安全标准
PCI DSS标准有什么要求? 简单地说,PCI DSS要求最高级别的网络安全性.这一标准如今广泛应用于需要存储.管理.传输客户(或持卡人)个人数据的行业和领域. 施行严格的访问监控措施 为了保证关键 ...
- Java NIO(三) Buffer
Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到通道中的. 缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被包装成NIO ...
- SQLite入门操作(一)
//++其他的头文件 #include "sqlite3.h" #pragma comment(lib,"sqlite3.lib") int GetItemCo ...
- spring的开发
spring与web的整合 1. 整合的原理: Spring容器随着tomcat容器ServletContext的启动而启动,并且在初始化完成后放到整个应用都可以访问的范围. ApplicationC ...
- OpenSSL.Net 在生产环境中无法正常加载的原因分析与解决 z
http://blog.csdn.net/wangjia184/article/details/6990098 http://www.openssl.org/ 在本地测试好好的代码部署到生产环境后,遇 ...
- HCNA修改OSPF基准带宽
1.拓扑图 2.R1配置ip开启OSPF The device is running! <Huawei>sysEnter system view, return user view wit ...
- Struts2学习-横切关注点
1.建空项目 2.建包 3.建类 4.编写 package com.nf.action; import com.opensymphony.xwork2.ActionInvocation; import ...
- POJ 1423 斯特林
题意:进制问题 分析: 打表,但是要用不能 long long 型,超内存. n! = log_{10}\sqrt{2{\pi}n}*(\frac{n}e)^n 精度要求 #include <c ...
- 【转】学习jar命令 创建和解压jar文件包
java编程中每天都用不少jar文件,项目开发中不停地导包,在忙完了一天的工作,放下那些复杂的业务实现,不仅想问这些jar包怎么生成的,jar包有哪些独特的地方等等. 原来这些经常见到的jar包是ja ...
- 学校管理系统设计java(数据库、源码、演讲内容、ppt等)
该系统使用java语言编写 获取班级项目展第二名 项目展示:https://www.bilibili.com/video/av27910081/?p=10 登录截图 git:https://githu ...