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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 代码保护(一) 几款加壳工具[通俗易懂]

    代码保护(一) 几款加壳工具[通俗易懂]DRMsoftEncryptEXE(有激活成功教程版)加密模式:非绑定模式—-加密后的文件不绑定用户电脑,但用户需要一个开启密码才可以打开绑定模式—-一机一码授权,加密后的文件不同用户电脑需要不同的开启密码无密码模式—-加密后的文件无需要开启密码即可运行,仅对原始文件做加密保护一码通模式—-采用相同秘钥和产品编号加密的不同文件,在同台电脑上只需认证一次特点:可以设置加密…

    2022年6月27日
    71
  • 使用 tar 压缩和解压缩的常用参数

    使用 tar 压缩和解压缩的常用参数tar常用参数:-A新增文件到已压缩文件中-c新建新压缩文件-r将新文件添加到已压缩文件的末尾-x解压缩文件-k保留原压缩文件-f待压缩或待解压缩文件-jbzip2格式-zgzip格式-v显示过程 常用解压缩:tar-xzvffile.gztar-xjvffile.bz2常用压缩:tar-czvfarchi…

    2022年5月25日
    41
  • 一图解密AlphaZero(附Pytorch实践)

    一图解密AlphaZero(附Pytorch实践)知乎专栏同步发布: https://zhuanlan.zhihu.com/p/41133862本来打算自己写写的,但是发现了DavidFoster的神作,看了就懂了。我也就不说啥了。看不清的话,原图在后面的连接也可以找到。没懂?!!!那我再解释下。 AlphaGoZero主要由三个部分组成:自我博弈(self-play),训练和评估。和AlphaGo比较,AlphaZ…

    2022年6月25日
    54
  • vscode怎样新建项目和文件

    vscode怎样新建项目和文件vscode跟其他编辑器不太一样,今天咪咪我就来给大家分享一下vscode新建项目和文件的方法。需要用品:电脑vscode01、首先是新建文件,如果只是单一的文件,可以直接点击欢迎界面的“新建文件”,这样即可得到一个新的文件。02、而如果欢迎界面被你关闭掉了,则可以在文件菜单中来新建一个文件。当然,这两个方法都只是新建单一文件,并不是一个完整的项目哦。03、接着我们开始创建一个项目,首先…

    2022年6月29日
    67
  • 理解ABA问题_什么叫ABA

    理解ABA问题_什么叫ABA理解ABA问题1ABA问题的产生2原子引用AtomicReference3带时间戳的原子引用AtomicStampedReference解决ABA问题1ABA问题的产生所谓ABA问题,就是比较并交换的循环,存在一个时间差,而这个时间差可能带来意想不到的问题。比如线程1和线程2同时也从内存取出A,线程T1将值从A改为B,然后又从B改为A。线程T2看到的最终值还是A,经过与预估值的比较,二者相等,可以更新,此时尽管线程T2的CAS操作成功,但不代表就没有问题。有的需求,比如CAS,只注重头

    2025年6月8日
    3
  • 微信自动回复机器人使用手册怎么设置_自动回复机器人手机版

    微信自动回复机器人使用手册怎么设置_自动回复机器人手机版微信也能自动回复啦?没错,微信自动回复机器人正式上线了!今天勤劳的小编就整理了一份微信自动回复机器人的使用手册,希望对小伙伴们有所帮助。工具米云微信自动回复机器人下载/安装登录www.miyunchuanmei.com网站,下载安装Microsoft.NetFramework4.5,,下载安装米云微信自动回复机器人。登陆微信输入账号和密码,点击“登陆”按钮,即可完成登…

    2022年10月1日
    2

发表回复

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

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