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. 40.Node.js Web 模块

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 什么是 Web 服务器? Web服务器一般指网站服务器,是指驻留于因特网上某种类型计 ...

  2. google dataflow model 论文

    http://www.chinacloud.cn/show.aspx?id=24446&cid=17

  3. SASS常用方法

    cnpm install --save-dev sass-loader //sass-loader依赖于node-sass cnpm install --save-dev node-sass //实现 ...

  4. ip---查看网络信息

    Linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者. ifconfig属于net-tools.ip属于iproute2 设置一个IP地址,可以使用下列ip命令: ip add ...

  5. Python 3 与"Hello World!"

    Python 3 版本 Python的3.0版本,常被称为Python 3000,或简称Py3k.相对于Python的早期版本,这是一个较大的升级.为了不带入过多的累赘,Python 3.0在设计的时 ...

  6. hdu5414（2015多校10）--CRB and String（字符串匹配）

    题目链接:pid=5414">点击打开链接 题目大意:有A.B两个字符串.如今有一种操作能够在A的随意一个字符x后面添加一个字符y(x.=y).问能不能将A变为B. 首先假设A能够变成 ...

  7. tokumx的安装和使用

    Add the Tokutek package signing key. $ sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-key ...

  8. npm install (让别人下载自己的包)

    好几天没更新了,再这里跟大家说声抱歉,今天来点干货. 发布一个包在npm上,可以供世界所有人使用,想一下,以前我们做项目,都是在npm install 别人的包,什么时候才能install我们自己的包 ...

  9. Office GVLK 密钥对照表（kms激活专用）

    Office2016系列: Office Professional Plus 2016:XQNVK-8JYDB-WJ9W3-YJ8YR-WFG99 Office Standard 2016:JNRGM ...

  10. 斜率优化dp练习

    1.HDU3507 裸题,有助于理解斜率优化的精髓. dp[i]=min(dp[j]+m+(sum[i]-sum[j])2) 很显然不是单调队列. 根据斜率优化的的定义,就是先设两个决策j,k 什么时 ...