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


相关推荐

  • 【Custom Mutator Fuzz】libprotobuf-mutator安装

    【Custom Mutator Fuzz】libprotobuf-mutator安装在之前的文章中,主要使用AFL、AFL++和libfuzzer此类fuzzer进行模糊测试实验,结构化输入的时候依靠字节的变异可能会破坏输入数据整体的结构,那么就需要使用protobuf协助构建结构化输入

    2022年9月13日
    0
  • 视频直播技术大全、直播架构、技术原理和实现思路方案整理

    视频直播技术大全、直播架构、技术原理和实现思路方案整理本文包括原理篇/思路篇/实践篇/方案篇/前端篇/总结直播难:个人认为要想把直播从零开始做出来,绝对是牛逼中的牛逼,大牛中的大牛,因为直播中运用到的技术难点非常之多,视频/音频处理,图形处理,视频/音频压缩,CDN分发,即时通讯等技术,每一个技术都够你学几年的。直播易:已经有各个领域的大牛,封装好了许多牛逼的框架,我们只需要用别人写好的框架,就能快速的搭建一个直播app,也就是传说中的站在大牛肩膀上编程。

    2022年7月24日
    10
  • 自学编程的8个坑,你踩了几个?第七个坑87%都踩过!

    自学编程的8个坑,你踩了几个?第七个坑87%都踩过!避免这8个坑,你的学习效率会得到很大的提高

    2022年7月24日
    7
  • 医学图像处理最全综述「建议收藏」

    目录0、引言1、病变检测2、图像分割基于深度学习的医学图像分割与检测3、图像配准图像配准的定义4、图像融合5、预测与挑战6、结论参考文献0、引言医学图像处理的对象是各种不同成像机理的医学影像,临床广泛使用的医学成像种类主要有X-射线成像(X-CT)、核磁共振成像(MRI)、核医学成像(NMI)、超声波成像(UI)四类。在目前的影像医疗诊断中,主要是通过观察一组二维切片图象去发现病变体,这往往需要借助医生的经验来判定。利用计算机图像处理技术对二维切片图象进行.

    2022年4月7日
    198
  • socketpair原理_socket负载均衡

    socketpair原理_socket负载均衡描述先看下传统的CS模型,如下:总是一方发起请求,等待另一方回应。当一次传输完成之后,client端发起新的请求之后,server端才作出回应。那如何才能做到双向通信? 一种解决办法就是client端即使client,又是server,server端即使client也是server,如下:但是上述方面比较复杂,这时候就引入要分析的socketpair了。

    2022年10月14日
    0
  • C语言 数组初始化的三种常用方法({0}, memset, for循环赋值)以及原理「建议收藏」

    C语言 数组初始化的三种常用方法({0}, memset, for循环赋值)以及原理「建议收藏」C语言中,数组初始化的方式主要有三种:1、声明时,使用{0}初始化;2、使用memset;3、用for循环赋值。那么,这三种方法的原理以及效率如何呢?请看下面的测试代码:[cpp]viewplaincopy#defineARRAY_SIZE_MAX(1*1024*1024)voidfunction1(){chararray[ARRAY_SIZE_…

    2022年7月18日
    15

发表回复

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

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