chrome控制台中console的强大

article/2025/9/28 17:51:15

在使用谷歌浏览器进行前端开发的时候,console作为控制台的一个主要方法,相信大家都用过,一般都是用console.log()来输出部分内容,但是console还有很多强大之处,下面主要说一下console的更重强大的地方:
首先在chrome控制台的console中输入console.就会出现如下:
console的属性
后面出现的都是console的方法,下面来主要说明一下这些方法:

1、console.assert(message1, message2)
message1: Boolean类型,当为false的时候会输入message2
message2: 一般情况下是字符串,表示一些具体的信息
例如:

var flag = false;
console.assert(flag, "可以输出");
var flag2 = true;
console.assert(flag2, "不会输出");

console.assert(message1, message2)
2、 console.clear();
用于清空console控制台
console.clear()
3、 console.count()
使用console.count()可以计算某段代码的执行次数。具体看下面这个例子

function array(){console.count();
}
for(var i = 0; i< 10; i++){array();
}

console.count()
4、 console.debug()
可用于代码调试,chrome已经将其做成界面化操作,这里就不多说了。
5、console.dir()和console.dirxml()
将DOM结点以Js对象的形式输出到控制台,例如:在任何一个网页中的console控制台执行下面代码

console.dir($("body"));

console.dir($("body"))

console.dirxml($("body"));

console.dirxml($("body"))
6、 console.log()/console.info()/console.warn()/console.error()
打印内容/输出信息/输出警告/输出错误

 console.log("打印内容");console.info("输出信息");console.warn("输出警告");console.error("输出错误");

console.log()/console.info()/console.warn()/console.error()
7、 console.log()
console.log()不光可以打印内容,它还可以添加很多配置来达到不同的目的:

指示符输出
%s格式化输出一个字符串变量。
%i or %d格式化输出一个整型变量的值。
%f格式化输出一个浮点数变量的值。
%o格式化输出一个DOM对象。
%O格式化输出一个Javascript对象。
%c为后面的字符串加上CSS样式
console.log("%c内容", "font-size:20px; color:red;");

console.log()
8、console.group()/console.groupCollapsed()/console.groupEnd()
console.group(): 输出一组内容的开始
console.groupCollapsed(): 输出组的标题
console.groupEnd(): 输出组的结束

console.group("组1");
console.groupCollapsed("组1的标题");
console.log("组1的内容");
console.groupEnd();

console.group()/console.groupCollapsed()/console.groupEnd()
9、 console.markTimeline()已经过时,请使用console.timeStamp()代替
console.markTimeline()
console.timeStamp()是实现一个时间戳。
10、 console.profile()/ console.profileEnd()
查看CPU的使用情况,可直接使用界面化的,
console.profile()/ console.profileEnd()
11、 console.table()
将数据内容以表格的形式进行展示

var data = [{"name": "Bob","age": 8},{"name": "Roce","age": 15},{"name": "Blu","age": 10}];
console.table(data);

console.table()
12、 console.time() / console.timeEnd()
可用于审查一段代码的耗时情况

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {array[i] = new Object();
};
console.timeEnd("Array initialize");

console.time() / console.timeEnd()
13、 console.trace() 可以打出js的函数调用栈,可以用界面化的操作
14、console.constructor(message)

console.constructor("number");

console.constructor(message)

console.constructor([1,2,3])

console.constructor([1,2,3])


http://chatgpt.dhexx.cn/article/bTHK8Rsu.shtml

相关文章

浏览器控制台的一些输出方法---console

1.首选是常见的console.log(); console.log(hello);console.log(hi,friend);在浏览器按F12&#xff0c;控制台输出的是这样的 2.在console.log()里使用%s console.log(Hello, my name is %s,kon);%s会替换成第二个参数 3.在console.log()里使用%c console.log(%c styled te…

Edge浏览器调整控制台位置

默认edge浏览器f12控制台是在右边的&#xff0c;但是个人比较喜欢在下面&#xff0c;显示的全面一些 点击右上角的省略号&#xff0c;出现&#xff1a; 注意这几个图标&#xff1a; 点击第三个&#xff0c;就可以把控制台调到下面啦~

【Chrome】浏览器控制台设置成中文

文章目录 按 F12 或 鼠标右键点击检查打开控制台界面&#xff0c;如下 此时可以看到我们的控制台界面是英文的&#xff0c;这对新手来说可能有点不太友好所以如果需要设置成中文&#xff0c;可以按以下步骤设置 点击控制台中的设置图标&#xff0c;如图所示 找到 Language 选项…

chrome控制台使用

1.输入代码片段的时候 总是遇到 Enter回车代码没敲完 就被执行了 试试使用ShiftEnter 直接在控制台换行 2.当你在控制台计算了一个数值的时候 可以用$_来代替上一个表达式执行的结果 数值计算的 同样适用 3.当时在Element里面选中一个元素时 你可以回到控制台 用$0-$5去输出这个…

谷歌浏览器控制台位置调整

1.如何打开 使用快捷键F12即可 2.如何设置

浏览器控制台接口学习

我们在做项目开发时&#xff0c;想知道一个功能调用了后台哪个接口&#xff0c;我们就可以在浏览器控制台中进行查看。 举一个例子&#xff0c;我们在看博客时&#xff0c;发现这一篇文章写的不错&#xff0c;我们在做点赞这个动作时&#xff0c;调用了哪个接口呢&#xff1f; …

