zoukankan      html  css  js  c++  java
  • 使用Chrome DevTools(console ande elements panel)进行xpath/css/js定位

    Google Chrome provides a built-in debugging tool called "Chrome DevTools" out of the box, which includes a handy feature that can evaluate or validate XPath/CSS selectors without any third party extensions.

    This can be done by two approaches:

    • Use the search function inside Elements panel to evaluate XPath/CSS selectors and highlight matching nodes in the DOM.
    • Execute tokens $x("some_xpath") or $$("css-selectors") in Console panel, which will both evaluate and validate.

    From Elements panel

      1. Press F12 to open up Chrome DevTools.
      2. Elements panel should be opened by default.
      3. Press Ctrl + F to enable DOM searching in the panel.
      4. Type in XPath or CSS selectors to evaluate.
      5. If there are matched elements, they will be highlighted in DOM.
        However, if there are matching strings inside DOM, they will be considered as valid results as well. For example, CSS selector header should match everything (inline CSS, scripts etc.) that contains the word header, instead of match only elements.

    From Console panel

    1. Press F12 to open up Chrome DevTools.
    2. Switch to Console panel.
    3. Type in XPath like $x(".//header") to evaluate and validate.
    4. Type in CSS selectors like $$("header") to evaluate and validate.
    5. Check results returned from console execution.
      • If elements are matched, they will be returned in a list. Otherwise an empty list [ ] is shown.
    $x(".//article")
    [<article class="unit-article layout-post">…</article>]
    
    $x(".//not-a-tag")
    [ ]
    

      

    • If the XPath or CSS selector is invalid, an exception will be shown in red text. For example:
    $x(".//header/")
    SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.
    
    $$("header[id=]")
    SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.
    

    js定位

    console里面执行javascript代码,操作dom对象。

    每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

    通过id获取
      document.getElementById(“id”)
    通过name获取
      document.getElementsByName(“Name”) 返回的是list
    通过标签名选取元素
      document.getElementsByTagName(“tag”)
    通过CLASS类选取元素
      document.getElementsByClassName(“class”)
    兼容性:IE8及其以下版本的浏览器未实现getElementsByClassName方法
    通过CSS选择器选取元素
      document.querySelectorAll(“css selector")
    兼容性:IE8及其以下版本的浏览器只支持CSS2标准的选择器语法

    转自:

    https://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/

    https://blog.csdn.net/jamieblue1/article/details/101075193


    作者:Glen.He
    出处:http://www.cnblogs.com/puresoul/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    分而治之应该把握哪些原则呢
    什么事SOA
    SOA架构设计的案例分析课后 学习
    关于分层架构的知识学习
    从小编程,到架构师,我们应该具备什么
    基于MVC架构实例分析以校园知网校内论坛功能为例
    服务架构设计及其应用
    《一线架构师实践指南》阅读笔记03
    《一线架构师实践指南》阅读笔记02
    Pre-Architecture 阶段阅读笔记
  • 原文地址:https://www.cnblogs.com/puresoul/p/15194108.html
Copyright © 2011-2022 走看看