Chrome浏览器js调试(console等)
目录
- 内容介绍
- 一、Console
- 1、log、info、error、warn
- 2、assert
- 3、clear
- 4、count和countReset
- 5、dir和dirxml
- 6、group、groupEnd和groupCollapsed
- 7、profile和profileEnd
- 8、table
- 9、time、timeEnd和timeLog
- 10、trace
- 11、log
- 二、其他
- 1、jQuery选择器
- 2、keys和values
- 3、copy
- 4、上下方向键
- 5、$_,$0
- 6、自定义输出文本样式和图片
内容介绍
相信前端小伙伴们在调试项目代码时经常用到console,这里我们首先了解一下js调试中更多使用console而非alert的原因。
1、alert弹窗的同时阻塞代码执行,只有点击确定才会执行后面的代码,而console不影响代码执行。
2、alert输出方式比较单一,而console不仅有多种方法适应不同类型的输出,且可以在样式等方面做一些自定义。
3、alert输出对象时显示[object Object],输出为String类型,需要使用JSON.stringify(obj)转为字符串进行显示,而console可以输出任意数据类型。
一、Console
1、log、info、error、warn
分别为普通信息、提示信息、红色错误信息和黄色警示信息
console.log("log输出普通信息");
console.info("info输出提示信息")
console.error("error输出红色错误信息")
console.warn("warn输出黄色警示信息")
2、assert
第一个表达式或变量判断为false时,输出第二个值并抛出异常
console.assert(true, "assert——true输出")
console.assert(false, "assert——false输出")
3、clear
清空控制台(chrome也可直接 clear() 清空,或 Ctrl+L 快捷键)
console.clear();
4、count和countReset
count用于计数,默认参数为"default",如果传参,相同计数序列的调用参数也要相同
countReset为重置计数,如果对应计数序列已传参,需与其参数一致
console.count("计数")
console.count()
setTimeout(() => {console.countReset("计数");
}, 3000);
setInterval(() => {console.count("计数")
}, 800);
5、dir和dirxml
dir显示一个对象的所有属性和方法
console.dir(document.body)
dirxml显示一个明确的XML/HTML元素的包括所有后代元素的交互树
console.dirxml(document.body)
6、group、groupEnd和groupCollapsed
group和groupEnd对输出值进行分组
console.group("第一组");
console.log("第一组1");
console.log("第一组2");
console.log("第一组3");
console.log("第一组4");
console.groupEnd("第一组");
console.group("第二组");
console.log("第二组1");
console.log("第二组2");
console.log("第二组3");
console.log("第二组4");
console.groupEnd("第二组");
groupCollapsed可折叠或展开,默认为折叠状态
console.group("第一组");
console.log("第一组1");
console.log("第一组2");
// console.groupCollapsed("可折叠或展开,默认折叠状态")
console.log("第一组3");
console.log("第一组4");
console.groupEnd("第一组");
console.group("第二组");
console.log("第二组1");
console.log("第二组2");
console.log("第二组3");
console.log("第二组4");
console.groupEnd("第二组");
7、profile和profileEnd
profile和profileEnd进行性能分析
console.profile("性能分析");
var arr = new Array(100000);
for (var i = arr.length - 1; i >= 0; i--) {arr[i] = new Object();
}
console.profileEnd("性能分析");
打开步骤:自定义及控制Google Chrome——More tools——JavaScript Profiler
8、table
table将对象或数组以表格形式输出,结构更加清晰
let obj = {name: 'tom',age: 12,gender: 'man',time: 1619084912,filename: 'bei1.html',filepath: 'C:\bei\bei1.html',hobby: 'football'
};console.table(obj)
let arrstr = ["name", "age", "sex", "hobby"];
console.table(arrstr)
9、time、timeEnd和timeLog
time和timeEnd成对使用,统计二者之间代码执行的时间,输出为时间相减的结果(默认参数为"default",如果传参,两个参数要一致)
timeLog:在time和timeEnd之间使用一次,如有多个,后面覆盖前面(参数需与time和timeEnd一致)
console.time("测试执行时间");
console.timeLog("测试执行时间");(function handle() {for (let index = 0; index < 5; index++) {console.log(index);}
})()console.timeEnd("测试执行时间")
10、trace
trace输出一个堆栈跟踪,依次为函数的调用过程
console.trace(document.body)function ad(a, b) {console.trace();return a + b;
}function init() {ad(1, 2)
}init()
11、log
字符串和数字显示颜色不同
console.log("String:\n", "123");
console.log("Number:\n", 123);
占位符在console.log中控制插入位置和数据类型
占位符 | 类型 |
---|---|
%s | 字符类型(String) |
%d,%i | 整型(Integer) |
%f | 浮点类型(Floating) |
%o | 对象类型(Object) |
console.log("1 %s 2", "+")
console.log("1 %d 2", "+")
console.log("1 %s 2", 3)
console.log("1 %s 2 = %d", "+", 4)
二、其他
1、jQuery选择器
Chrome控制台支持jQuery选择器,可直接在控制台输入jq语法
2、keys和values
前者返回传入对象的全部属性名数组,后者返回传入对象的全部属性值数组
3、copy
copy可以将控制台获取的DOM树等内容复制到剪切板
4、上下方向键
一次上方向键:获得控制台上次输入的值
5、$_,$0
$_表示上次输入的值,与上方向键加回车相同效果
$0可以获得最后一次检查元素的DOM节点,$1为上上次,最多5次
6、自定义输出文本样式和图片
第一个字符串带有%c,可以输出带有样式的值(链接地址默认灰体加下划线不会被css样式覆盖)
console.log('默认样式 %c 修改字号及颜色', 'font-size:16px;color:red;');
console.log('默认样式 %c CSDN地址: https://www.csdn.net/? %c 链接地址样式不被覆盖', 'font-size:20px;color:#ff8400;', 'font-size:12px;color:#000');
利用样式,可给空值设置宽高、边距、定位、背景图等,可以实现控制台输出图片的效果
console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://img-blog.csdnimg.cn/20210423160926253.gif");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;');
标签:Chrome,控制台,console,打印输出
更多演示案例,查看 案例演示
欢迎评论留言!
Chrome浏览器js调试(console等)相关推荐
- Chrome浏览器及调试教程
==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程 在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...
- Chrome浏览器开发调试系列(一)
// 计划写一个 Chrome 浏览器以及 调试器的系列文章,我慢慢写. 边写边改,发觉博客真是个打草稿的好地方. // 本文针对的是当前最新的浏览器Chrome34,如果你的版本不够新,希望你能够更 ...
- Chrome 浏览器客户端调试
Chrome 浏览器客户端调试 在开发者界面中,你可以使用打开快捷输入Ctrl + Shift +P运行常用命令. 一.Elements 1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息, ...
- Chrome浏览器 js 关闭窗口失效解决方法
Chrome浏览器 js 关闭窗口失效解决方法 参考文章: (1)Chrome浏览器 js 关闭窗口失效解决方法 (2)https://www.cnblogs.com/WhiteM/p/7098787 ...
- PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页
PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页 最近学习移动端网页开发的时候,遇到了一个问题,如何在真机上看到控制台输出的内容. 虽然现在的桌面浏览器提供了模拟手 ...
- chrome浏览器断点调试js代码 和 idea断点调试java代码
文章目录 chrome调试js代码 idea调试java代码 chrome调试js代码 Chrome调试快捷键总结 快捷键 功能 F10 (step over) 单步调试.步过,遇到函数时也当成一个语 ...
- chrome浏览器,调试详解,调试js、调试php、调试ajax
1.可以看到js报错 2.可以看到php报错 3.可以看到ajax返回的信息,以及报错情况 4.可以看到调用了那些内容以及顺序 5.可以调试js代码 6.可以查看session等等 功能非常之强大. ...
- js调试console.log使用总结图解
一 实例 打印字符串和对象: 可展开对象查看内部情况: 看一下console对象本身的定义情况: 输出对象情况: utag对象所在文件: 输出对象: 二 Console.log 总结 1 如果你js没 ...
- 超完整的 Chrome 浏览器客户端调试大全
2019独角兽企业重金招聘Python工程师标准>>> 引言 "工欲善其事,必先利其器" 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套 ...
最新文章
- 成功解决SyntaxError: encoding problem: utf8 with BOM
- Linux如何运行pipe1,Linux中的管道
- CentOS 6.5 部署WordPress
- python集合可以修改吗_修改包含Python3中的集合的集合列表-问答-阿里云开发者社区-阿里云...
- C/C++ 指针详解
- 求解最大公因子(JAVA辗转相除法)、python的最大公因子,最小公倍数
- Struts2之Action的基本配置
- 基于WFST的语音识别解码器
- 给大家爆个秘密:怎样迅速提高你的校内人人网人气
- win2003服务器360修复漏洞打不开网页,360浏览器打不开网页,教您怎样解决360浏览器打不开网页...
- 毕业设计 微信小程序 音乐播放器
- 微信录制视频转圈效果如何实现?
- CentOS 8 安装 PostgreSQL 10
- C与C++中的常用符号与标点用法详解及实例
- 1万条数据大概占多大空间_10月漫画数据月报丨多平台收藏数,评论数较上月稳定提升,狐妖小红娘播放量再创新高...
- Android仿微信聊天界面布局
- python自动标注autocad坐标_python 可视化 二维坐标标注等等
- 2023 源支付码支付系统源码v3.0 二开修复版 全本地化
- 国际电话组件封装使用以及vuephonenumberinput属性解读
- excel文件打开密码如何找回
热门文章
- 重磅|犀思云联手中国信通院、应通科技发布首部《云交换白皮书》
- 产品检验的数字化转型应用
- python初中教学_初中生初学python课堂教学感悟
- matplotlib-bilibili,抖音很火的动态数据视频自动生成(第四节)-视频,语音合成
- 测试特制微型气泵在低温环境下的稳定性
- python任务提交shell后台运行命令
- 深划痕需要大面积补漆吗_什么程度的划痕才需补漆? 小心亏大了!
- 【NLP】图解词嵌入和Word2vec
- 如何恢复libselinux.so.1文件 - 教训
- 浅谈变电站设备信息采集管控系统组成、特点