我们期待打印出的dom效果如下:

但某些时候,打印出来,或者通过$0、$1、document.getElementById('####') 等方式打印出来的效果如下:

根据第一幅图我们不难看出,当打印出的是一个数组时,就chrome console就可以解析出我们理想的数据结构,所以,如果出现第二种时,我们可以套上一层数组 [ ] 再打印即可

如, [document.getElementById('app')] ,  如图所示:

关于 Chrome Console 查看DOM详情细节的奇思淫巧的更多相关文章

  1. Chrome插件Visual Event查看Dom元素绑定事件的利器

    找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...

  2. 前端开发chrome console的使用 :评估表达式 – Break易站

    本文内容来自:chrome console的使用 :评估表达式 – Break易站 从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态. DevTools 控制台让您可通过特定方 ...

  3. 你所不了解的javascript操作DOM的细节知识点(一)

    你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...

  4. chrome console的使用 : 异常和错误的处理 – Break易站

    本文内容来自:chrome console的使用 : 异常和错误的处理 – Break易站 利用 Chrome DevTools 提供的工具,您可以修复引发异常的网页和在 JavaScript 中调试 ...

  5. chrome控制台查看控件有没绑定事件[转]

    chrome控制台查看btn_comment_submit控件有没绑定事件 function lookEvents (elem) {     return $.data ? $.data( elem, ...

  6. chrome console 调试xpath

    chrome console F12->$x(“//title”) [<title>Online Tools for Software Developers (Free)</t ...

  7. 通过chrome console 快速获取网页连接

    通过chrome console 快速获取网页连接 var ip = document.getElementsByClassName("jDesc"); var str = &qu ...

  8. 在chrome console添加jQuery支持

    有时候想在chrome console使用jq,那么下面这段代码就可以完美解决问题了. var script = document.createElement('script');script.src ...

  9. 浅析微信支付:公众平台卡券功能开通、HTML5线上发券(JS-SDK接口)、查看卡券详情

    本文是[浅析微信支付]系列文章的第十六篇,主要讲解如何使用微信公众平台的卡券功能.如何使用HTML5在网页展示用户领券以及微信卡券和商户平台代金券的关系. 浅析微信支付系列已经更新十六篇了哟-,没有看 ...

随机推荐

  1. WordPress 如何搜索文章内容而不搜索页面

    如何在WordPress 中只搜索指定的文章类型?在http://www.wpbeginner.com上了解到通过WP提供的钩子"pre_get_posts"方法可能实现 该钩子方 ...

  2. SecureRandom-随机数的生成

    随机数:算法+种子 随机数据不随机 学习了:https://www.cnblogs.com/deng-cc/p/8064481.html StringBuffer buffer = new Strin ...

  3. Database Setup

    Database Setup This library has been developed so that you can use any type of backend storage; rela ...

  4. Thread-Local Storage for C99

    线程本地存储(TLS)是一种机制,通过这样的机制进行变量分配.在每一个现存线程都有一个实例变量.这样的执行模型GCC用来实现这个,起源于IA-64处理器,可是已经被迁移到其它的处理器.它须要大量的支持 ...

  5. CSS半透明兼容写法

    filter: Alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; 例如: background:#A5CD40; filter: Alpha(opac ...

  6. NYoj-119-士兵杀敌(3)-RMQ算法

    士兵杀敌(三) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 描写叙述 南将军统率着N个士兵,士兵分别编号为1~N,南将军常常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进 ...

  7. ios backgroundColor

    loginView.backgroundColor=[UIColorcolorWithHue:0saturation:0brightness:0.9alpha:0.85]; 可随意调

  8. Vim使用进阶

    作为一个使用vim挺长时间的人,现在来写这篇东西确实是尴尬的,就像很多大神们说的,vim是世界上最好用的编辑器,没有之一.然后前两天又重新看了看vim的那些功能和使用方法,更觉得这么长时间使用vim却 ...

  9. 谈一谈chrome浏览器使用

    F3或Ctrl+F5: 查找本网页里面的内容,匹配到即可高亮. F6:回到地址栏 Ctrl+J:显示下载内容 Ctrl+N: 新建一个标签页 F10:选项 F11:显示全屏 F12:调试网页 大家有什 ...

  10. D. Flowers Codeforces Round #271(div2)

    D. Flowers time limit per test 1.5 seconds memory limit per test 256 megabytes input standard input ...