你可能不知道的console

NSFish 发布于2019-08-22 15:02 / 1905人阅读

摘要：肖奇马斯克虞美人拉贾佩奇谷歌埃隆马斯克特斯拉代表标识方法在控制台中显示指定对象的属性，并展现类似文件树样式的交互列表。肖奇马斯克拉贾佩奇埃隆马斯克埃隆马斯克拉贾佩奇埃隆马斯克埃隆马斯克拉贾佩奇方法清除控制台信息。

1. 概述

console 对象提供对浏览器控制台的接入。不同浏览器上它的工作方式是不一样的. 其次它是一个全局对象, 我们先在控制台将console打印出来, 看看它里面都有些什么东西

2. log()方法

console.log() 就是向web控制台输出一条信息. 参数可以是变量, 数字, 字符串等。

// 常规下
var name = "肖奇 马斯克"
console.log("Hello");            // Hello
console.log(name);               // Jack
console.log(`Hello, ${name}`);   // 肖奇 马斯克

除此之外, 还支持格式化输出：

var name = "肖奇 马斯克"
// %s         字符串
// %d or %i   整数
// %f         浮点数
// %c         样式代码
console.log("Hi, 我是%s。", name);
console.log("%cHi, 我是%s。", "color: rebeccapurple;", name);

3. info(), warn(), error()方法

// Info
console.info("Hi, This is message");
// warning 警告
console.warn("On, Your operation may cause a security breach!");
// Error 报错
console.error("Shit! Variable does not exist!");

4. table()方法

接受一个数组或者对象, 可以接受一个额外的参数来描述表格的列数。它会把数据通过表格的形式打印出来

let array = [
  { name: "肖奇 马斯克", tag: "虞美人" },
  { name: "拉贾 佩奇", tag: "谷歌" },
  { name: "埃隆 马斯克", tag: "特斯拉" }
];
console.table(array)

5. group()方法

console.group和console.groupWEnd就像一对标签一样。group在控制台创建一个新的分组, 输出到控制台上的内容都会被添加一个缩进, 表示该内容属于当前分组, 直到调用console.groupEnd()之后, 当前分组才结束。

let items = [
  { name: "肖奇 马斯克", tag: "虞美人" },
  { name: "拉贾 佩奇", tag: "谷歌" },
  { name: "埃隆 马斯克", tag: "特斯拉" }
];
items.forEach(item => {
  console.group(`${item.name}`);
  console.log(`${item.name}`);
  console.log(`%c代表标识  ${item.tag}`, "color: red;");
  console.groupEnd(`${item.name}`);
})

6. dir()方法

在控制台中显示指定JavaScript对象的属性，并展现类似文件树样式的交互列表。

console.dir(document.getElementById("header"));

7. count()方法

输出每一次被调用的次数。

console.count("肖奇 马斯克");
console.count("拉贾 佩奇");
console.count("埃隆 马斯克");
console.count("埃隆 马斯克");
console.count("拉贾 佩奇");
console.count("埃隆 马斯克");
console.count("埃隆 马斯克");
console.count("拉贾 佩奇");

8. clear()方法

清除控制台信息。

console.clear();
// 执行结果：Console was cleared

9. time()方法

启动一个计时器（timer）来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字。 页面中最多能同时运行10,000个计时器。跟group一样, time也是配套的。 当以此计时器名字为参数调用 console.timeEnd() 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。

console.time("fetching data");
fetch("https://api.github.com/users/anran758")
    .then(data => data.json())
    .then(data => {
        console.timeEnd("fetching data");
        console.log(data);
    });

10. assert()方法

第一个参数接受一个断言(声明), 第二个参数是一个message。 如果断言为false，则将一个错误消息写入控制台；如果断言是true，就当做没发生。

// 语法：console.assert(assertion, message [, subst1, ..., substN]);
console.assert(1 === 1, "此条消息不会在控制台输出!");
console.assert(1 === 2, "1 === 2 这是个错误!");

云服务器 GPU云服务器可能不知道地方你知道你应该知道你不知道的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93113.html

[译]14个你可能不知道的JavaScript调试技巧

摘要：在控制台中使用，当到达传入的函数时，代码将停止。但除了私有和匿名函数这可能是找到调试函数的最快方法。在控制台中输入，当调用时，将以调试模式停止屏蔽不相关代码现在，我们经常在应用中引入几个库或框架。译者：SlaneYang原文：https://raygun.com/javascript-debugging-tips 以更快的速度和更高的效率来调试JavaScript 熟悉工具可以让工具...

CODING 2019-08-21 17:27 评论0 收藏0
JavaScript 优雅的实现方式包含你可能不知道的知识点

摘要：优点简单粗暴，直接调用缺点兼容性不太好，不过的话都支持你可能不知道的前端知识点对象和的方法。下面从深层次剖析一下对于开始的两个赋值语句，，，相当于，而显然等于。同理可以分析第三个赋值语句有些东西很好用，但是你未必知道；有些东西你可能用过，但是你未必知道原理。实现一个目的有多种途径，俗话说，条条大路通罗马。很多内容来自平时的一些收集以及过往博客文章底下的精彩评论，收集整理拓展一波，发...

617035918 2019-08-01 18:17 评论0 收藏0
JavaScript 优雅的实现方式包含你可能不知道的知识点

摘要：优点简单粗暴，直接调用缺点兼容性不太好，不过的话都支持你可能不知道的前端知识点对象和的方法。下面从深层次剖析一下对于开始的两个赋值语句，，，相当于，而显然等于。同理可以分析第三个赋值语句有些东西很好用，但是你未必知道；有些东西你可能用过，但是你未必知道原理。实现一个目的有多种途径，俗话说，条条大路通罗马。很多内容来自平时的一些收集以及过往博客文章底下的精彩评论，收集整理拓展一波，发...

Zhuxy 2019-08-29 14:06 评论0 收藏0
JavaScript 优雅的实现方式包含你可能不知道的知识点

摘要：优点简单粗暴，直接调用缺点兼容性不太好，不过的话都支持你可能不知道的前端知识点对象和的方法。下面从深层次剖析一下对于开始的两个赋值语句，，，相当于，而显然等于。同理可以分析第三个赋值语句有些东西很好用，但是你未必知道；有些东西你可能用过，但是你未必知道原理。实现一个目的有多种途径，俗话说，条条大路通罗马。很多内容来自平时的一些收集以及过往博客文章底下的精彩评论，收集整理拓展一波，发...

KaltZK 2019-08-21 18:21 评论0 收藏0