除了检查之外，如何在 HTML 页面中查找组件的属性值

Question

我一直在进行 Sencha 测试，我正在寻找所有属性值，如 ID、名称等，将它们添加到我的脚本中，以表示组件。所以我正在做的是， 进入网页->右键组件->检查元素->然后参考HTML代码获取足够的组件属性。 除了检查之外，还有什么方法可以在 HTML 页面中找到组件的属性值吗？？？ 请指教..

Answer 1

您可以按 ctrl+u 显示页面源代码。使用 ctrl+f 查找您想要的元素。这比检查元素更容易。

Answer 2

试用 Sencha 的 App Inspector chrome 扩展，这将帮助您更轻松地调试 ExtJS 和 Sencha Touch 应用程序。

它还可以帮助您检查组件树、数据存储、事件和布局。

您可以从下面安装它 URL,

App Inspector For Sencha

希望对您有所帮助！

Answer 3

转到浏览器控制台并执行以下脚本以收集每个元素的属性列表。

var parentEl = document.getElementById("container");
getElementsAndAttributes(parentEl);

function getElementsAndAttributes(container) {
  var all = container.getElementsByTagName("*");
  for (var i = 0, max = all.length; i < max; i++) {
    console.log(all[i].tagName);
    var attrs = all[i].attributes;
    var keys = Object.keys(attrs);
    for (var j = 0; j < keys.length; j++) {
      var attr = attrs[keys[j]];
      console.log(attr.name + " -> " + attr.value);
    }
  }
}

<body>
  <div id="container">
    <span class="title" style="color:GREEN;">Phineas</span>
    <img src="https://cdn.pastemagazine.com/www/blogs/lists/2010/05/12/phineas.jpg" width="104" height="142">
  </div>
</body>

Answer 4

以编程方式获取组件元素的属性值：

首先，获取组件。有多种方式，例如：

var component = Ext.getCmp(id) 获取具有特定 id 的组件。
var component = Ext.ComponentQuery.query(xtype) 获取某个 xtype

其次，在该组件上，调用 getEl() 或任何其他元素选择器，例如：

var el = component.getEl()
var el = grid.getView().getEl()
var el = formfield.inputEl

三、el上调用getAttributes:

var attributes = el.getAttributes()

属性现在将包含如下对象：

class:"x-grid-view x-grid-with-col-lines x-grid-with-row-lines x-fit-item x-grid-view-default x-unselectable"
data-componentid:"tableview-1325"
id:"tableview-1325"
role:"rowgroup"
style:"margin: 0px; overflow: auto; width: 317px; height: 664px;"
tabindex:"0"

除了检查之外，如何在 HTML 页面中查找组件的属性值

How to find attribute values of components in an HTML page other than inspecting it

html

testing

extjs

html-components