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. 49.Node.js RESTful API

    转自:http://www.runoob.com/nodejs/nodejs-express-framework.html 什么是 REST? REST即表述性状态传递(英文:Representati ...

  2. 认知 Git 和 GitHub

    今天被一个大牛的大哥问了个问题,问住了.原问题是“你是到github吗?git呢?” 我堂而皇之的说,“他们不是同一个吗?” 结果大牛大哥狠狠地回了我一句“百度去”..好吧我乖乖去百度了. 这是我百度 ...

  3. 2017国家集训队作业[agc006f]Blackout

    2017国家集训队作业[agc006f]Blackout 题意: 有一个\(N*N\)的网格,一开始有\(M\)个格子被涂黑,给出这\(M\)个格子,和染色操作:如果有坐标为\((x,y),(y,z) ...

  4. diff---比较文件不同

    diff命令在最简单的情况下,比较给定的两个文件的不同.如果使用“-”代替“文件”参数,则要比较的内容将来自标准输入.diff命令是以逐行的方式,比较文本文件的异同处.如果该命令指定进行目录的比较,则 ...

  5. vmstat---有关进程、虚存、页面交换空间及 CPU信息

    虚拟内存运行原理 在系统中运行的每个进程都需要使用到内存,但不是每个进程都需要每时每刻使用系统分配的内存空间.当系统运行所需内存超过实际的物理内存,内核会释放某些进程所占用但未使用的部分或所有物理内存 ...

  6. 下载新浪android SDK

    下载新浪android SDK 必须去官网 开放平台下载 http://open.weibo.com/ 下载SDK 点击进入之后,看到的界面例如以下: 然后下载android SDK就可以.假设基于别 ...

  7. Directx9.0 学习教程3 -图形学之创建点 线 三角形 等

    1.首先 介绍点的表示方法 struct CUSTOMVERTEX { float x,y,z; }; CUSTOMVERTEX Vertices[] = { {-5.0, -5.0, 0.0}, { ...

  8. 50行python代码实现个代理server（你懂的）

    之前遇到一个场景是这种: 我在自己的电脑上须要用mongodb图形client,可是mongodb的server地址没有对外网开放,仅仅能通过先登录主机A,然后再从A连接mongodbserverB. ...

  9. 分享一段php获取随意时间的前一天代码

    <?php /** * 获取给定日期的前一天 * @param string $date * @return string $yesterday */ function getYesterday ...

  10. 【Educational Codeforces Round 35 D】Inversion Counting

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 排列中交换任意两个数字. 排列的逆序对个数的奇偶性会发生变化. 翻转这个过程其实就是len/2对数字发生交换. 交换了偶数次的话,不 ...