[chrome devtools]Console面板

news2025/1/15 13:14:46

点解开发者工具控制台【Console】后,在最右侧找到点击出现如下面板:

【1】是否在控制台显示网络相关的日志信息,比如get请求 
【2】刷新或者跳转页面时,原先控制台已显示的日志是否继续保留在控制台上,就是刷新页面控制台信息不会清空
【3】当页面里内嵌了一个iframe时,如果iframe也在控制台输出一些信息,你不想看,而只想看自己的就可以勾选次选项
【4】重复打印同一个log时,是否进行分组,就是将相同的log放到一起,如下图。

 【5】当出现跨域问题时,是否将跨域的错误信息显示在控制台,勾选就会显示

 【6】控制台是否打印XmlHttpRequest请求
 【7】勾选后,就会出现灰色的提示

 【8】勾选后,输入过的东西再次输入可以快速出现提示

 【9】web开发的很多api只能在html的元素上执行click或者tap事件后才能执行,如果这些api你直接放到控制台执行就会报错如下

 如果想在控制台也能执行就需要勾选这个选项,才能成功在控制台执行如下:

treat code evaluation as user action意思就是说:将这个代码视为用户已经进行了click或者tap了html元素,不懂什么是user action参考:https://webkit.org/blog/13862/the-user-activation-api/ 

