一、如何使用开发者工具，操作步骤与火狐浏览器一致（此处不重复叙述，此处主要描述如何查找元素是否存在以及元素在页面中是否重复）。

1、打开开发者选项，然后按“ctrl+f”，会出现一个输入框在输入框中输入需要查找的元素

2、在输入框中输入//input[@id='name']后自动匹配查找到的元素并高亮显示

二、获取默认xpath或CSS技巧，我们可以通过修改默认获取到的xpath来进行元素定位（火狐浏览器也可以进行此操作）

1、首先找到需要定位的输入框，点击鼠标右击，选择“检查”

2、在定位到的html代码上右击鼠标，选择“copy”----》选择“copy xpath”，然后就可以获取到默认的xpath

获取结果为：（一般比较复杂的xpath获取后需要自己修改才能使用）

//*[@id="name"]

获取css：copy ---》css selector

#name

3、如果需要通过默认获取的xpath在控制台中验证是否查找到这个元素，需要进行修改，否则就会报错

需要把//*[@id="name"]改为//*[@id=‘’name‘’]（“双引号”改成“单引号”）才能使用（因为在Java中“双引号”代表字符串，如果“双引号”中还需要有引号的话就需要使用“单引号”）

章节八、3-如何用Chrome开发者工具查看元素的更多相关文章

  1. HTTP入门（二）：用Chrome开发者工具查看 HTTP 请求与响应

    HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应 本文简单总结HTTP的请求与响应. 本文主要目的是对学习内容进行总结以及方便日后查阅. 详细教程和原理可以参考HTTP文档(MD ...

  2. 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试

    转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...

  3. 爬虫必备工具-chrome 开发者工具

    在某个网站上,分析和抓取数据,我们用的最多的工具就是 Chrome 开发者工具 01 元素面板 通过元素(Element)面板,我们能查看发哦想抓取页面渲染内容所在的标签.使用什么 CSS 属性(例如 ...

  4. Chrome开发者工具不完全指南（六、插件篇）

    本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件.在chrome商店里面有很多插件,没事建议大家去逛逛.不过需要FQ,所以诸位请自备神器.一.皮肤插件 首先是大家期盼已久,翘首以 ...

  5. Google Chrome开发者工具-移动仿真：触摸事件仿真

    如果你在开发PAD/手机所用WEB版应用,需要在桌面审查页面元素.调试脚本,模拟移动设备尺寸.事件.位置等信息, 那么可以使用Chrome开发者工具(DevTools)提供的强大的移动仿真功能,支持主 ...

  6. Chrome开发者工具不完全指南：（三、性能篇）

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  7. Chrome开发者工具不完全指南（四、性能进阶篇）

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

  8. Chrome开发者工具不完全指南（五、移动篇）

    前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...

  9. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

随机推荐

  1. 加密原理介绍，代码实现DES、AES、RSA、Base64、MD5

    阅读目录 github下载地址 一.DES对称加密 二.AES对称加密 三.RSA非对称加密 四.实际使用 五.关于Padding 关于电脑终端Openssl加密解密命令 关于网络安全的数据加密部分, ...

  2. C++11 左值、右值、右值引用

    左值.右值 在C++11中所有的值必属于左值.右值两者之一,右值又可以细分为纯右值.将亡值.在C++11中可以取地址的.有名字的就是左值,反之,不能取地址的.没有名字的就是右值(将亡值或纯右值).举个 ...

  3. ruby klb.rb irb

    1.字符串格式化 Python "%s=%s" % (k, v) 在阅读 Python 字符串格式化的时候,视线先看到字符串的 %s 字样,但是不知道这指的是什么,然后看后面的变量 ...

  4. 如何使用RedisTemplate访问Redis数据结构

    RedisTemplate介绍 spring封装了RedisTemplate对象来进行对redis的各种操作,它支持所有的 redis 原生的api. RedisTemplate在spring代码中的 ...

  5. FutureTask理解

    一.概述 FutureTask包装器是一种非常便利的机制,同时实现了Future和Runnable接口. 类图如下: FutureTask是一种可以取消的异步的计算任务.它的计算是通过Callable ...

  6. SSM-SpringMVC-13：SpringMVC中XmlViewResolver视图解析器

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 还记得上篇博客提出来的问题吗? BeanNameViewResolver视图解析器每使用一道视图,就得手工配 ...

  7. TensorFlow练习13: 制作一个简单的聊天机器人

    现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...

  8. jQuery学习之旅 Item6 好用的each()

    1.javascript 函数的调用方式 首先来研究一下jquery的each()方法的源码,在这之前,先要回顾一下javascript函数具体调用样式: 普通函数调用 setName(); 可以作为 ...

  9. java之集合Collection详解之3

    package cn.itcast_03; public class Student { // 成员变量 private String name; private int age; // 构造方法 p ...

  10. leetcode 26 80 删除已排序数组中重复的数据

    80. Remove Duplicates from Sorted Array II Follow up for "Remove Duplicates":What if dupli ...