控制台console的一些使用方法

最新推荐文章于 2024-03-09 09:58:58 发布

风向北吹i

最新推荐文章于 2024-03-09 09:58:58 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/qq_40576178/article/details/111299707

版权

console.log console.dir 样式输出分组输出 JavaScript调试

关键词由CSDN通过智能技术生成

我们通过使用console.log()形式输入信息。但是，它也可以输出别的形式查看信息。

比如：我们有时候想查看这个对象身上有什么属性或者方法，就可以通过对象方式输出；如果我们想查看不同样式的信息，可以通过设置样式形式输出；如果我们想查看类似数组形式的信息，可以使用以一组的形式输出

下图为例：

在这里插入图片描述

对象形式的输出：展开箭头即看到对象身上所有的属性和方法

1、对象形式语法

console.dir(); （找到那个元素，通过dir输出）

		var p = document.querySelector('p');
        console.dir(p);

2、样式形式语法

console.log(’%c%s’, ‘css样式’, 输出的信息);

%c代表样式，%s代表输出的信息

console.log('%c%s','color:purple;font-weight:700','你真美');

3、以组的形式语法

console.group(“第一组”); （默认以嵌套形式进行分组）
console.log(1);

		console.group("第一组");
        console.log(1);
        console.log(2);
        console.log(3);
        console.group("第二组");
        console.log(4);
        console.log(5);
        console.log(6);

以上代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>你好</p>
    <script>
        //1、对象形式输出
        var p = document.querySelector('p');
        console.dir(p);

        //2、样式形式输出
        console.log('%c%s','color:purple;font-weight:700','你真美');
        
        //3、分组形式输出
        console.group("第一组");
        console.log(1);
        console.log(2);
        console.log(3);
        console.group("第二组");
        console.log(4);
        console.log(5);
        console.log(6);
 </script>
</body>
</html>

风向北吹i

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
控制台console的一些使用方法

我们通过使用console.log()形式输入信息。但是，它也可以输出别的形式查看信息。比如：我们有时候想查看这个对象身上有什么属性或者方法，就可以通过对象方式输出；如果我们想查看类似数组形式的信息，可以使用以一组的形式输出；如果我们想查看不同样式的信息，可以通过设置样式形式输出下图为例：对象形式的输出：展开箭头即看到对象身上所有的属性和方法1、对象形式语法console.dir(); （找到那个元素，通过dir输出） var p = document.querySelector('p');
复制链接

扫一扫