草庐IT

记录-关于console你不知道的那些事

林恒 2023-04-11 原文

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

 

了解 console

● 什么是 console ?

console 其实是 JavaScript 内的一个原生对象

内部存储的方法大部分都是在浏览器控制台输出一些内容

并且还提供了很多的辅助方法

● 最常见的 console

我们在开发中, 其实很多时候还是用到 console 的

尤其是在学习的过程中

但是我们大多只是使用一个 console.log()

其他的大家可能了解的比较少

●  全部的 console

○ 你可曾想过, console 真的只有一个 log 吗 ?

● 接下来咱们就详细介绍一些 cosnole 里面的内容

上面的不重要, 看看得了

console.log

● 这个不用多说了, 只要你还是一个程序员

● 或者你是个预备程序员, 你都不可能不知道 log 这个方法

● 语法: console.log('内容')

● 作用: 在浏览器控制台输出一段内容

console.log('hello world')

你真的了解全部的 console.log 吗 ?

1.  多个参数

● 首先, console.log() 这个方法可以传递多个参数

● 并且会把这些个参数在一起输出

2.  占位符

● 在输出的内容中, 是可以添加占位符的

● 来不及解释了, 直接上车吧

● 例子 :

● 这是个什么玩意 ? 为什么会这样呢 ?

● 既然你诚心诚意的发问了, 那可爱又迷人的我就大发慈悲的告诉你

○ 当第一个参数内有 占位符 的时候

○ 那么后面的参数会按照顺序依次填充占位符

○ 多出来的才会直接输出

不就是一个占位符吗, 太鸡肋了

● 谁说我们只能添加一个占位符

● 我们命名可以添加很多个占位符的, 后面按照顺序依次插入内容

我是说不就一个吗, 太鸡肋了

我是说不就一个吗, 太鸡肋了

● 谁说我们就一个占位符的, 我们有好多个占位符的

○ %s : 字符串

○ %d : 整数

○ %f : 浮点数

○ %o : 对象的连接

○ %c : css 格式字符串

● 注意哦 : 当你需要使用的时候, 要把数据和占位符对应哦, 不然解析会出现问题的

 按照规则规规矩矩的填充才是最好的

● 你看好不好玩, 可以设置各种各样的 css 样式

这个并不重要, 了解一下就行

 

console.info

● 这个方法基本和 log 是一样的, 就是打印信息

● 并且占位符的用法也是一样的

console.debug

● 抱歉, 这个用法和 log 也是一样的

● 换句话说, 你可以吧 log , info , debug 当做成一个东西来使用

● 因为 log 可能字母更少, 所以用的更多

最简单的话解释, info 和 debug 你不知道也没事

console.dir

● 这个和 log 很像, 但是又不一样

● PS : 你说了什么, 又好像什么都没说

有些数据, 他的表现形式和对象本身是不一样的

比如 函数function fn() {}

表现出来就是一个函数的样子, 有个小括号写参数, 有个大括号写代码段

但是本身的对象属性不是这样的, 而是

{

name: 'fn',

...

}

因为函数本身也是个对象

再比如 DOM对象 div

表现出来的是

 
这样的标签

 

但是本身的对象属性不是这样的, 而是

{

tagName: 'div',

...

}

● 所以, 这个时候, log 和 dir 的区别就出现了

○ log : 是为了在控制台打印出一些信息, 主要用作提示作用

○ dir : 是为了在控制台打印该对象的所有属性和方法

● 最简单的说

○ 如果你想看到一个内容的表现形式, 那么你就使用 log

○ 如果你想看到一个内容最详细的所有信息, 那么你就使用 dir

这个也不重要, 不知道也没事

console.table

● 我们有时候经常会打印一些对象数据类型, 这时候就会出现问题了

● 因为浏览器解析引擎的执行顺序问题

○ 先打印对象, 后添加内容

○ 但是你打印出来看到的内容会有后添加的内容

○ 你看, 我们明明是后添加的 age 属性, 但是在前置打印的 obj 对象内依旧看到了

○ 这就会导致一个问题, 有的时候我们在打印的时候, 明明看到了内容

○ 但是一旦我去获取, 拿到的就是 undefined

○ 导致我的代码出现问题

● 那可怎么办呢 ?

○ 不如改用 table 试试看

○ 他其实就是用表格的形式显示你对象内的所有内容, 并且是实时显示

● 这样的话, 不光看的清楚, 而且不会出现错乱的情况

不过话说回来, 这个并不重要

console.count

● 这是个非常有意思的东西

● 看名字就知道, 这是一个类似计数器一样的打印

● 没错, 就是一个计数器打印

用法一 : 基础使用

● 语法: console.count()

● 作用: 会依次叠加你的输出次数, 默认标记叫做 default

