The Element Inspector in Chrome DevTools offers powerful integration with the console - learn how to programmatically navigate your selected element, how to search through the history and use CSS selectors to control what you're looking at and how to quickly and easily listen for events as you debug your application.

$0: refer to selected element.

$1, $2, $3, $4: refer to previous element.

We can use jQuery even not include the lib:

We can use xPath to get the elements:

We can monitor events:

[Debug] Chrome Devtools: Elements - Console Integration的更多相关文章

  1. chrome devtools的debug相关

    搜索ctrl+p:搜索Sources面板中指定的文件:然后在主窗口文件标签右键选择reveal in navigator可以在目录中显示当前文件.ctrl+f:搜索devtool主显示窗口所在文件的指 ...

  2. Chrome DevTools: Color tricks in the Elements Panel

    shift + click to change the color format Tip one The Colour Platters are customeised for you .they s ...

  3. Chrome DevTools & console & filter warning

    Chrome DevTools & console & filter warning

  4. 20个Chrome DevTools调试技巧

    译者按: Chrome DevTools很强大,甚至可以替代IDE了! 原文: Art of debugging with Chrome DevTools 译者: Fundebug 为了保证可读性,本 ...

  5. Chrome DevTools 的 Sources 调试

    在 Chrome 中调试 JS 代码,那你不得不与 Chrome DevTools 的 Sources 面板打交道,所以文章主要通过介绍 Sources 面板上的各部分功能来介绍如何调试网页中的 JS ...

  6. Chrome DevTools – 键盘和UI快捷键参考

    Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间. 本指南提供了Chrome DevTools中每个快捷键的快速参考.虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于 ...

  7. Chrome Devtools简介

    Chrome开发工具(又称DevTools),是一套内嵌在chrome浏览器内部的web编写和调试工具.DevTools提供给web开发人员深入地访问浏览器内部和web应用的机会.DevTools可以 ...

  8. chrome devtools

    Elements chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css. windows: ctrl + shift + ...

  9. Chrome DevTools 调研笔记

    1  说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2  Elements 2.1  功能 检查和实时更新页面的HTML与C ...

随机推荐

  1. tomcat+nginx+redis实现均衡负载以及session共享

    1.redis简介及下载安装 作为这次的主角,相信大家对redis应该都一定印象,redis是一款开源的高性能key-value数据库,拥有丰富的键值储存类型,并提供多种语言的API. 与一般数据库不 ...

  2. 漫漫人生路，学点Jakarta基础-Java8函数式编程

    接口默认方法 Java8版本以后新增了接口的默认方法,不仅仅只能包含抽象方法,接口也可以包含若干个实例方法.在接口内定义实例方法(但是注意需要使用default关键字) 在此定义的方法并非抽象方法,而 ...

  3. 59.C++与正则表达式

    regex_match 整个字符串是否匹配 (通过cmatch存储匹配的结果),match[0]代表整个匹配序列,match[1]代表第1个匹配后的子序列,match[2]代表第2个匹配后的子序列 代 ...

  4. DbSet<>.Find()

    第一篇为大家带来新的API,DbSet<>.Find(). 过去我们常常用Where或First(FirstOrDefault)方法来查找对应的实体,比如: var people = fr ...

  5. PythonOOP面向对象编程1

    什么是对象? 对象是指现实中的物体或实体(拥有一系列变量.函数(方法)的) 什么事面向对象? 把一切看成对象(实例),让对象和对象之间建立关联关系 对象都有什么特征? 属性(名词)实例变量 姓名.年龄 ...

  6. git把本地文件上传到github上的步骤

    1.清除clean 2.返回上一级cd .. 3.克隆仓库地址git clone+地址 4.添加忽悠文件vim .gitignore 5查看cat .gitignore 6.进入到test,并且添加所 ...

  7. Windows学习总结（5）——【IIS建站】Windows10怎么打开站点服务？

    从Windows8开始,界面发生了很大的变动,再到Windows10,仍然有不小的变动,鉴于以后Windows10会成为主流,我们姑且介绍下Windows10建站的方法,虽然它并不是专业的服务器系统, ...

  8. DOM和SAX是应用中操纵XML文档的差别

    查看原文:http://www.ibloger.net/article/205.html DOM和SAX是应用中操纵XML文档的两种主要API.它们分别解释例如以下:          DOM.即Do ...

  9. 将 php 转换/编译为 EXE

    将 php 转换/编译为 EXE 本文仅仅是将原文用谷歌作了翻译,原文来源于 http://stackoverflow.com 资料来源  http://stackoverflow.com/quest ...

  10. CISP/CISA 每日一题 14

    CISA 每日一题(答) 自动无人值守运行(LIGHTS-OUT)优势:1.信息系统运行成本的遏制/减少:2.持续运行(24/7):3.减少系统错误和中断次数. I/O 控制人员负责保证:1.批处理信 ...