我们期待打印出的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. 基于Sql Server 2008的分布式数据库的实践（终结）

    学习.操作心得 以前在做网站程序的时候一直用的是MYSQL,但是网上搜到MYSQL不支持分布式操作,然后便开始查询MSSQL的分布式数据库的设计与操作,后来在网上找到了<基于SQL SERVER ...

  2. [Algorithm] Trie data structure

    For example we have an array of words: [car, done, try, cat, trie, do] What is the best data structu ...

  3. [Javascript] Create Objects

    var vehicle1 = {type: "Motorboat", capacity: 6, storedAt: "Ammunition Depot"}; v ...

  4. [Android] Content provider， ContentResolver

    Content provider的作用: Content providers manage access to a structured set of data. They encapsulate t ...

  5. python下载文件的三种方法

    Python开发中时长遇到要下载文件的情况,最常用的方法就是通过Http利用urllib或者urllib2模块. 当然你也可以利用ftplib从ftp站点下载文件.此外Python还提供了另外一种方法 ...

  6. Discuz常见大问题-如何允许用户插入视频-如何自己在页面中插入视频

    从视频的下面分享中获取html代码 然后粘贴到你创建页面的指定位置(注意从优酷复制的视频宽度和高度可能比较小,你可以自己调整,或者占据100%) 最终的实现效果

  7. linux内核——进程管理

    在讲进程之前先说一下进程的堆栈的吧: 1.进程的堆栈 内核在创建进程的时候,在创建task_struct的同一时候,会为进程创建对应的堆栈.每一个进程会有两个栈,一个用户栈.存在于用户空间,一个内核栈 ...

  8. UILabel文字竖排

    方法一: UILabel *mindName = [[UILabel alloc]initWithFrame:kCR(, , ,)]; mindName.text = @"苏\n小\n明&q ...

  9. c的链接详解

    多目标文件的链接 stack.c #include <stdio.h> #define STACKSIZE 1000 typedef struct stack { int data[STA ...

  10. android 使用AsyncHttpClient框架上传文件以及使用HttpURLConnection下载文件

    AsyncHttpClient开源框架android-async-http还是非常方便的. AsyncHttpClient该类通经常使用在android应用程序中创建异步GET, POST, PUT和 ...