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


相关推荐

  • PostgreSQL数据库备份和恢复

    PostgreSQL数据库备份和恢复一、备份1、cmd到PostgreSQL安装目录bin下2、备份命令pg_dump-h192.168.100.23-Upostgrespostgres>D:\postgres.bak3、指令解释如上命令,pg_dump是备份数据库指令;10.194.227.231是数据库的ip地址;postgres是数据库的用户名;postgres是数据库名;>意思是导出到指定目录;4、图文并茂备份二、恢复1、备份命令psql

    2022年5月14日
    46
  • pycharm安装Translation翻译插件(中文翻译)「建议收藏」

    pycharm安装Translation翻译插件(中文翻译)「建议收藏」打开pytcharm选择文件——设置找到plugins——在输入框搜索translation进行安装即可设置翻译工具的唤醒快捷键位置:快捷键——在输入框输入名称,右击选择啊大大keyboardshortcut自定义就可以了选择翻译的工具如图所示:进入pycharm,按快捷键呼出翻译界面,输入内容,按回车按钮…

    2025年7月11日
    5
  • Google Maps_Google桌面搜索

    Google Maps_Google桌面搜索GoogleBuzz从诞生那天起就跟位置服务紧密连接在了一起,我们可以在移动GoogleMaps里看到大家都在哪里发送Buzz(只要他们发送的时候让Google记录自己的位置),这个功能非常有趣,特别是在某些特殊事件发生之时,可以按照位置看到某个区域里的人们都在想什么做什么(而不是按照timeline的传统方式)。今天,Google在桌面地图服务里也开放了Buzz图层(之…

    2022年10月15日
    3
  • Clipboard.js实现复制文本到剪贴板功能[通俗易懂]

    Clipboard.js实现复制文本到剪贴板功能[通俗易懂]Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件,该插件可以将输入框,文本域,DOM节点元素中的文本内容复制到剪贴板中。官网地址:https://clipboardjs.com/ 浏览器兼容性:兼容Chrome、Firefox、Opera、Safari、IE9+对于不兼容的浏览器版本也有优雅的降级处理,可以采用下面的方式clipboard.o

    2022年7月14日
    25
  • 茅台抢购脚本详细教程, 另已将茅台抢购做成了一个软件

    今天对软件进行了升级,公众号上重新回复茅台获取最新软件!!最新软件解压后如图!以管理员方式运行main.exe软件最后抢购成功是不会主动付款的,要自己去APP支付注意使用茅台软件版抢购的朋友需要自己先去app上预约抢购!!!预约完之后,运行软件,输入2按回车键!,等待到指定时间开始抢购!!!别再问我为什么没动了!因为还没到抢购时间!!别再问我为什么没动了!因为还没到抢购时间!!别再问我为什么没动了!因为还没到抢购时间!!文章上有详细说明的,就不要再问我了!!看文章就对了,问我也

    2022年4月6日
    2.9K
  • 折腾Cubieboard

    折腾Cubieboard1)开箱板子+塑料看

    2022年7月22日
    17

发表回复

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

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