如何用firefox开发者工具查看元素

一、浏览器自带工具查看元素

1、选中元素，右击选择“Inspect Element”查看元素

2、选择更多—web developer—Inspector选择查看器，页面上移动鼠标，选中元素高亮显示

二、使用Firefox插件查看元素匹配的节点个数

如何添加插件（扩展程序）

1、点击Add-ons（或快捷键Ctrl+Shift+A），页面跳转到Add-ons Manager,点击Extensions扩展程序，搜索可以创建xpath的插件

2、搜索结果有三个，建议使用Try XPath，点击Install安装，点击ADD添加扩展程序，成功后右上角显示“TX”符号

3、点击TX图标，选择“XPATH ANY_TYPE”，在Expression输入XPATH，以搜索框为例，标签为input，属性为class，输入//input[@class=‘search-input’]

4、匹配多个节点（ul 标签下a超链接），点击focus高亮显示元素

如何用firefox开发者工具查看元素相关推荐

SAP UI5 应用开发教程之三十八 - 使用 Chrome 开发者工具查看程序执行出错时的上下文信息
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
如何使用微信开发者工具查看Appid以及SECRET
如何使用微信开发者工具查看Appid以及SECRET 步骤如下: (1)找到微信开发者工具顶部右上角的测试号单击. (2)之后来到这个界面. (3)申请测试号申请测试号的过程非常简单.只需访问申请 ...
firefox调试html5程序,用 Firefox 开发者工具调试现代 Web 应用程序
原文作者:Jason Laster,Harald Kirschner 译者:_小生_ (译者注:Jason Laster 是 Firefox 的开发者,文章发表于https://hacks.mozil ...
Chrome 开发者工具审查元素快捷键
打开DEVTOOLS 你可以通过以下任何一种方式来访问DevTools: 打开浏览器右上角的Chrome菜单 ,然后选择"更多工具"–"开发者工具". 在页面任 ...
Firefox开发者工具里查看HTML元素的Box模型
box模型的组成部分: Content box:通过width和height属性指定大小. padding box:衬垫.包裹content盒模型. border box margin box 如下图 ...
利用浏览器开发者工具查看网站登录时的用户名和密码
本文介绍的这种方法对于我们有时候忘记了登陆用户名和密码很有帮助,但是也从侧面透露着我们在其它设备上登录我们自己的社交网站的信息是多么的不安全,换句话说,任何人都可以轻易地获取你的账户信息. 在我们登录 ...
Firefox开发者工具里的CSS Flexbox Inspector
使用flex布局的元素,在HTML里能看到flex的小图标,如下图所示: 点击flex小图标,可以把flex container及其元素的轮廓高亮显示: 在这个例子里,a标签既是一个flex item ...
本月 Firefox 65 将加入 Flexbox Inspector 开发者工具
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> 计划于本月 29 日发布的 Firefox 65 开发者工具中将加入 Flexbox Inspector 功能. ...
如何用微信web开发者工具测试调试并打包上传小程序
厦门四六开科技给大家讲讲如何用微信web开发者工具测试调试并打包上传小程序,其实还是很简单的,这个教程针对小白,大神请直接略过. 一.下载并安装软件(根据自己电脑实际情况选择版本安装) 如何用微信开 ...