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


相关推荐

  • 国外那些优秀的 Drupal 教程博客

    国外那些优秀的 Drupal 教程博客使用开源软件的巨大好处之一,就是能够参与到它们强大的交流社区中。作为开源CMS的领军人物,Drupal社区就是很好的例子。随着 Drupal 不断地发展变化,社区里的成员每天也都在进行着各种交流,例如Drupal 的新特性、如何使用现有的功能、怎样能够让这个平台变得更好等等。“分享”是开源的核心精神,因此很多人也会将自己的经验、心得以及各种相关的内容记录到博客中。  如果你想加强对 

    2022年6月12日
    32
  • pc端媒体查询常见的尺寸_头条视频规定多少尺寸

    pc端媒体查询常见的尺寸_头条视频规定多少尺寸PC端按屏幕宽度大小排序

    2025年6月5日
    2
  • idea2021.3永久激活3月最新在线激活

    idea2021.3永久激活3月最新在线激活,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月15日
    113
  • IntelliJ IDEA Community_集成灶好不好用过的来说一下

    IntelliJ IDEA Community_集成灶好不好用过的来说一下https://blog.csdn.net/u013412790/article/details/71022784 第一步:下载svn的客户端,通俗一点来说就是小乌龟啦!去电脑管理的软件管理里面可以直接下载,方便迅速下载之后直接安装就好了,但是要注意这里的这个文件也要安装上,默认是不安装的,如果不安装,svn中的bin目录下就会没有svn.exe,这个待会会用到,所以一点要注意哦。(都是…

    2022年10月9日
    3
  • linux下安装svn客户端_服务器安装步骤

    linux下安装svn客户端_服务器安装步骤1、简介Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说.首先来下载和搭建SVN服务器。yuminstallsubversion2、配置2.1、创建仓库我们这里在/home下建立一个名为svn的仓库(repository),以后所有代码都放在这个下面,创建成功后在svn下面多了几个文件夹。#cd/home#mkdirsvn#svnadmincreate/home/svn#lssvnconfdb.

    2022年8月31日
    9
  • 启动mysql的命令 linux命令,linux如何启动mysql服务 linux启动mysql服务命令是什么(图文)…

    启动mysql的命令 linux命令,linux如何启动mysql服务 linux启动mysql服务命令是什么(图文)…mysql 数据库是一种开放源代码的关系型数据库管理系统 有很多朋友都在使用 一些在 linux 系统上安装了 mysql 数据库的朋友 却不知道该如何对 mysql 数据库进行配置 那么 linux 该如何启动 mysql 服务呢 接下来小编就给大家带来 linux 启动 mysql 服务的命令教程 R1d 电脑 数码 手机应用问题解决的 IT 技术网站 seo 云狐网具体步骤如下 R1d 电脑 数码 手机应用问题解决的 IT 技术网

    2025年8月31日
    2

发表回复

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

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