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


相关推荐

  • 使用rz与sz 实现服务器与Windows的文件传输

    使用rz与sz 实现服务器与Windows的文件传输

    2021年5月31日
    89
  • windows通过ssh登陆linux服务器(linux 终端快捷键)

    windows通过ssh登陆linux服务器(linux 终端快捷键)window通过ssh连接linux1.window上要安装ssh   下载连接:https://www.mls-software.com/opensshd.html   版本:OpenSSH7.9p1-1   下载好后安装2.linux上启动ssh服务   有些可能没有ssh服务,需要下载安装   2.1检查是否有ssh服务:   判断是否安装ssh服务,可以通过如…

    2022年4月18日
    60
  • 费马小定理和费马大定理_费马小定理推论

    费马小定理和费马大定理_费马小定理推论(1)费马小定理结论:结论是若存在整数a,p且gcd(a,p)=1,即二者互为质数,则有a(p-1)≡1(modp)。(这里的≡指的是恒等于,a(p-1)≡1(modp)是指a的p-1次幂取模与1取模恒等),再进一步就是ap≡a(modp)。继续学习:中国剩余定理、拓展欧几里得(exgcd)、求除法逆元、费马小定理(2)费马大定理结论:又被称为“费马最后的定理”,常见的表述为当整数n>2时,关于xn+yn=zn的方程没有正整数解。当n=0时,实数范围只有x=0,y

    2025年8月1日
    4
  • ping traceroute原理

    ping traceroute原理ping命令工作原理ping命令主要是用于检测网络的连通性。Ping命令发送一个ICMP请求报文给目的IP,然后目的IP回复一个ICMP报文。原理:网络上的机器都有唯一确定的IP地址,我们给目标IP地址发送一个数据包,对方就要返回一个同样大小的数据包,根据返回的数据包我们可以确定目标主机的存在,可以初步判断目标主机的操作系统等。因为ping命令是使用ICMP协议,…

    2022年7月21日
    12
  • 什么是CSV文件以及如何打开CSV文件格式

    什么是CSV文件以及如何打开CSV文件格式Whatisa.csvfile?CSVstandsforCommaSeparatedValues.ACSVfileisaplaintextfilethatstorestablesandspreadsheetinformation.Thecontentsareoftenatableoftext,numbers,ordates.C…

    2022年7月21日
    13
  • Android面试题集(2020)

    Android面试题集(2020)Android面试题模板前言目录总结前言秋招在即,计蒙在国庆期间为粉丝整理了一套Android初级面试题集如需获取pdf版本,可于公众号:《计蒙不吃鱼》进行下载目录1.Android面试题之Activity篇2.Android面试题之Service篇3.Android面试题之BroadcastReceiver篇4.Android面试题之ContentProvider篇5.Activity面试题之Intent篇6.Android面试题之Listview篇7.Android面试题之Fr

    2022年5月12日
    42

发表回复

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

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