你不知道的那些js调试命令
通常情况下,我们在调试js程序的时候一般都使用console.log()来进行程序的调试,打印自己所需要的内容什么的。
那么js的调试命令可不止一个console.log()
分类输出
console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('错误信息');
分组输出
我们还可以使用Console.group()
和Console.groupEnd()进行包裹,分组
console.group('第一个组');
console.log("1-1");
console.log("1-2");
console.log("1-3");
console.groupEnd();
分组还可以进行嵌套
console.group('1');
console.group("1-1");
console.group("1-1-1");
console.log('text');
console.groupEnd();
console.groupEnd();
console.group("1-2");
console.log('text');
console.log('text');
console.log('text');
console.groupEnd();
console.groupEnd();
输出表格
使用console.table()
可以将传入的对象,或数组以表格形式输出。适合排列整齐的元素
var Obj = {
Obj1: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj2: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj3: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj4: {
a: "aaa",
b: "bbb",
c: "ccc"
}
} console.table(Obj); var Arr = [
["aa","bb","cc"],
["dd","ee","ff"],
["gg","hh","ii"],
] console.table(Arr);
条件输出
可以使用console.assert()进行条件输出
- 当第一个参数或返回值为真时,不输出内容
- 当第一个参数或返回值为假时,输出后面的内容并抛出异常
console.assert(true, "你永远看不见我");
console.assert(false, "你可以看见我");
如下图:
格式化输出
占位符 | 含义 |
---|---|
%s | 字符串输出 |
%d or %i | 整数输出 |
%f | 浮点数输出 |
%o | 打印javascript对象,可以是整数、字符串以及JSON数据 |
var arr = ["马化腾", "马云"]; console.log("%s:腾讯!%s:阿里巴巴", arr[0], arr[1]); console.log("圆周率整数部分:%d,带上小数是:%f", 3.1415, 3.1415);
自定义样式
使用%c
为打印内容定义样式,再输出信息前加上%c
,后面写上标准的css样式,就可以为输出的信息添加样式了
又时候会觉得,log光是纯文本比较丑,这时候我们可以考虑美化一下,如:
这时候我们的代码就可以这样写
console.log(
"%c 版本%c1.0%c",
"background:#35495E; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;",
"background:red; padding: 1px; border-radius: 0 3px 3px 0; color: #fff;",
"background:transparent"
);
这里也就跟大家讲一些,常用的东西!
你不知道的那些js调试命令的更多相关文章
- nodejs学习笔记Node.js 调试命令
3.4 调试 47 下面是一个简单的例子: $ node debug debug.js < debugger listening on port 5858 connecting ...
- node.js调试
用了几天node.js感觉很新奇,但是调试问题实在是愁煞人,开始的时候懒的学习调试方法,看看异常内容就可以了,但随着代码复杂程度的上升,并不是所有错误都是语法错误了,不调试搞不定了,只好搜搜资料,学习 ...
- [转]九个Console命令,让js调试更简单
转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...
- js调试系列: 控制台命令行API
js调试系列目录: - 上次初步介绍了什么是控制台,以及简单的 console.log 输出信息.最后还有两个小问题,我们就当回顾,来看下怎么操作吧. 先打开百度,然后按 F12 打开后,如果不是 C ...
- 【F12】Console命令,让js调试更简单
Console命令,让js调试更简单 一.显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("informa ...
- Chrome控制台 JS调试
Chrome控制台 JS调试的一些小技巧 $ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中. $0~$4则代表了最近5个你选择 ...
- 分享几个日常调试方法让js调试更简单
下面分享几个日常调试代码的时候在Console命令行显示你的操作,让你的js调试更简单. console显示信息的命令 在浏览器按f12在console上显示你的文本. <!DOCTYPE ht ...
- 让js调试更简单—console
一.显示信息的命令 console.log 用于输出普通信息 console.info 用于输出提示性信息 console.error用于输出错误信息 console.warn用于输出警示信息 最常用 ...
- 前端开发中的JS调试技巧
前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
随机推荐
- django 的跨域配置
1.跨域原理 #1. 首先浏览器安全策略限制js ajax跨域访问服务器 #2. 如果服务器返回的头部信息中有当前域: // 允许 http://localhost:8080 这个网站打开的页面中的j ...
- Python练习题 015:一颗自由落地的球
[Python练习题 015] 一球从100米高度自由落下,每次落地后反跳回原高度的一半,再落下.求它在第10次落地时,共经过多少米?第10次反弹多高? ----------------------- ...
- 可变参数__VA_ARGS__使用
1. 调试功能一般会使用到宏+可变参数的方式 1.1 ##__VA_ARGS__ 之详细解析 例如: case A. #define my_print1(...) printf(__V ...
- 在Centos6上安装RabbitMQ的过程(有点坑)
1.安装依赖环境 yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c++ ...
- Power Designer建模之餐饮在线点评系统——业务处理模型
餐饮在线点评系统除查看会员促销活动.查看站内消息等简单业务流程外,相对复杂的业务流程包括管理员注册餐厅,发布餐厅信息,餐厅信息主要包括特色菜.促销活动.团购活动和优惠券信息. 餐厅信息发布后,用户可以 ...
- python数据结构之二叉树的建立实例
先建立二叉树节点,有一个data数据域,left,right 两个指针域 # coding:utf-8 class TreeNode(object): def __init__(self,left=N ...
- Allegro PCB 转 PADS Layout 之后的修修补补
操作系统:Windows 10 x64 工具:PADS Layout VX.2.3 参考:Allegro转PADS以及后续修改 我们可以看到转换后的PCB文件,乱糟糟的,所以还需要我们手动修改一下. ...
- ActiveMQ详细入门教程系列(一)
一.什么是消息中间件 两个系统或两个客户端之间进行消息传送,利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集成.通过提供消息传递和消息排队模型,它可以在分布式环境下 ...
- Git命令diff格式详解
diff是Unix系统的一个很重要的工具程序. 它用来比较两个文本文件的差异,是代码版本管理的基石之一.你在命令行下,输入: $ diff <变动前的文件> <变动后的文件> ...
- 动画演示Sunday字符串匹配算法——比KMP算法快七倍!极易理解!
前言 上一篇我用动画的方式向大家详细说明了KMP算法(没看过的同学可以回去看看). 这次我依旧采用动画的方式向大家介绍另一个你用一次就会爱上的字符串匹配算法:Sunday算法,希望能收获你的点赞关注收 ...