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



目录
相关文章
|
2月前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
100 0
|
5天前
|
Shell
5.Electron之shell(使用系统默认浏览器打开网页)
5.Electron之shell(使用系统默认浏览器打开网页)
26 1
|
2天前
|
Web App开发 前端开发 JavaScript
Chrome 浏览器中执行 JavaScript
Chrome 浏览器中执行 JavaScript
11 0
|
5天前
|
Web App开发 移动开发 前端开发
CSS3 三大特性+Chrome 调试代码技巧
CSS3 三大特性+Chrome 调试代码技巧
|
13天前
|
Web App开发 JSON 前端开发
网络调试利器:Chrome Network工具的详细指南
Chrome开发者工具的Network面板是测试工程师的利器,用于监视HTTP请求、响应及资源加载。打开它可通过右键点击页面选择“检查”或使用快捷键。界面包含请求列表和详细信息,如Headers、Preview、Response、Timing。过滤器帮助定位特定请求,而瀑布流图展示加载顺序。模拟网络环境和保存HAR文件功能便于性能分析和问题排查。
21 0
|
2月前
|
Web App开发 监控 异构计算
发掘 Chrome 的实用命令:提升你的浏览器使用体验
探索 Chrome 隐藏功能:使用命令增强浏览器体验。查看所有命令`chrome://about`,快速退出/重启`chrome://quit`或`chrome://restart`,网页翻译`chrome://translate-internals/`,查看版本`chrome://version`,扩展程序界面`chrome://extensions`,监控GPU状态`chrome://gpu/`。利用启动参数如`--incognito`,`--disable-extensions`,`--headless`实现无痕、禁用扩展或无GUI模式。提升浏览器使用效率,发掘更多可能性。
38 4
|
2月前
|
Web App开发 缓存 搜索推荐
实用的Chrome浏览器命令
【5月更文挑战第6天】探索Chrome的隐藏命令行工具,提升浏览效率和解决问题。如`chrome://flags/`启用实验性功能,`chrome://net-internals/`进行网络诊断,`chrome://settings/content/`管理内容设置等。了解这些工具,可解决浏览器问题,优化隐私和性能,实现个性化设置。成为Chrome专家,让浏览体验更上一层楼。
125 0
|
2月前
|
Web App开发 Linux 开发者
实用的Chrome浏览器命令
实用的Chrome浏览器命令
|
2月前
|
Web App开发 JavaScript 前端开发
【专栏】如何使用 Chrome DevTools 的断点功能提升前端调试效率, 花式打断点
【4月更文挑战第29天】本文介绍了如何使用 Chrome DevTools 的断点功能提升前端调试效率。从基本的行断点和函数断点,到更高级的条件断点、DOM 断点、XHR 断点和事件断点,以及代码注入断点,详细阐述了各种断点的设置和应用场景。通过断点调试实战案例,如异步操作、复杂逻辑和性能优化,展示断点在解决实际问题中的重要作用。掌握这些技巧能有效提高开发质量和效率。
|
2月前
|
运维 安全 定位技术
云HIS系统采用B/S架构云端SaaS服务的方式提供,使用用户通过浏览器即能访问
云HIS系统采用B/S架构云端SaaS服务的方式提供,使用用户通过浏览器即能访问
55 2