这才是 Chrome 控制台的正确使用方法!太重要了!

Chrome 控制台是很多开发者的必备工具之一&#xff0c;但你真的掌握了它的精髓吗&#xff1f;是否还是全靠 console.log() 排查问题&#xff1f; 其实&#xff0c;控制台的功能远比这更强大&#xff0c;用好控制台&#xff0c;能帮助我们更加准确高效地发现问题、定位问题&…

chrome控制台功能

Chrome开发者工具面板 面板上包含了Elements面板、Console面板、Sources面板、Network面板、 Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。 这些按钮的功能点如下&#xff1a; Elements:查找网页源代码HTML中的任一元素,手动修改任…

Chrome的控制台(Console)的用法(超详细,还未细看)

为什么写了本篇博客&#xff1a; &#xff08;1&#xff09;在Chrome浏览器开发者工具介绍&#xff1b;&#xff08;包括&#xff0c;Network面板介绍&#xff0c;XHR等等&#xff09;中&#xff0c;遇到了Chrome的控制台&#xff08;Console&#xff09;&#xff1b;本篇博客就…

【前端新学必入】浏览器控制台的使用

1.选择一个页面按F12键或者&#xff08;以谷歌浏览器为例&#xff0c;其实浏览器都大同小异&#xff09;选择右上方的设置旁边的三个点——>更多工具——>开发者工具 进入。 2.常用的五个以及其对应的功能&#xff1a; element:爬网站&#xff0c;把网站复刻一遍 consol…

3、浏览器控制台使用

2.2、基本语法入门 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>Title</title></head><body><script>//1. 定义变量 变量类型 变量名 变量值;var score 71;//alert(sco…

浏览器控制台(console对象)

目录 开发者工具console对象console.log方法其他输出方法:debug,info,warn,error方法console.table方法console.assert方法time和timeEnd方法分组方法:group和groupend其他方法命令行APIdebugger语句移动端开发模拟手机视口(viewport)模拟touch事件模拟经纬度远程除错Go…

前端新人必看的开发技巧之浏览器控制台

随便进入一个网页&#xff0c;按下F12&#xff0c;都将看到如下的控制台 一、HTML调试 你可以对HTML标签做任何操作&#xff0c;修改它&#xff0c;移动它&#xff0c;删除它 快速定位深层元素 HTML带来的启发 在网页上抓取想要的图片&#xff1a; 抓取背景图片 有些图片…

谷歌浏览器--控制台(console)调试--使用/教程/实例

原文网址&#xff1a;谷歌浏览器--控制台(console)调试--使用/教程/实例_IT利刃出鞘的博客-CSDN博客 简介 说明 本文用示例介绍浏览器使用控制台&#xff08;console&#xff09;调试前端的方法。 Console API提供了允许开发人员执行调试任务的功能&#xff0c;Console对象提…

php xdebug远程调试配置(含cli模式)

找了很久php的xdebug扩展远程调试教程&#xff0c;大都已经过时&#xff0c;现在记录下php配置xdebug远程调试的过程。 适用php版本: php 7 ~ 8 适用安装xdebug3 版本 目录 1. 安装xdebug 关于windows下的安装 关于linux下的安装 2. 配置phpstorm远程调试 1. 全局监听&am…

VScode调试php文件(详细且简单易操作)

之前也不懂&#xff0c;看了网上好多帖子&#xff0c;按照它们步骤操作一遍之后&#xff0c;还是不行。。。。。头都大了 现在懂了&#xff0c;原来几步就搞定了&#xff0c;被它们搞得这么复杂&#xff0c;又是配置这个文件&#xff0c;又是配置那个文件&#xff0c;。。。。…

PHP调试方法

为什么需要Debugger? PHP程序员调试使用echo、print_r()、var_dump()、printf()等&#xff0c;其实对 于有较丰富开发经验的程序员来说这些也已经足够了&#xff0c;他们往往可以在程序执行的过程中&#xff0c;通过输出特定变量的值可以判断程序执行是否正确&#xff0c;甚至…

VScode + PHPstudy + PHP Debug 调试PHP代码

找了好多文章写个流程笔记记录下&#xff0c;整了几天终于搞定了&#xff08;毕竟我是小白萌新&#xff09;。 下载小皮面板 https://www.xp.cn/download.html下载vscode https://code.visualstudio.com/下载everything https://www.voidtools.com/zh-cn/ 一、小皮面板点击配…

PHP笔记-使用PHPStorm断点调试php代码

最近在撸php&#xff0c;书上都不交断点调试&#xff0c;这尼玛坑得很&#xff0c;没有断点的开发程序&#xff0c;就是坑&#xff0c;通过查阅和摸索&#xff0c;调试成功&#xff0c;在此记录下&#xff1a; php版本&#xff1a;7.1 phpstorm版本&#xff1a;2020.3 首先运…

phpstorm+xdebug/php项目调试

前提&#xff1a;项目使用xampp集成 一、下载xdebug&#xff0c;当到xampp/php/exp目录下 二、配置php.ini [Xdebug] zend_extension"D:/xampp/php/ext/php_xdebug.dll" xdebug.collect_paramsOn xdebug.collect_returnOn xdebug.auto_traceOn xdebug.trace_output_…