chrome控制台小技巧

简介: chrome控制台小技巧

跟孩子的一颗真挚的心接触,使它暂时忘掉了生活中难以摆脱的困境。——泰戈尔

我们打开chrome控制台检查元素(快捷键ctrl+shift+c

当我们选中一个元素的时候,此处显示== $0

我们点击控制台,输入$0回车

发现$0就是我们刚刚选中的这个元素

例如此处我需要dromara的这个表格里的项目清单转换为vdoing的卡片格式,选到对应的tbody标签,执行:

let list = []
$0.childNodes.forEach(i=>i.children?.[0] && list.push(
   [["- name: " + i.children?.[0]?.children?.[0].innerText],
    ["  desc: " + i.children?.[3]?.innerText]],
   ["  link: " + decodeURIComponent(i.children?.[0]?.children?.[0].href.replace("https://gitee.com/link?target=",""))]
))

我们复制下面的输出结果

- name: stream-query
  desc: 允许完全摆脱Mapper的mybatis-plus体验!
  link: https://dromara.gitee.io/stream-query/
- name: J2EEFAST
  desc: J2eeFAST 是一个 Java EE 企业级快速开发平台。
  link: https://www.j2eefast.com/
- name: data-compare
  desc: 数据库比对工具: hive 表数据比对,mysql、Doris 数据比对。
  link: https://github.com/dromara/dataCompare
- name: payment-spring-boot
  desc: 最全最好用的微信支付V3 Spring Boot 组件。
  link: https://felord.gitee.io/payment-spring-boot/
- name: zyplayer-doc
  desc: 一款适合团队和个人私有化部署使用的知识库、笔记、WIKI文档管理工具。
  link: http://doc.zyplayer.com/
- name: ChatGPT
  desc: 支持ChatGPT在JetBrains系列IDE上运行的一款插件。
  link: https://chatgpt.cn.obiscr.com/
- name: Neutrino-Proxy
  desc: 一个基于netty的、开源的java内网穿透项目。
  link: https://gitee.com/dromara/neutrino-proxy
- name: EasyTrans
  desc: 一个注解搞定数据翻译,减少30%SQL代码量。
  link: http://easy-trans.fhs-opensource.top/
- name: open-capacity-platform
  desc: 基于Spring Cloud的企业级微服务框架。
  link: https://dromara.org
- name: electron-egg
  desc: 一个入门简单、跨平台、企业级桌面软件开发框架。
  link: https://www.yuque.com/u34495/mivcfg
- name: RedisFront
  desc: 一款开源免费的跨平台 Redis 桌面客户端工具
  link: https://www.redisfront.com/
- name: lamp-cloud
  desc: 基于Jdk11 + SpringCloud + SpringBoot 的微服务快速开发平台,其中的可配置的SaaS功能尤其闪耀
  link: https://tangyh.top
- name: go-view
  desc: GoView 是一个高效的拖拽式低代码数据可视化开发平台。
  link: https://www.mtruning.club/#/
- name: dante-cloud
  desc: 企业级技术中台微服务架构与服务能力开发平台
  link: https://www.herodotus.cn
- name: x-easypdf
  desc: 一个用搭积木的方式构建pdf的框架(基于pdfbox)
  link: http://www.x-easypdf.cn/
- name: gobrs-async
  desc: 一款功能强大、配置灵活、带有全链路异常回调、内存优化、异常状态管理于一身的高性能异步编排框架
  link: https://async.sizegang.cn
- name: mendmix
  desc: java企业级应用开发套件,定位是一站式分布式开发架构开源解决方案及云原生架构技术底座
  link: https://www.jeesuite.com
- name: dynamic-tp
  desc: 轻量级,基于配置中心实现对运行中线程池参数的动态修改,以及实时监控线程池
  link: https://dynamictp.cn
- name: easy-es
  desc: 一款简化ElasticSearch搜索引擎操作的开源框架,简化CRUD操作,可以更好的帮助开发者减轻开发负担。
  link: https://easy-es.cn
- name: hertzbeat
  desc: 一个拥有强大自定义监控能力,无需Agent的实时监控系统。
  link: https://hertzbeat.com
- name: open-giteye-api
  desc: 专为开源作者设计的数据图表服务工具类站点,提供了包括Star趋势图、贡献者列表、Gitee指数等数据图表服务。
  link: https
相关文章
|
4月前
|
Web App开发 开发者
利用chrome控制台调试post请求
利用chrome控制台调试post请求
109 0
|
4月前
|
Web App开发
chrome 浏览器在 112 正式版本以及 114 canary 版本从 devtools 控制台复制文本不会复制高亮显示的文本?
chrome 浏览器在 112 正式版本以及 114 canary 版本从 devtools 控制台复制文本不会复制高亮显示的文本?
51 0
|
7月前
|
Web App开发
Chrome谷歌浏览器F12打开控制台报错
Chrome谷歌浏览器F12打开控制台报错
246 0
|
7月前
|
Web App开发 JavaScript
Chrome浏览器控制台Unchecked runtime.lastError: The message port closed before a response was received.解决
大家好,今天和大家分享一报错的解决方法 在使用vue开发时使用Chrome运行的时候出现了一个报错,当时什么都没有写就报错了,就找了一下这个问题,后来发现是因为迅雷拓展的问题,下面就一起来看看如何解决这个问题。
|
Web App开发 JavaScript
Chrome控制台引入js库jQuery为例
Chrome控制台引入js库jQuery为例
388 0
|
Web App开发 数据采集 前端开发
分享一个Chrome控制台数据获取的例子
讲了一下获取Chrome控制台数据的前因后果
|
Web App开发 JavaScript
chrome 技术篇-控制台切换框架,切换dom操作区
chrome 技术篇-控制台切换框架,切换dom操作区
158 0
chrome 技术篇-控制台切换框架,切换dom操作区
|
Web App开发 前端开发 JavaScript
Chrome 技术篇-console控制台检测xpath、css唯一性
Chrome 技术篇-console控制台检测xpath、css唯一性
215 0
Chrome 技术篇-console控制台检测xpath、css唯一性
|
Web App开发
Ajax-02:Chrome网络控制台查看通信报文
Ajax-02:Chrome网络控制台查看通信报文
176 0
Ajax-02:Chrome网络控制台查看通信报文
|
1月前
|
Web App开发 前端开发 搜索推荐
Chrome 浏览器中的一个隐藏设置页面
Chrome 浏览器中的一个隐藏设置页面
61 8

热门文章

最新文章

相关产品

  • 云迁移中心