window 系统里 chrome 浏览器一些实用的调试技巧2

简介: window 系统里 chrome 浏览器一些实用的调试技巧

4、开发者工具里 Console


4.1 复制控制台的变量

复制函数不是由 ECMAScript 定义的,而是由 Chrome 提供的。

copy(location)


111930ef7b2d47a38e355d08974cabbf.png


4.2 用表格的形式输出对象数组

Chrome 提供了一个表格函数 table,可以将对象数组制成表格。

let kaimoArr = [
  {
    name: "kaimo666",
    value: 666
  },{
    name: "kaimo777",
    value: 777
  },{
    name: "kaimo888",
    value: 888
  },
];
table(kaimoArr)


16f14be4e62c41cc9199f6499d8ace4e.png


4.3 控制台里 $ 相关的简写命令


需要注意的是:这个 $ 跟 jQuery 的不是一回事,如果页面有引入 jQuery,那么这个 $ 就表示 jQuery。


$():document.querySelector() 的简写,返回第一个和css选择器匹配的元素。

$$():document.querySelectorAll() 的简写,返回一个和css选择器匹配的元素数组。

$0-$4:依次返回五个最近你在元素面板选择过的DOM元素的历史记录,$0 是最新的记录,以此类推。

$_:引用上一次操作的结果,不用每次都复制一遍


08d6c777a2a34896b5c54b4752bef42f.png


'kaimo'.split('')
$_



5、开发者工具里 Elements


5.1 切换样式颜色格式

比如:下面的颜色显示格式是 rgb 的,我们可以按住 shift 点击颜色块进行切换。

0e12d10fe237403ca10742c2ca98daf1.png


切换之后


a3c30f880e324b7687d0e1a72c0b4b54.png


CSS颜色设置(6种方法):

4d4cae86bb454678be5cc7a75eae05ca.png


5.2 存储 DOM 元素到全局临时变量中

比如我要存储 ReactApp 这个 dom 元素,我们可以右键这个元素,找到最下那个 Store as global variable


19e327fb499943869d75feccef13787d.png


选择之后就会出现一个变量,供你使用,比如这里的 temp1 就是该 dom 元素:


e4bb442179b945adbe791ad14b243a7f.png



5.3 一键展开 DOM 下面的所有元素

我们普通展开时只会展开它的子节点,如果我们想全部展开,可以按住 alt 在点击展开即可。

9d4b4202c51d4aab8df15448be5acdae.png


全部展开效果:


554a19b3b090433dadd9974e1e9b3b96.png



目录
相关文章
|
Web App开发 安全 iOS开发
基于PyCharm与Mac系统的Chrome历史记录清理工具开发实战
《基于PyCharm与Mac系统的Chrome历史记录清理工具开发实战》详细解析了如何在macOS下通过Python脚本自动化清理Chrome浏览器的历史记录。文章以`clear_chrome_history.py`为例,结合PyCharm开发环境,深入讲解技术实现。内容涵盖进程检测、文件清理、虚拟环境配置及断点调试技巧,并提供安全增强与跨平台适配建议。该工具不仅保障个人隐私,还适用于自动化运维场景,具备较高实用价值。
574 0
|
人工智能 监控 数据可视化
Agent TARS:一键让AI托管电脑!字节开源PC端多模态AI助手,无缝集成浏览器与系统操作
Agent TARS 是一款开源的多模态AI助手,能够通过视觉解析网页并无缝集成命令行和文件系统,帮助用户高效完成复杂任务。
5529 13
Agent TARS:一键让AI托管电脑!字节开源PC端多模态AI助手,无缝集成浏览器与系统操作
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
1377 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
人工智能 自然语言处理 JavaScript
Agent-E:基于 AutoGen 代理框架构建的 AI 浏览器自动化系统
Agent-E 是一个基于 AutoGen 代理框架构建的智能自动化系统,专注于浏览器内的自动化操作。它能够执行多种复杂任务,如填写表单、搜索和排序电商产品、定位网页内容等,从而提高在线效率,减少重复劳动。本文将详细介绍 Agent-E 的功能、技术原理以及如何运行该系统。
1558 5
Agent-E:基于 AutoGen 代理框架构建的 AI 浏览器自动化系统
|
Web App开发 数据采集 JavaScript
Chrome浏览器实例的TypeScript自动化脚本
Chrome浏览器实例的TypeScript自动化脚本
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
1964 9
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
5553 2
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。
12990 2
|
Web App开发 开发者