关于 Chrome Console 查看DOM详情细节的奇思淫巧

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

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

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

如， [document.getElementById(‘app‘)] ，  如图所示：

原文地址：https://www.cnblogs.com/CyLee/p/9535006.html

时间： 2024-10-07 05:07:00

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

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

找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开源 Javascript 书签,能提供绑定在DOM元素上的事件调试信息.Visual Event能显示如下信息: 1.哪一个元素有事件绑定 2.某元素上绑定的事件类型 3.事件触发后运行的代码段 4.定义绑定函数的源文件和行号(仅限于WebKit和Opera浏览器) 除了对调试你自己的代码大有用途,

第一次冲刺--查看活动详情用户场景分析

功能点:查看活动详情 名字:阿毛 年龄:20岁 收入:无 代表的用户在市场上的比例和重要性:比例较大,重要 典型场景:查看活动的详细介绍,以及选择加入/退出该项活动 使用本软件的环境:闲暇时间不知道做什么想找点事干 生活/工作情况:大学生,无工作,有着较多的空闲时间,喜欢出去玩耍 知识层次和能力:大学教育,对电脑.手机.网络使用非常熟练 用户的动机:想查看活动的详细介绍,以决定是否加入/退出活动 目的:查看活动的详细介绍 困难:不了解活动的详细情况,不清楚活动的详细安排 用户的偏好:喜欢条理清晰

Visual Event ：快速查看 DOM 上绑定的 JS 事件

http://web.jobbole.com/82503/ Javascript中的事件经常被认为如谜一般不可解.Javascript是一个事件驱动的语言,在这样的前提下前面的看法是很奇怪,但是说到它们的复杂本质和调试难度时,这样的看法又是很正常的.为此,我创建了可视化事件(Visual Event)来查看DOM节点上绑定的事件. 简介 Visual Event是一个开源 Javascript 书签,能提供绑定在DOM元素上的事件调试信息.Visual Event能显示如下信息: 1.哪一个元素

use jQuery in chrome console

if a website does not have jQuery, and we want to use jQuery in chrome console. You can copy the code from here http://code.jquery.com/jquery-latest.min.js paste it into chrome console, then you are good to go. http://stackoverflow.com/questions/7474

Android--仿1号店继续拖动查看图文详情——一个自定义的ViewGroup

声明:源代码不是我写的,是网上的以为大神写的(地址给忘了),我拿过来以后呢,稍微改动了一下源码,使之符合了项目需求,再次特别感谢那位大牛,非常感谢. 是一个自定义布局,继承自ViewGroup package com.storelibrary.ui.custom.widget; import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.animation.

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

chrome控制台查看btn_comment_submit控件有没绑定事件 function lookEvents (elem) {     return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" ); } var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件 u

ovs加dpdk在日志中查看更多运行细节的方法

想查看更多dpdk+ovs的更多运行细节,可以采用以下方法,增加更多运行日志. 在终端输入: ovs-appctl vlog/set dpdk:file:dbg ovs-appctl vlog/set netdev_dpdk:file:dbg 并查看 ovs-vswitchd.logs(在/usr/local/var/log/openvswitch目录下) ,便可以查看更多运行细节. 原文地址:https://www.cnblogs.com/vancasola/p/9406564.html

简单绕过Chrome密码查看逻辑，查看浏览器已保存的密码

简单绕过Chrome密码查看逻辑,查看浏览器已保存的密码 利用场景: 同事或朋友外出有事,电脑未锁屏离开座位.可以利用这一间隙,查看Ta在Chrome浏览器上保存的账号密码 查看逻辑: 当我们要查看Chrome浏览器上保存的密码时,点击显示,会弹出一个对话框来要求输入Windows密码来验证你的权限. 绕过方法: 在地址栏输入chrome://settings/passwords来查看所有已保存的密码列表,搜索感兴趣的目标站点. 进入目标站点的登录页面,输入用户名前几位字符,让浏览器自动填充.右

Chrome console(转)

阅读目录 写在前面 谷歌控制台Elements面板 查看元素上绑定的事情 样式操作 总况 console.log console.info console.error console.warn console.debug console.dirxml console.group和console.groupEnd console.assert console.count console.dir console.time和console.timeEnd console.profile和console