console.info

● 这个方法基本和 log 是一样的, 就是打印信息

● 并且占位符的用法也是一样的

console.debug

● 抱歉, 这个用法和 log 也是一样的

● 换句话说, 你可以吧 log , info , debug 当做成一个东西来使用

● 因为 log 可能字母更少, 所以用的更多

最简单的话解释, info 和 debug 你不知道也没事

console.dir

● 这个和 log 很像, 但是又不一样

● PS : 你说了什么, 又好像什么都没说

有些数据, 他的表现形式和对象本身是不一样的

比如 函数function fn() {}

表现出来就是一个函数的样子, 有个小括号写参数, 有个大括号写代码段

但是本身的对象属性不是这样的, 而是

{

name: 'fn',

...

}

因为函数本身也是个对象

再比如 DOM对象 div

表现出来的是

 
这样的标签

 

但是本身的对象属性不是这样的, 而是

{

tagName: 'div',

...

}

● 所以, 这个时候, log 和 dir 的区别就出现了

○ log : 是为了在控制台打印出一些信息, 主要用作提示作用

○ dir : 是为了在控制台打印该对象的所有属性和方法

● 最简单的说

○ 如果你想看到一个内容的表现形式, 那么你就使用 log

○ 如果你想看到一个内容最详细的所有信息, 那么你就使用 dir

这个也不重要, 不知道也没事

console.table

● 我们有时候经常会打印一些对象数据类型, 这时候就会出现问题了

● 因为浏览器解析引擎的执行顺序问题

○ 先打印对象, 后添加内容

○ 但是你打印出来看到的内容会有后添加的内容

○ 你看, 我们明明是后添加的 age 属性, 但是在前置打印的 obj 对象内依旧看到了

○ 这就会导致一个问题, 有的时候我们在打印的时候, 明明看到了内容

○ 但是一旦我去获取, 拿到的就是 undefined

○ 导致我的代码出现问题

● 那可怎么办呢 ?

○ 不如改用 table 试试看

○ 他其实就是用表格的形式显示你对象内的所有内容, 并且是实时显示

● 这样的话, 不光看的清楚, 而且不会出现错乱的情况

不过话说回来, 这个并不重要

console.count

● 这是个非常有意思的东西

● 看名字就知道, 这是一个类似计数器一样的打印

● 没错, 就是一个计数器打印

用法一 : 基础使用

● 语法: console.count()

● 作用: 会依次叠加你的输出次数, 默认标记叫做 default

用法二 : 传递标记参数

● 语法: console.count('标记')

● 你也可以传递一个参数来做标记

○ 不同的标记会产生新的计数起点

○ 并且互相并不干扰

● 看到了没, 以后在想用计数器, 就不需要自己去定义变量了, 直接用这个就可以了

不过这个也没那么重要, 用不用无所谓

 

console.countReset

● 这个就不用解释了吧

● 不不不, 你还是解释一下吧

● 你确定吗 ? 这不仅是侮辱我, 还是在侮辱我的智商

● 你 TM 侮辱我半天了

 

 

● 其实很简单的, 就是把刚才 console.count 的计数归零而已

○ 毕竟 reset 翻译过来叫做重置

● 老子知道, 能不能快到上演示, 别逼我动手

● 直接看演示吧

● 顺便和你说一下, 不光默认的计数器可以清除, 带标记的也可以哦

● 不用你说, 老子知道, 这个又不重要了是吧

● 没有没有, 不过实话实说, 只不过用处没那么大而已

用法一 : 基础使用

● 语法: console.count()

● 作用: 会依次叠加你的输出次数, 默认标记叫做 default

用法二 : 传递标记参数

● 语法: console.count('标记')

● 你也可以传递一个参数来做标记

○ 不同的标记会产生新的计数起点

○ 并且互相并不干扰

● 看到了没, 以后在想用计数器, 就不需要自己去定义变量了, 直接用这个就可以了

不过这个也没那么重要, 用不用无所谓

console.countReset

● 这个就不用解释了吧

● 不不不, 你还是解释一下吧

● 你确定吗 ? 这不仅是侮辱我, 还是在侮辱我的智商

● 你 TM 侮辱我半天了

● 其实很简单的, 就是把刚才 console.count 的计数归零而已

○ 毕竟 reset 翻译过来叫做重置

● 老子知道, 能不能快到上演示, 别逼我动手

● 直接看演示吧

● 顺便和你说一下, 不光默认的计数器可以清除, 带标记的也可以哦

● 不用你说, 老子知道, 这个又不重要了是吧

● 没有没有, 不过实话实说, 只不过用处没那么大而已

console.warn

● 这个没啥可说的, 也是打印信息

● 只不过是以 警告 的形式出现打印的信息

console.error

