chrome console.log API
console.log(object [, object, ...])
Displays a message in the console. You pass one or more objects to this method, each of which are evaluated and concatenated into a space-delimited string. The first parameter you pass to log()
may contain format specifiers, a string token composed of the percent sign (%
) followed by a letter that indicates the formatting to be applied.
Dev Tools supports the following format specifiers:
Format Specifier | Description |
---|---|
%s |
Formats the value as a string. |
%d or %i |
Formats the value as an integer. |
%f |
Formats the value as a floating point value. |
%o |
Formats the value as an expandable DOM element (as in the Elements panel). |
%O |
Formats the value as an expandable JavaScript object. |
%c |
Formats the output string according to CSS styles you provide. |
Basic example:
console.log("App started");
An example that uses string (%s
) and integer (%d
) format specifiers to insert the values contained by the variables userName
and userPoints
:
console.log("User %s has %d points", userName, userPoints);
An example of using the element formatter (%o
) and object formatter (%O
) on the same DOM element:
console.log("%o, %O", document.body, document.body);
The following example uses the %c
format specifier to colorize the output string:
console.log("%cUser %s has %d points", "color:orange; background:blue; font-size: 16pt", userName, userPoints);
console.profile([label])
When the Chrome DevTools is open, calling this function starts a JavaScript CPU profile with an optional label.To complete the profile, call console.profileEnd()
. Each profile is added to the Profiles tab.
In the following example a CPU profile is started at the entry to a function that is suspected to consume excessive CPU resources, and ended when the function exits.
function processPixels() { console.profile("Processing pixels"); // later, after processing pixels console.profileEnd();}
console.profileEnd()
Stops the current JavaScript CPU profiling session, if one is in progress, and prints the report to the Profiles panel.
console.profileEnd()
See console.profile() for example use.
console.time(label)
Starts a new timer with an associated label. When console.timeEnd()
is called with the same label, the timer is stopped the elapsed time displayed in the Console. Timer values are accurate to the sub-millisecond.
console.time("Array initialize");var array= new Array(1000000);for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object();};console.timeEnd("Array initialize");
Note: The string you pass to the time()
and timeEnd()
methods must match for the timer to finish as expected.
console.timeEnd(label)
Stops the timer with the specified label and prints the elapsed time.
For example usage, see console.time().
console.timeStamp([label])
This method adds an event to the Timeline during a recording session. This lets you visually correlate your code generated time stamp to other events, such as screen layout and paints, that are automatically added to the Timeline.
See Marking the Timeline for an example of using console.timeStamp()
.
console.trace(object)
Prints a stack trace from the point where the method was called, including links to the specific lines in the JavaScript source. A counter indicates the number of times that trace()
method was invoked at that point, as shown in the screen shot below.
It is also possible to pass in arguments to trace(). For example:
console.warn(object [, object, ...])
This method is like console.log()
but also displays a yellow warning icon along with the logged message.
console.warn("User limit reached! (%d)", userPoints);
debugger
The global debugger
function causes Chrome to stop program execution and start a debugging session at the line where it was called. It is equivalent to setting a "manual" breakpoint in the Sources tab of Chrome DevTools.
Note: The debugger
command is not a method of the console
object.
In the following example the JavaScript debugger is opened when an object's brightness()
function is invoked:
brightness : function() { debugger; var r = Math.floor(this.red*255); var g = Math.floor(this.green*255); var b = Math.floor(this.blue*255); return (r * 77 + g * 150 + b * 29) >> 8;}
chrome console.log API的更多相关文章
- Chrome & console.log & color & js
Chrome & console.log & color & js console.log & color // OK log(`%cchat_list =\n%c${ ...
- chrome console.log失效
把红框里的内容去掉就可以了 那个框是过滤..
- console.log()显示图片以及为文字加样式
有兴趣的同学可以文章最后的代码复制贴到控制台玩玩. Go for Code 在正常模式下,一般只能向console 控制台输出简单的文字信息.但为了把信息输出得更优雅更便于阅读,除了cosole.lo ...
- js console.log color all in one
js console.log color all in one console.log color Chrome console.log 语法 / grammar %c, %s, css style ...
- Getting console.log output with Selenium Python API bindings
持久化存储 Getting console.log output from Chrome with Selenium Python API bindings - Stack Overflow http ...
- Chrome console & Command Line API
Chrome console & Command Line API $ && $$ querySelector querySelectorAll Command Line AP ...
- 小谈chrome调试命令:console.log的使用
相信从事前端开发的您,一定不会陌生Mozilla五星级推荐的一款插件:firebug,它是如此强大,乃至于我们可以很方便地调试DHTML的近乎所有元素.而在它深邃的机体里,还存有一个命令:consol ...
- 网页console console.log 用法 Chrome F12
#########sample 0 https://www.cnblogs.com/xiaozong/p/4961929.html https://blog.csdn.net/shanliangliu ...
- 实验吧-密码学-js(Chrome用console.log调试js)
题目就是js,可能就是一个js的代码,查看源码并复制,在Chrome中打开网页,审查元素. 将复制的代码输入,将eval改成console.log,再回车执行,就得到一段js代码. 代码中有Unico ...
随机推荐
- sql优化实战:从1353秒到135秒(删除索引+修改数据+重建索引)
最近在优化日结存储过程,日结存储过程中大概包含了20多个存储过程. 发现其有一个存储过程代码有问题,进一步发现结存的数据中有一个 日期字段business_date 是有问题的,这个字段对应的类型是v ...
- ssh整合思想初步 structs2 Spring Hibernate三大框架各自要点
Web层用Structs2的action Service层用Spring的IoC和aop以及JdbcTemplate或者Transaction事务(创建对象及维护对象间的关系) Dao层用Hibern ...
- UIViewController 的 edgesForExtendedLayout、automaticallyAdjustsScrollViewInsets属性
1.有时你命名设置了某控件的y坐标为0,确总是被导航栏遮挡住,如下: UILabel *label = [[UILabel alloc] init]; label.text = @"请 ...
- 函数的扩展——箭头函数this的使用
箭头函数中的this指向的是定义时的this,而不是执行时的的this . 举例: 案例中,我们的obj对象中有一个属性x和一个属性show( )方法,show( )通过this打印出x的值,结果是u ...
- 使用三层交换配置DHCP为不同VLAN分配IP地址
三层交换的原理以及DHCP的原理,作者在这里就不详细的解释了,在这里通过一个案例来了解使用三层交换做DHCP服务器,并为不同网段分配IP地址.在生产环境中,使用路由器或交换机做DHCP服务器要常见一些 ...
- python3和Python2的区别
一.print函数 python2 的 print 声明已经被 print() 函数取代了,这意味着我们必须包装我们想打印在小括号中的对象 二.通过input()解析用户的输入 python3中inp ...
- 再生龙备份还原linux系统
相关下载: Clonezilla再生龙:http://sourceforge.net/projects/clonezilla/files/clonezilla_live_stable/ tuxboot ...
- python入门:if和else的基本用法
#!/usr/bin/env python # -*- coding:utf-8 -*- #2.X用raw_input,3.X用input #if和else的基本用法 name = input(&qu ...
- Python3学习了解日记
# 单行注释 ''' 多行注释 ''' """ 这个也是多行注释 """ ''' 声明变量 Python 中的变量不需要声明.每个变量在使用 ...
- python3 发邮件 smtplib & email 库
嗨 实现了用163发送到qq的功能,遗留了两个问题: 1. 接收者list会报错:update:因为list[]会传递过去一个真的[]list,改成如下就可以了: before: maillist=[ ...