在Console面板中可以使用的一些api,类似console.log常用的就不在讲解了

  • $_ :返回控制台最近一次的执行结果
  •  $0 - $4:显示最近5次右键检查过得元素
    在百度页面右键输入框,选择检查,然后再控制台输入$0就会显示刚才检查的元素

    如果又右键检查了另外一个元素,此时还想在控制台显示之前右键检查的输入框,输入$1即可
  • $(selector,[startNode)]:Dom选择器,可以再控制台选择dom元素, 是document.querySelector()快捷方式
  •  $(selector,[startNode)]:Dom选择器,可以再控制台选择dom元素, 是document.querySelectorAll()快捷方式
  •  $x(path,[startNode]):XPath选择器在控制台选择dom元素
  • clear:清除所有的历史操作记录,$0这样的操作就没值了
  • copy(object):将一个字符创的值复制到粘贴板
  • debug(function):当在控制台指定一个函数后,一旦程序执行了这个函数,断点就会进去
  • dir(Object):显示对象内容(js对象或者Dom对象),它是console.dir()的快捷方式
  • inspect(Object/Function):跳转到element面板,并高亮显示元素,页面也会显示当前选中的元素,如果是funcation,会显示出函数
  • getEventListeners(Object):显示在对象上注册的所有事件,例如在js中通过addEventListener注册的时间,如下
  • keys(Object):显示一个json对象的所有key
  • vaues(Object):显示一个json对象所有的value值
  • monitor(function):当执行一个函数式,会显示出函数的参数和返回值,使用 unmonitor(function) 来停止函数监控
  • monitorEvents(Object,[events]):监控某个对象的事件,一旦这个事件执行,监控就会被触发,显示出相应信息,使用 unmonitorEvents(object[, events]) 停止监控

    例子:监控control类型的所有的事件,此时我再改变浏览器窗口大小,还是可以成功显示出resize事件的执行log
  • profile([name] and profileEnd([name]):记录一段时期内页面执行的分析情况
  • queryObjects(Constructor):查询出用某个构造函数创建的所有对象,意思就是通过类名查询出他所有已经创建的实例
  • table(data [,columns]):表格的形式,显示对象的所有内容,它是console.table()的快捷方式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1047727.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

批处理数值计算实战,以及打印乘法表

文章目录 计算2的N次方转二进制最大公约数和最小公倍数打印乘法表 计算2的N次方 二进制转换是经常遇到的一个需求,批处理可以非常便捷地完成这个工作。而二进制转化过程中,第一步就是和 2 n 2^n 2n比较大小,所以在实现这个功能之前&#xff…

基于微信小程序的自驾游拼团小程序的设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能:具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

15. RocketMQ 消息队列

Spring Cloud 微服务系列文章,点击上方合集↑ 1. 简介 RocketMQ是一款开源的分布式消息中间件,它具有高可靠性、高性能和可伸缩性,被广泛用于构建分布式系统中的可靠消息传递服务。 官网地址: https://rocketmq.apache.org/ 2…

使用超声波清洗机洗眼镜有哪些注意事项、高颜值超声波清洗机推荐

眼镜,对于许多人来说,不仅仅是矫正视力的工具,更是日常生活的重要伴侣。但是,眼镜的清洁问题却常常让人感到困扰。镜片上的污渍、指纹、甚至小划痕,都让眼镜的使用体验大打折扣。幸运的是,随着科技的进步&a…

优化Python开发环境的几个神技巧

用Python编代码体验极佳,并且随着新版本的发布越来越好! 对于很多人而言,Python提供的大量免费函数库、高可读性的程序和新引入的类型注释让很多爱不释手。 然而,数据科学家特别容易使自己的Jupyter notebook变得庞大而杂乱&…

生物制药公司Acesis Holdings申请650万美元纳斯达克IPO上市

来源:猛兽财经 作者:猛兽财经 猛兽财经获悉,生物制药公司Acesis Holdings近期已向美国证券交易委员会(SEC)提交招股书,申请在纳斯达克IPO上市,股票代码为(ACSB),Acesis …

【AI视野·今日NLP 自然语言处理论文速览 第四十期】Mon, 25 Sep 2023

AI视野今日CS.NLP 自然语言处理论文速览 Mon, 25 Sep 2023 Totally 46 papers 👉上期速览✈更多精彩请移步主页 Daily Computation and Language Papers ReConcile: Round-Table Conference Improves Reasoning via Consensus among Diverse LLMs Authors Justin C…

【算法训练-动态规划】二 买卖股票的最佳时机

废话不多说,喊一句号子鼓励自己:程序员永不失业,程序员走向架构!本篇Blog的主题是【动态规划】,使用【数组】这个基本的数据结构来实现,这个高频题的站点是:CodeTop,筛选条件为&…

阿里云网络、数据中心和服务器技术创新优势说明

阿里云服务器技术创新、网络技术创新、数据中心技术创新和智能运维:云服务器方升架构、自研硬件、自研存储硬件AliFlash和异构计算加速平台,以及全自研网络系统技术创新和数据中心巴拿马电源、液冷技术等技术创新说明,阿里云百科aliyunbaike.…

React Native从0到1开发一款App

先贴上项目地址,有需要的大佬可以去github看看: WinWang/RNOpenEye: React Native(0.72)版本开眼OpenEye项目 (github.com) React Native(0.72)版本OpenEye项目,主要用来熟悉并上手RN项目的开发,是Flutte…

使用 Python 的自主机器人算法 Dijkstra 路径规划

迪杰斯特拉算法 Dijkstra 算法是一种广泛使用的算法,用于查找图中的最短路径。它通过从起始节点迭代选择成本最小的节点来探索搜索空间。Dijkstra 算法计算到达每个节点的成本,并在找到更短路径时更新成本。它会持续下去,直到到达目标节点或探…

基于Esp32-cam在无外部 PIR 传感器情况下实现运动检测(一)

关于无需外部 PIR 传感器的 Esp32-cam 运动检测的世界最佳指南。从 A 到 Z 您需要了解的一切 无需外部 PIR 传感器的 Esp32-cam 运动检测一直是该网站上最热门的话题。 几个月来我付出了很大的努力来完善本指南,但它始终感觉不够好。 所以我继续工作。现在我感到很满足。 现在…

ElasticSearch - 基于 拼音分词器 和 IK分词器 模拟实现“百度”搜索框自动补全功能

目录 一、自动补全 1.1、效果说明 1.2、安装拼音分词器 1.3、自定义分词器 1.3.1、为什么要自定义分词器 1.3.2、分词器的构成 1.3.3、自定义分词器 1.3.4、面临的问题和解决办法 问题 解决方案 1.4、completion suggester 查询 1.4.1、基本概念和语法 1.4.2、示例…

【c语言中数组和指针的联系】

C语言中的数组和指针之间存在紧密的联系,因为数组名本质上就是指向数组首元素的指针。这种联系使得在处理数组时可以像处理指针一样操作,同时也使得数组和指针可以互相转换。 下面详细说明数组和指针之间的联系,并提供一些示例来演示这种联系…

多线程入门知识点及代码详解及相关面试八股文

多线程详解及相关面试八股文 多线程 线程概述 * 多线程:进程:当前正在运行的程序,一个应用程序在内存中的执行区域线程:进程中的一个执行控制单元,执行路径* 一个进程可以有一个线程,也可以有多个线程* …

B+tree 与 B-tree区别

原理:分批次的将磁盘块加载进内存中进行检索,若查到数据,则直接返回,若查不到,则释放内存,并重新加载同等数据量的索引进内存,重新遍历 结构: 数据 向下的指针 指向数据的指针 特点: 1,节点排序 2 .一个节点了可以存多个元索,多个元索也排序了 结构: 数…

vscode 打开后 默认terminal power shell 报错 名为“.C”的驱动器不存在。

这是 默认terminal power shell 打开报的错 Test-Path : 找不到驱动器。名为“.C”的驱动器不存在。 所在位置 C:\Users\HUAWEI\Documents\WindowsPowerShell\profile.ps1:4 字符: 5 If (Test-Path "C:\Users\HUAWEI\AppData\Local\Temp\_MEI319962\Scripts\ ... …

Java列表查询Long(id)到前端转换出错

Java列表查询Long到前端转换出错 问题描述排查思路思路一:SQL问题思路二:Long类型转换出错 解决方法 问题描述 做了一个列表查询功能,本来不应该有啥大问题的,但是往往事与愿违。 诶,你越觉得不可能出问题&#xff0c…

深入探讨 Presto 中的缓存

【squids.cn】 全网zui低价RDS,免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 Presto是一种流行的开源分布式SQL引擎,使组织能够在多个数据源上大规模运行交互式分析查询。缓存是一种典型的提高 Presto 查询性能的优化技术。它为 Prest…

网络安全——黑客——自学

想自学网络安全(黑客技术)首先你得了解什么是网络安全!什么是黑客!!! 网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队…