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


相关推荐

  • ActiveMQ详细入门教程系列(一)

    ActiveMQ详细入门教程系列(一)

    2020年11月20日
    271
  • ActiveX 部件不能创建对象: ‘scripting.FileSystemObject’

    ActiveX 部件不能创建对象: ‘scripting.FileSystemObject’解决方法:1.首先,是不是从来都是这种情况,如果只是偶尔的,一会儿是,一会儿不是,问题就不好办。如果是本身就有问题,那就是“scrrun.dll”文件未注册。使用regsvr32scrrun.dll就可以2.VB里用setfso=CreateObject("Scripting.FileSystemObject")asp里边用setfso=Serv…

    2022年7月14日
    19
  • 音视频技术的高光时刻: LiveVideoStackCon 2019上海 音视频技术大会

    Mux流媒体专家PhilCluff在4月19、20日举办的LiveVideoStackCon2019上海音视频技术大会中发表了主题演讲,并根据自己在大会中的所见所闻…

    2022年4月15日
    47
  • 前端报502 bad gateway的原因及解决方案

    前端报502 bad gateway的原因及解决方案502BadGateway服务器作为网关或者代理时,为了完成请求访问下一个服务器,但该服务器返回了非法的应答。解决办法是:再刷新一下网页或清理一下电脑的缓冲文件在打开你想打开的网页就好了.一般情况下,这种办法是行得通的,但也不排除你所访问的网页被屏蔽的可能,如果你所访问的网页被屏蔽的话,就不管你怎么刷新也是没用的了。1.什么是502badgateway报错简单来说502是报错…

    2025年11月10日
    3
  • java executeupdate_Java自学-JDBC execute与executeUpdate的区别

    java executeupdate_Java自学-JDBC execute与executeUpdate的区别JDBC中execute与executeUpdate的区别execute与executeUpdate的区别步骤1:相同点execute与executeUpdate的相同点:都可以执行增加,删除,修改packagejdbc;importjava.sql.Connection;importjava.sql.DriverManager;importjava.sql.SQLExceptio…

    2022年10月20日
    3
  • 电网101、104规约解析(Java)「建议收藏」

    电网101、104规约解析(Java)「建议收藏」国家电网101规约解析(Java)最近在研究国家电网的101与104规约,也就是DL/T634.5101-2002和DL/T634.5104-2009。因为要做一个规约解析的软件(基于Android平台的),刚开始接触的也是一头雾水,因为没有接触过这方面的知识,所以就在网上搜索各种技术帖,大神经验什么的。后来在网上找到了一个软件–IEC8705(报文翻译工具).exe,这个##可以解析一…

    2022年6月20日
    169

发表回复

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

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