Google chrome 如何检查剑道多选?

Google chrome 如何检查剑道多选?,google-chrome,kendo-ui,web-inspector,Google Chrome,Kendo Ui,Web Inspector,我正在为一个有剑道多选下拉列表的页面开发自动化 通常我依靠Chrome inspector开发工具来确定我正在访问的元素的Xpath 然而,当我试图检查剑道多选时,我遇到了第22条难题(或者更准确地说,是不确定性原理)。我遵循的程序是 先决条件: 1a)浏览器打开到包含剑道多选的页面 1b)铬检测仪处于激活状态 单击剑道多选的搜索栏。这将导致可能的多选项(每个项都有自己的复选框)的下拉列表的扩展。它是一种嵌入在下拉列表中的混合复选框列表。对最终用户来说非常方便 现在列表已经展开,我想探索,比方说

我正在为一个有剑道多选下拉列表的页面开发自动化

通常我依靠Chrome inspector开发工具来确定我正在访问的元素的Xpath

然而,当我试图检查剑道多选时,我遇到了第22条难题(或者更准确地说,是不确定性原理)。我遵循的程序是

  • 先决条件: 1a)浏览器打开到包含剑道多选的页面 1b)铬检测仪处于激活状态

  • 单击剑道多选的搜索栏。这将导致可能的多选项(每个项都有自己的复选框)的下拉列表的扩展。它是一种嵌入在下拉列表中的混合复选框列表。对最终用户来说非常方便

  • 现在列表已经展开,我想探索,比方说,在列表的第三个元素处或周围的DOM。我的最终目标是为multiselect列表的第三个元素确定Xpath。没问题。。。我已经展开了列表,我所需要做的就是单击Chrome inspector窗口中的元素选择器图标,然后指向浏览器窗口中的第三个元素

  • 但没那么快

  • 问题是。。。只要我点击Chrome inspector窗口中的元素选择器图标,multiselect列表就会折叠(!),当然,随着它的出现,DOM会相应地更新,我希望检查的元素甚至不在DOM中,因为multiselect列表的更新状态 4a。作为一种潜在的解决方法,我尝试了热键,相当于单击Chrome inspector的元素选择器图标(Ctrl-Shift-C)。这只起了部分作用:虽然multiselect列表没有折叠,但我无法确定结果匹配在DOM中的位置——因为只要我上下滚动或执行任何其他鼠标或键盘活动,dang multiselect列表就会折叠

    WTF

    我想我要寻找的是一种将Chrome inspector窗口中的鼠标点击与inspectee窗口中的鼠标点击隔离开来的方法。我过去没有遇到过这个要求,所以我不知道如何继续


    我找到了一些远程检查的参考资料,我想知道这是否是我的解决方案。但我一点也不清楚它是否能解决我的问题。我选择在这里发布这个问题,希望能收到一些与我的难题相关的明智建议,而不是把兔子从一个可能永无止境的兔子洞里赶下去。

    打开“源”选项卡上的“开发工具”,打开“多选”框并点击F8。这将暂停一切,一切都将变为灰色

    现在,您可以切换到Dev工具中的Elements选项卡,做任何您想做的事情,页面上的任何内容都不会改变


    完成后,再次按F8键或单击“开发工具”中“源代码”选项卡上的“播放”按钮。

    右键单击项目并选择“检查”可能会更幸运。虽然multiselect可能会崩溃,但您应该仍然能够捕获DOM中的元素。(我假设剑道是jQuery的?)

    如果您的页面上只有一个MultiSelect,这将为您提供:

    $(".k-animation-container .k-list-container.k-popup li:nth-child(3)");
    
    如果可以编辑代码,临时设置为false可能会有所帮助。您还可以绑定到各种剑道公开,并在其中放置一些调试代码


    最后一个技巧是在DOM检查器中捕获一个节点,在本例中是div.k-animation-container,它应该是body的直接子级,然后右键单击>断开>属性修改。这可能会经常暂停您的代码,但这是一个很好的工具,可以放在您的腰带上,以备您需要。

    这些建议并没有解决我的问题,每次我尝试检查时,multiselect都会继续崩溃。例如,只需按F8键即可导致multiselect崩溃

    然而,我确实找到了一个简单的解决办法。我一直在使用一个停靠在浏览器窗口上的检查器窗口。这似乎会导致被检查者浏览器窗口和检查者窗口共享键盘和鼠标活动


    但是,当我松开检查器时,我可以单击,例如,在页面中选择一个元素来检查它图标,而不会导致被检查页面中的任何活动,包括multiselect。现在,我可以将鼠标悬停在每个multiselect项上,并分别检查它们。

    使用Chrome Developer工具在子树更改或元素属性更改时中断。以下博客文章详细介绍了该过程: