Web控制台
Web控制台是一种工具, 主要用于记录与网页相关的信息, 例如:网络请求, javascript, 安全错误, 警告, CSS等。它使我们能够通过在页面内容中执行javascript表达式来与网页进行交互。
控制台对象
在javascript中, 控制台是提供访问浏览器调试控制台的对象。我们可以使用以下方法在Web浏览器中打开控制台:Ctrl + Shift + K用于Windows和Command + Option + K对于Mac。控制台对象为我们提供了几种不同的方法, 例如:
- log()
- error()
- warn()
- clear()
- time()和timeEnd()
- table()
- count()
- group()和groupEnd()
- 自定义控制台日志
console.log()
主要用于将输出记录(打印)到控制台。我们可以在log()中放入任何类型, 可以是字符串, 数组, 对象, 布尔值等。
// console.log() method
console.log( 'abc' );
console.log(1);
console.log( true );
console.log( null );
console.log(undefined);
console.log([1, 2, 3, 4]);
// array inside log
console.log({a:1, b:2, c:3});
// object inside log
输出如下:
文章图片
console.error()
用于将错误消息记录到控制台。在代码测试中很有用。默认情况下, 错误消息将以红色突出显示。
// console.error() method
console.error( 'This is a simple error' );
输出如下:
文章图片
console.warn()
用于将警告消息记录到控制台。默认情况下, 警告消息将以黄色突出显示。
// console.warn() method
console.warn( 'This is a warning.' );
【JavaScript中的控制台对象用法详细指南】输出如下:
文章图片
console.clear()
用于清除控制台。控制台将被清除, 如果使用Chrome, 则会打印一个简单的叠加文字, 例如:"控制台已清除", 而在Firefox中则不会返回任何消息。
// console.clear() method
console.clear();
输出如下:
文章图片
console.time()和console.timeEnd()
每当我们想知道块或函数花费的时间时, 我们就可以利用javascript控制台对象提供的time()和timeEnd()方法。它们带有必须相同的标签, 并且里面的代码可以是任何东西(函数, 对象, 简单控制台)。
// console.time() and console.timeEnd() method
console.time( 'abc' );
let fun =function (){
console.log( 'fun is running' );
}
let fun2 = function (){
console.log( 'fun2 is running..' );
}
fun();
// calling fun();
fun2();
// calling fun2();
console.timeEnd( 'abc' );
在上面的代码示例中, 我们可以看到标签为" abc", 这对于time()和timeEnd()方法都是相同的。如果我们增加这些方法定义的块内的代码量, 那么时间将增加。还应该记住, 返回控制台的时间将以毫秒为单位, 并且每次刷新页面时可能会有所不同。
输出如下:
文章图片
console.table()
这种方法使我们可以在控制台内生成表。输入必须是一个数组或一个将显示为表格的对象。
// console.table() method
console.table({ 'a' :1, 'b' :2});
输出如下:
文章图片
console.count()
此方法用于计算此计数方法所击中的功能的数量。
// console.count() method
for (let i=0;
i<
5;
i++){
console.count(i);
}
输出如下:
文章图片
console.group()和console.groupEnd()
控制台对象的group()和groupEnd()方法允许我们将内容分组在一个单独的块中, 该块将缩进。就像time()和timeEnd()一样, 它们也接受具有相同值的label。
// console.group() and console.groupEnd() method
console.group( 'simple' );
console.warn( 'warning!' );
console.error( 'error here' );
console.log( 'vivi vini vici' );
console.groupEnd( 'simple' );
console.log( 'new section' );
输出如下:
文章图片
自定义控制台日志
用户可以将样式添加到控制台日志中, 以使日志自定义。语法是将css样式作为参数添加到日志中, 这将替换日志中的%c, 如下例所示。
// Custom Console log example
const spacing = '10px' ;
const styles =
`padding: ${spacing};
background-color: white;
color: green;
font-style:
italic;
border: 1px solid black;
font-size: 2em;
`;
console.log( '%cGeeks for Geeks' , styles);
输出如下:
文章图片
控制台侧栏
控制台侧边栏用于组织日志, 并提供清晰的调试体验。
文章图片
仅使用控制台侧栏过滤错误后:
文章图片
仅使用控制台侧栏过滤警告后:
文章图片
推荐阅读
- 如何打包Angular应用到生产环境()
- Scala函数基础(解析和用法示例)
- Android基本控件之RadioGroup
- Android上sshd的使用
- Android上传Base64图片,图片变成黑色一块的问题
- 安卓实现QQ强制下线----来自第一行代码
- 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)
- Android 实现页面的延时跳转
- Android中的自定义控件