● 和上面的一样, 也是打印信息

● 只不过是以 报错 的形式出现打印的信息

console.assert

● 这个和上面一个也差不多

● 同样是出现一个错误信息

● 只不过, 他需要两个参数, 根据第一个参数的对错来决定是否出现错误信息

● 你 TM 是有病吗 ?

● 是嫌我代码报的错不够多吗 ?

● 是来恶心我的吗 ?

如果你觉得没用, 那就当没看过就好了

不重要, 不重要

console.clear

● 最后一个了

● 这个我就不说了, 你自己去体会一下吧

本文转载于:

https://juejin.cn/post/7218032493656064061

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

有关记录-关于console你不知道的那些事的更多相关文章

  1. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手;我正在运行一些rspec测试,但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音?我仔细检查了环境是否设置为:test,这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  2. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型,即Invoice和Invoice_details。一个Invoice_details属于Invoice,一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  3. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord,它正在融化我的大脑。deletefromtablewhereid有什么想法吗?我想做的是限制表中的行数。所以,我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看,您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  4. Ruby 守护进程导致 ActiveRecord 记录器 IOError - 2

    我目前正在用Ruby编写一个项目,它使用ActiveRecordgem进行数据库交互,我正在尝试使用ActiveRecord::Base.logger记录所有数据库事件具有以下代码的属性ActiveRecord::Base.logger=Logger.new(File.open('logs/database.log','a'))这适用于迁移等(出于某种原因似乎需要启用日志记录,因为它在禁用时会出现NilClass错误)但是当我尝试运行包含调用ActiveRecord对象的线程守护程序的项目时脚本失败并出现以下错误/System/Library/Frameworks/Ruby.frame

  5. ruby - EventMachine - 你怎么知道你是否落后了? - 2

    我正在研究使用EventMachine支持的twitter-streamruby​​gem来跟踪和捕获推文。我对整个事件编程有点陌生。我如何判断我在事件循环中所做的任何处理是否导致我落后?有没有简单的检查方法? 最佳答案 您可以通过使用周期性计时器并打印出耗时来确定延迟。如果您使用的是1秒的计时器,您应该已经过了大约1秒,如果它更长,您就知道您正在减慢react器的速度。@last=Time.now.to_fEM.add_periodic_timer(1)doputs"LATENCY:#{Time.now.to_f-@last}"@

  6. ruby-on-rails - 在 Rails 中更高效地查找或创建多条记录 - 2

    我有一个应用需要发送用户事件邀请。当用户邀请friend(用户)参加事件时,如果尚不存在将用户连接到该事件的新记录,则会创建该记录。我的模型由用户、事件和events_user组成。classEventdefinvite(user_id,*args)user_id.eachdo|u|e=EventsUser.find_or_create_by_event_id_and_user_id(self.id,u)e.save!endendend用法Event.first.invite([1,2,3])我不认为以上是完成我的任务的最有效方法。我设想了一种方法,例如Model.find_or_cr

  7. ruby-on-rails - 关于 Ruby 的一般问题 - 2

    我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件,但有一段代码我不完全理解,我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法,但我在插件的任何地方都找不到定义为常量的CLASS_METHODS,而且我也不确定是什么here,并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕,我将不胜感激。谢谢-C 最佳答案 这是一个异端。http://en.wikipedia

  8. ruby - 在模块/类之间共享全局记录器 - 2

    在许多ruby​​类之间共享记录器实例的最佳(正确)方法是什么?现在我只是将记录器创建为全局$logger=Logger.new变量,但我觉得有更好的方法可以在不使用全局变量的情况下执行此操作。如果我有以下内容:moduleFooclassAclassBclassC...classZend在所有类之间共享记录器实例的最佳方式是什么?我是以某种方式在Foo模块中声明/创建记录器还是只是使用全局$logger没问题? 最佳答案 在模块中添加常量:moduleFooLogger=Logger.newclassAclassBclassC..

  9. ruby - Sinatra 中的全局救援和日志记录异常 - 2

    如何在出现异常时指定全局救援,如果您将Sinatra用于API或应用程序,您将如何处理日志记录? 最佳答案 404可以在not_found方法的帮助下处理,例如:not_founddo'Sitedoesnotexist.'end500s可以通过调用带有block的错误方法来处理,例如:errordo"Applicationerror.Plstrylater."end错误的详细信息可以通过request.env中的sinatra.error访问,如下所示:errordo'Anerroroccured:'+request.env['si

  10. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录? - 2

    例如,假设我有一个名为Products的模型,并且在ProductsController中,我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下,在product_listView中,用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是,每次用户选择新的order_by过滤器时,rails是否必须查询,或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序?有没有一种方法可以编写它,以便在用户排序时rails不会重新查询结果

随机推荐