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 ...
随机推荐
- 为什么我的C4C Service Request没办法Release到ERP?
问题 UI上发现找不到Release to ERP的按钮: 但是在UI Designer里是能看到这个按钮的.检查其Visible的属性,绑到了一个Calculated Rule上面: 发现其显示在r ...
- MVC批量上传文件(使用uploadify)
<script src="JS/jquery-1.8.3.js"></script> <script src="uploadify/jque ...
- springboot 测试
本次测试使用的是springboot 中的测试 1.(对service 的测试)下面的测试.将会启动容器进行测试 @RunWith(SpringRunner.class) @SpringBootTes ...
- axios的post请求方法---以Vue示例
Axios向后端提交数据的参数格式是json,而并非用的是form传参,post表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使 ...
- NPM下载模块包说明
博主对npm包安装收集了各种资料和实践后对它们之间的差异整理,写下这篇文章避免自己忘记,同时也给node.js猿友一点指引. 我们在使用 npm install 安装模块的模块的时候 ,一般会使用下面 ...
- java基础—多态(动态加载)
一.面向对象最核心的机制——动态绑定,也叫多态
- 功能强大的CURL
linux下的curl,有着非同一般的魔力,有人称它为下载工具,我更倾向于叫它“文件传输工具”因为它好像无所不能.从常见的 FTP, HTTP, TELNET, 等协议,还支持代理服务器,cook ...
- JS数据结构与算法--双向链表
双向链表中链接是双向的:一个链向下一个元素,另一个链向上一个元素,如下图所示: 双向链表结构代码如下: class Node { constructor(element) { this.element ...
- 【数学 技巧】divisor
没考虑重复lcm处理被卡TLE没A真是可惜 题目大意 $n$为$k-可表达的$当且仅当数$n$能被表示成$n$的$k$个因子之和,其中$k$个因子允许相等. 求$[A,B]$之间$k-可表达$的数的个 ...
- python入门:CONTINUE 的作用 跳出本次循环后,重新开始循环
#!/usr/bin/env python # -*- coding:utf-8 -*- # CONTINUE 的作用 跳出本次循环后,重新开始循环 import time while True: ' ...