console.log()和console.dir()的区别

Dear 丶 2022-12-20 03:06 112阅读 0赞

前言：本博文主要讲解console.log()和console.dir()的区别。

### 文章目录 ###

*   *  一、案例
     *  二、运行效果图
     *  三、总结

## 一、案例 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>console.log()和console.dir()的区别</title>
        <script> window.onload = function() { var oBu = document.getElementsByTagName('button'); oBu[0].onclick = function(event) { console.log(event.target, 'button1'); } oBu[1].onclick = function(event) { console.dir(event.target, 'button2'); } } </script>
    </head>
    
    <body>
        <button>console.log打印触发对象</button>
        <button>console.dir印触发对象</button>
    
    </body>
    
    </html>

## 二、运行效果图 ##

![在这里插入图片描述][20201110115213717.png_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDM0Mzg0_size_16_color_FFFFFF_t_70_pic_center]

## 三、总结 ##

*  `console.log()`可以取代`alert()`或`document.write()`，在网页脚本中使用`console.log()`时，会在浏览器控制台打印出信息
 *  `console.dir()`可以显示一个对象所有的属性和方法。

**注意：当我们需要在对象找方法的时候可以使用`console.dir()`进行打印。**

[20201110115213717.png_pic_center]: /images/20221120/625adf00be5d40209e5a8b5275045768.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDM0Mzg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/b756fb9d3d224696af622340f27a61e4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，112人围观）

还没有评论，来说两句吧...

相关阅读

相关 &和&&、|和||的区别

目录一.踩坑二.&和&&、|和||的区别 1.介绍 2.区别 3.总结 -------------------- 一.踩坑今天在编如下代码的时候：

￡神魔★判官ぃ/ 2023年09月26日 09:38/ 0 赞/ 123 阅读

相关 &和&&的联系和区别?|和||的区别与联系?

&和&&的联系和区别?|和||的区别与联系? 联系: &和&&都可以用做逻辑与运算当运算符两边的表达式的结果或操作数都为true时,整个运算结果为true,否则

系统管理员/ 2023年05月29日 03:14/ 0 赞/ 41 阅读

相关 #和$的区别

MyBatis：\和$的区别一、结论　　\\{\}：占位符号，好处防止sql注入　　$\{\}：sql拼接符号二、具体分析动态 SQL 是 my

拼搏现实的明天。/ 2023年01月23日 05:52/ 0 赞/ 58 阅读

相关 #{}和${}的区别

\\{\}获取参数的内容，支持索引获取，param1获取指定位置参数，并且SQL使用？占位符字符串拼接不使用？，默认找 \{\}字符串拼接不使

拼搏现实的明天。/ 2022年10月02日 08:51/ 0 赞/ 386 阅读

相关 &和&&的区别

&和&&都可以用作逻辑与的运算符，表示逻辑与（and），当运算符两边的表达式的结果都为true时，整个运算结果才为true，否则，只要有一方为false，则结果为false。

本是古典何须时尚/ 2022年06月18日 04:53/ 0 赞/ 326 阅读

相关 "&"和"&&"、"|"和"||"的区别

一、逻辑运算：与操作：“&”表示所有的判断条件都要进行判断，“&&”如果前面的条件返回的是false，那么后面的条件将不再执行，最终的结果就是false。或操作：“

青旅半醒/ 2022年06月09日 10:47/ 0 赞/ 495 阅读

相关 &和&&的区别

&和&&都可以用作逻辑与的运算符，表示逻辑与（and），当运算符两边的表达式的结果都为 true时，整个运算结果才为 true，否则，只要有一方为 false，则结果为 fal

﹏ヽ暗。殇╰゛Y/ 2022年05月11日 01:44/ 0 赞/ 461 阅读

相关 &和&&、|和||的区别

与(&,&&)和或(|,||)的区别使用与操作的时候，要求前后几个表达式的内容都是true,最终结果才是true，如果有一个是false，则最终结果就是false；

た入场券/ 2022年04月14日 06:50/ 0 赞/ 532 阅读

相关 /,./和../的区别

小知识点还是很重要的，不常用的总是记不住。 1、./是[当前目录][Link 1] 2、../是父级目录 3、/是根目录 [Link 1]: http

喜欢ヅ旅行/ 2021年09月18日 10:52/ 0 赞/ 891 阅读

相关 &和&& , “|”和“||”的区别

1. &和&&的区别：单&时，左边无论真假，右边都进行运算；双&时，如果左边为真，右边参与运算，如果左边为假，那么右边不参与运算。

╰半橙微兮°/ 2021年09月17日 11:02/ 0 赞/ 729 阅读