Chrome如何查看网页元素以及子元素的个数？

最新推荐文章于 2024-05-17 10:53:02 发布
最新推荐文章于 2024-05-17 10:53:02 发布
阅读量1.9k 收藏 1
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lewis_zhou/article/details/127947742
版权

某些网页中，存在如下图的数据列表，但是没有行号，那么如何快速精准的知道这种无序号的行的总数呢？（用眼睛一行一行数的请略过）
![在劣币插入图片描述](https://img-blog.csdnimg.cn/无序号列表
ng)
按F12或者“Ctrl+Shift+I”打开开发者工具

1、找到“Elements”，使用箭头选中整个表格区域，找到表格的父元素div，如图所示别名为$0
在这里插入图片描述
2、在“Console”中输入元素的别称$0然后再输入.后会自动加载出来元素的所有属性，我们只需要统计行数，所以选择chidlNodes整个即可，显示21个。

控制台输入
在这里插入图片描述

lewis_zhou
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Chrome_SPY 谷歌浏览器网页元素分析工具
12-23
Chrome_SPY 谷歌浏览器网页元素分析工具 Chrome_激活标签 (当前标签) 网页.跳转 (“www.baidu.com”) 程序__等待 (1000) 网页.取元素坐标 (“input”, “id=kw丨name=wd”, 0, 元素坐标) 提示 (“元素坐标 [” ＋ 到文本 (元素坐标.X) ＋ “,” ＋ 到文本 (元素坐标.Y) ＋ “]”) 网页.文本模拟输入_Ex (“input”, “id=kw丨name=wd”, 0, 到文本 (取现行时间 ())) 提示 (“元素value ” ＋ 网页.取元素属性 (“input”, “id=kw丨name=wd”, 0, “value”)) 网页.模拟点击元素 (“input”, “id=su”, 0) 网页.取元素坐标 (“input”, “id=kw丨name=wd”, 0, 元素坐标) 提示 (“元素坐标 [” ＋ 到文本 (元素坐标.X) ＋ “,” ＋ 到文本 (元素坐标.Y) ＋ “]”) 程序__等待 (2000) 网页.移动点击元素 (“a”, “>知道<”, 0, 20, 20)
谷歌浏览器网页元素分析工具+Chrome_SPY+元素捕获+PRA
05-31
开发者可以通过这些工具来调试网页，查看页面加载性能，以及实时预览页面更改。 3. **Chrome_SPY**：根据描述，这可能是一个扩展或工具，用于更深入地分析Chrome浏览器中的网页元素。可能包含的功能有抓取页面数据...
如何查找当前网页的元素和元素数量
amber_o0k的博客
03-22 1054
查找当前网页的元素和元素数量，想了一个分析一下各主流网站的首页标签构成与网站内容关系的小项目，顺带学习一下数据分析处理工具以及数据可视化的相关工具的使用。 //count elements in html tags=document.all var array=new Array() for(i=0;i<tags.length;i++){ if(array[tags[i]....
Chrome DevTools 使用指南-元素审查篇
最新发布
守城小轩的技术窝棚
05-17 964
包括搜索栏、选择工具和筛选器，帮助开发者快速找到特定的元素或样式规则，进行高效的调试工作。
谷歌浏览器查看web元素绑定的事件及源码位置
蓝枫秋千的踩坑记录
01-17 1906
F12进入调试控制台 找到对应的元素并处于选中状态 在控制台右边选择时间监听的选项卡(Event Listen) 展开来的就是对应的事件了 比如说点击进入这个时间对应的代码位置 就进入到了源码和项目代码的界面 代码中标红的是定位到的函数位置 右键点击函数名,选择在侧边栏显示位置 然后就会显示到你项目的位置(很有可能是在node_modules中,所以使用编...
怎样获取页面的DOM节点数量
甘焕的博客
04-11 9324
诊断内存泄漏的一个重要步骤是判断页面的DOM数量的增长情况，因此我们需要持续获取页面的DOM数量，方法如下：// 递归函数 function countNodes(node) { // 计算自身 var count = 1; // 判断是否存在子节点 if(node.hasChildNodes()) { // 获取子节点 var
查询网页中DOM元素的总数量
laijieyao的专栏
01-13 6040
查询DOM总数量，方便快捷
Chrome DevTools之Elements
Annie的博客
10-03 940
DevTools中的调试面板有很多，将在后面的文章中分别进行介绍，本篇重点介绍Elements-元素面板
Chrome开发者工具-Elements
qq_46469137的博客
10-27 1405
概述 Chrome开发者工具，简称DevTools，内嵌于Google Chrome浏览器中，是一组网页制作和调试工具。用Chrome打开一个web应用，在任意位置右键点击"检查"即可访问DevTools。 Ctrl + Shift + I 打开DevTools Ctrl + Shift + J 打开DevTools中的控制台 Ctrl + Shift + C 打开DevTools的审查元素模式 Mac对应的快捷键可查看https://leeon.gitbooks.io/devtools/content
查看网页元素的xpath
06-29
本篇文章将详细探讨如何查看网页元素的 XPath，并介绍其相关知识点。 首先，XPath 的基本概念： 1. **节点**：在 XML 或 HTML 文档中，节点可以是元素（如 `<div>`）、属性（如 `class="example"`）、文本（如 ...
Chrome和Firefox插件可快速删除网页上的元素
08-10
标题中的“Chrome和Firefox插件可快速删除网页上的元素”是指一种利用浏览器扩展来实现的网页自定义功能，用户可以通过安装特定的插件在浏览网页时去除不想要的元素，如广告、弹窗或者任何干扰视线的内容。...
Chrome网页浏览器windows64位114版
04-30
Chrome是一款由Google公司开发的网页浏览器。该浏览器基于其他开源软件（如WebKit）撰写，目标是提升稳定性、速度和安全。Google Chrome 是一款快速、易用且安全的网络浏览器。此版 Chrome 是专为windows10 64位设计...
写前端如何轻松获取element
Blue___Ocean的专栏
04-24 273
3. 点击Copy selector 就可以得到它的具体位置了，比如，其它的功能也可以试试 Good Luck!背景：写html的时候有时候想获取一个元素，但是它没有ID，这个时候怎么拿呢？1.鼠标移到你想选的元素附件右击，点击Inspect。我用的Chrome浏览器，不同浏览器可能有细微差别。2.移到你想要的元素上右击，点Copy。
chrome开发小技巧（持续完善中，，，）
weixin_40542544的博客
04-15 240
一、在源代码中搜索 在整个工程中，查找源代码 操作如下： 1、F12打开你的Chrome调试器 2、按下Ctrl+Shift+F（Mac上Cmd+Opt+F）; 3、在输入框中输入你想查询的源代码，回车，就OK啦。 二、跳到制定行 当你在Chrome调试器的sources栏，已经打开了文件，Chrome也允许你跳到指定的行数，在Windows和Linux系统下，只需按下Ctrl+G（Mac上Cmd...
chrome 控制台获取元素上绑定的事件信息以及监控事件
weixin_42689772的博客
11-30 2241
js事件调试查看
如何检查网站元素？
桜丸子的博客
05-15 2267
要查看网站由哪些不同元素组成，或者是测量网页里各元素的尺寸，您可以使用浏览器的元素检查工具。每个浏览器启动检查工具的流程不太相同，接下来我们逐一看看Chrome、火狐、Opera、IE浏览器的操作方法。 原文出自LOYSEO：https://loyseo.com/how-to-inspect-website-elements/ Chrome浏览器 只需右键单击网站的任何区域，在右键菜单里选择检查/Inspect即可打开，你也可以使用键盘快捷键：Ctrl+Shift+I。 如果要查看网页里包含的错误情况，可
谷歌Chrome浏览器内-如何查看元素的XPATH
热门推荐
qq_412568106的博客
01-16 1万+
1.打开URL 2.F12打开开发者工具 3.查看元素Element 4.在URL的页面选中某一元素，在F12的开发工具内，点击对应元素的右键 5.copy—>xpath 6.即可取到某元素的xpath
如何通过谷歌浏览器查看元素
07-01 863
右键 有惊喜。 转载于:https://www.cnblogs.com/MyFlora/p/3165105.html
查看网页所有元素
丹丹老师的小菜园子
07-28 2390
在浏览器F12,在控制台输入 [].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1 修改为ES6版  [...$$("*")].forEach(v=>v.style.outline=`1px solid #${(Math.random()*0xffffff 效果如
python 怎么使用selenium获取子元素的个数
05-12
你可以使用 `find_elements_by` 方法获取父元素下的所有子元素，然后使用 `len()` 函数获取子元素的个数。示例如下： ```python from selenium import webdriver # 创建 WebDriver 对象 driver = webdriver.Chrome() # 打开网页 driver.get('http://example.com') # 获取父元素 parent_element = driver.find_element_by_css_selector('#parent') # 获取子元素的个数 child_count = len(parent_element.find_elements_by_css_selector('.child')) print(child_count) # 输出子元素的个数 ``` 在上面的代码中，我们首先通过 `find_element_by_css_selector()` 方法获取父元素，然后使用 `find_elements_by_css_selector()` 方法获取所有子元素，最后使用 `len()` 函数获取子元素的个数并输出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值