你不知道的那些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调试技巧
前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
随机推荐
- macOS提示“将对您的电脑造成伤害……“进阶版
> 很多小伙伴在更新完系统后运行应用会闪退以及提示"xxxx 将对您的电脑造成伤害. 您应该将它移到废纸篓",本文将针对此问题提供解决方法.如图:![-w456](https ...
- Kubernetes K8S之存储Secret详解
K8S之存储Secret概述与类型说明,并详解常用Secret示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-master CentOS7.7 ...
- 基础篇:详解锁原理,volatile+cas、synchronized的底层实现
目录 1 锁的分类 2 synchronized底层原理 3 Object的wait和notify方法原理 4 jvm对synchronized的优化 5 CAS的底层原理 6 CAS同步操作的问题 ...
- @ComponentScan比较
ComponetScan 定义扫描规则 value:指定要扫描的包 excludeFilters=Filter[] 指定扫描的时候按照什么规则排除哪些组件. includeFilters=Filter ...
- 实现element-ui对话框可拖拽功能
element-ui对话框可拖拽及边界处理 应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案.很多大神给出的代码是没有解 ...
- Unity Shader 00 - 梳理 Unity Shader 的基本结构
0x00 写在前面 之前一直在阅读 The Book of Shaders 一书,为什么会开始写 Unity Shader 呢?一方面,因为该书目前尚未完结,写下此文时已阅读到该书的最新章节:另一方面 ...
- Eclipse 重命名工程、包、类
Eclipse版本 重命名工程,使用鼠标右键点击工程,选Refactor > Rename...(快捷键:Alt + Shift + R) 重命名包.类的操作与重命名工程一样. 其实,最简单的操 ...
- spring-boot-route(十一)数据库配置信息加密
Spring Boot最大的特点就是自动配置了,大大的减少了传统Spring框架的繁琐配置,通过几行简单的配置就可以完成其他组件的接入.比如你想要连接mysql数据库,只需要的配置文件里面加入mysq ...
- pycharm里面同级目录的py文件引用报错
使用pycharm开发py遇到很烦的事儿,就是在同级目录引用另外一个py文件,pycharm里面总是会红杠,代码还是 照样可以跑,只是看着烦. 查询了一下,通过将当前目录设置为sources_root ...
- angular http 跨域访问
1.在跟目录中创建配置文件:proxy.config.json ,文件内容如下: { "/api": { "target": "http://192. ...