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面板

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Python 连接数据库两种方式

    Python 连接数据库两种方式Python连接数据库两种方式

  • 兴文石海旅游策划方案——石来运转天下览![通俗易懂]

    兴文石海旅游策划方案——石来运转天下览![通俗易懂]兴文石海旅游策划方案——石来运转天下览!熊大寻旅游策划公司/文熊大寻旅游策划公司为兴文石海天坑发现了震撼性奇观:石壁上一个天然的大大的“运”字,立即创意出“石来运转”的卖点,改变原来看一眼就走的局面,变成人人都要下到天坑里围着“运”字走一圈“转运”,这样一来三小时就花掉了,再到大运观音处烧柱香,三百元也花掉了!加上把天坑打造成”世界最大的天然聚宝盆”夜景工程,过夜经济就形成了!把原来看天坑抓眼…

  • android学习笔记之ImageView的scaleType属性

    android学习笔记之ImageView的scaleType属性我们知道,ImageView有一个属性叫做scaleType,它的取值一共有八种,分别是:matrix,fitXY,fitStart,fitCenter,fitEnd,center,centerCrop,centerInside。那我们下面一起来看看这八种取值分别代表什么意思。我用两张图片来做demo,这两张图片的分辨率一大一小,图片分别叫做big和small。原图如下:big:small:OK,

  • Git教程 Git Bash详细教程「建议收藏」

    Git教程 Git Bash详细教程「建议收藏」  作为一个萌新,我翻遍了网上的GitBash教程,可能因为我理解力比较差,经常看不懂教程上在说什么。(。-`ω´-)所以我决定自己一边摸索一边记录,写教程造福那些理解力跟我一样差的人……第一篇教程会涉及如下内容(按照一般人的使用流程):下载、登录GitBash如何在GitBash中进入或者退出文件夹如何建立本地仓库配置SSHkey如何建立本地仓库和远程仓库的连接…

  • Spring Boot 打的包为什么能直接运行?

    Spring Boot 提供了一个插件 spring-boot-maven-plugin 用于把程序打包成一个可执行的jar包。 在pom文件里加入这个插件即可: <buil…

  • 《Android应用开发揭秘》连载1[通俗易懂]

    《Android应用开发揭秘》连载1[通俗易懂]《Android应用开发揭秘》  书名:Android应用开发揭秘作者:杨丰盛出版社:机械工业出版社ISBN:9787111291954出版日期:2010年3月(1版2次)开本:16页码:515版次:1-2定价:69元豆瓣网讨论地址:http://www.douban.com/subject/4200822/China-pub预订地址:http://www.china-pu

发表回复

您的电子邮箱地址不会被公开。

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