Chrome Devtool 学习

Chrome Devtool 学习虽然devtool一直在用,可是平时使用的也就那几个功能,为了能够深入前端开发的基础,还是要详细的看一下devtool都有哪些功能。

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

虽然devtool一直在用,可是平时使用的也就那几个功能,最近看了一遍谷歌官方的DevTool文档。主要记录一些平时没怎么用过的地方。

断点调试js

断点类型 使用目的
Line-of-code 在精确的某一行
Condition line-of-code 在某一行,但是只有特定情况下才触发
DOM 在特定DOM节点或者他的子节点改变时触发
XHR when an XHR URL contains a string pattern
事件监听
异常 当代码抛出异常时触发
函数 特定函数被调用时

source 面板

  • 在source面板中可以编辑CSS和JS文件,CSS文件在编辑后立即生效,JS文件需要按下Control+S之后生效。值得注意的是应用JS的更改时,不是重新加载整个JS,而是只重新加载变化的函数

无障碍功能

审计(audit)一个页面的无障碍功能

console 面板

Command Line API
$_

$_返回最近计算的表达式的值

$0-$4

$0、$1、$2、$3 和 $4 命令用作在 Elements 面板中检查的最后五个 DOM 元素或在 Profiles 面板中选择的最后五个 JavaScript 堆对象的历史参考

$(selector)

$(selector) 返回带有指定的 CSS 选择器的第一个 DOM 元素的引用。此函数等同于 document.querySelector() 函数。

如果使用了第三方库,比如jQuery,则此功能将会被覆盖。

$$(selector)

$$(selector) 返回与给定 CSS 选择器匹配的元素数组。此命令等同于调用 document.querySelectorAll()。

$x(path)

$x(path) 返回一个与给定 XPath 表达式匹配的 DOM 元素数组

table(data[, columns])

通过传入含可选列标题的数据对象记录具有表格格式的对象数据。例如,要在控制台中显示使用 table 的名称列表,需要执行:

var names = { 
   
	0: { 
    firstName: "John", lastName: "Smith" },
	1: { 
    firstName: "Jane", lastName: "Doe" }
};
table(names);

在这里插入图片描述

performance面板

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/188459.html原文链接:https://javaforall.net

(0)
上一篇 2026年4月16日 下午3:58
下一篇 2026年4月16日 下午4:04


相关推荐

  • TextField的高宽autosize[通俗易懂]

    TextField的高宽autosize[通俗易懂]vart_name:TextField=newTextField;trace(t_name.height);trace(t_name.width);这样打印出来的高度都是100PX,是系统默认的。如果不设置可能会让父容器宽高变大,遮挡住别的窗口的鼠标事件。可以简单地使用tf.autoSize=TextFieldAutoSize.LEFT;来解决这样宽高就会根据文本内容大小来…

    2022年5月15日
    42
  • 透明色Opacity属性的使用

    透明色Opacity属性的使用Opacity属性:值 描述 value 指定不透明度。从0.0(完全透明)到1.0(完全不透明) inherit Opacity属性的值应该从父元素继承 代码:<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><title>Title</title><style>i

    2022年5月26日
    47
  • JodaTime时间处理工具使用详解

    JodaTime时间处理工具使用详解工作中经常用到java日期类型Date、Calendar或SimpleDateFormat,但是这些日期工具类要么提供了过期的方法(Date),要么就是功能不够强大。最近突然用到了Joda-Time日期工具,发现非常好用,就撰写此文,以便学习和交流。

    2022年6月17日
    30
  • Linux进程间通信——使用共享内存

    Linux进程间通信——使用共享内存下面将讲解进程间通信的另一种方式,使用共享内存。一、什么是共享内存顾名思义,共享内存就是允许两个不相关的进程访问同一个逻辑内存。共享内存是在两个正在运行的进程之间共享和传递数据的一种非常有效的方式。不同进程之间共享的内存通常安排为同一段物理内存。进程可以将同一段共享内存连接到它们自己的地址空间中,所有进程都可以访问共享内存中的地址,就好像它们是由用C语言函数malloc分配的内存一

    2025年8月21日
    4
  • [译] android应用开发者,你们真的了解Fragment的生命周期吗?

    [译] android应用开发者,你们真的了解Fragment的生命周期吗?

    2021年6月5日
    141
  • redis有效时间设置及时间过期处理_查看redis状态

    redis有效时间设置及时间过期处理_查看redis状态redis是在内存中进行缓存的,我们在设置redis缓存时,可以设置下过期时间。那么在设置时间到期后redis是如何进行数据删除的。redis清理过期数据。定期清理+惰性清理定期删除:redis数据库默认每隔100ms就会进行随机抽取一些设置过期时间的key进行检测,过期则删除。惰性删除:定期删除还没有来得及删除,就被程序请求到的一个过期key,redis会先检测key是否,过期,如果过期则删…

    2026年4月14日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号