本文内容来自:chrome console的使用 :评估表达式 – Break易站

从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态。

DevTools 控制台让您可通过特定方式了解您页面中的项目状态。通过使用支持 JavaScript 的多个功能,再结合运用您的 JavaScript 知识,评估您可以输入的任何表达式。

这篇文章主要是将来以下内容:

  • 只需键入表达式即可对其进行评估。
  • 使用一个快捷键选择元素。
  • 使用inspect() 检查 DOM 元素和 JavaScript 堆对象。
  • 使用 $0 – 4 访问最近选择的元素和对象。

查看表达式


按下 Enter 键后,此控制台可评估您提供的任何 JavaScript 表达式。输入表达式后,系统将显示属性名称建议;控制台还会提供自动填充和 Tab 自动补全功能。

如果有多个匹配项,↑ 和 ↓ 在它们之间循环切换。 按 → 键可选择当前建议。如果有一个建议,按 Tab 键选中它。

选择元素


使用下列快捷键选择元素:

目标选择的示例:

1
2
3
$('code') // Returns the first code element in the document.
$$('figure') // Returns an array of all figure elements in the document.
$x('html/body/p') // Returns an array of all paragraphs in the document body.

检查 DOM 元素和 JavaScript 堆对象


inspect() 函数选取一个 DOM 元素或 JavaScript 引用作为一个参数。如果您提供一个 DOM 元素,则 DevTools 进入“Elements”面板并显示该元素。如果您提供一个 JavaScript 引用,则它进入“Profile”面板。

当此代码在该页面上的控制台中执行时,它会抓取此图并在“Elements”面板上显示它。这会利用到 $_ 属性以获取最后一个评估的表达式的输出。

1
2
$('[data-target="inspecting-dom-elements-example"]')
inspect($_)

访问最近选择的元素和对象


控制台在变量中存储最后使用的五个元素和对象,以方便访问。使用 $0 – 4 从控制台访问这些元素。请记住,计算机从 0 开始计算,这意味着最新的项目是 $0,最早的项目是 $4。

本文内容来自:chrome console的使用 :评估表达式 – Break易站


—Author: Arvin Chen —Web Address: www.breakyizhan.com (Break易站)

前端开发chrome console的使用 :评估表达式 – Break易站的更多相关文章

  1. chrome console的使用 : 异常和错误的处理 – Break易站

    本文内容来自:chrome console的使用 : 异常和错误的处理 – Break易站 利用 Chrome DevTools 提供的工具,您可以修复引发异常的网页和在 JavaScript 中调试 ...

  2. Web前端开发Chrome插件

    参考:http://www.cnblogs.com/sosoft/p/3490481.html 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员 ...

  3. 25个Web前端开发工程师必看的国外大牛和酷站

    逛了一周国外大牛们的博客与酷站,真是满满的钦佩.震撼.羡慕.惊喜………… Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要.无论是学习新技术,还是寻找免费资源与工具 ...

  4. 前端开发chrome与fireFox浏览器都使用

    chrome查看元素的样式时,显示的很方便和准确,方便开发快速辨别结构. 而fireFox在css3上,我发现好像比chrome支持得更全面.

  5. 前端开发Chrome调试工具

    Chrome浏览器提供了一个非常好用的调试工具,可以用来调试我们的HTML结构和CSS样式. 1.的打开调试工具 打开Chrome浏览器,按下F12键或点击页面空白,点击检查 2.使用调试工具 (1) ...

  6. 百度面试经历_web前端开发

    百度面试经历_web前端开发 --2016年09月24日校招杭州站 刚面试完,担心过去就忘记掉,故回来时在地铁上用手机码下面试题目,供参考,也留作自己以后的面试参考依据.

  7. 推荐几个Web前端开发实用的Chrome插件

    越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...

  8. Web前端开发实用的Chrome插件

    Web前端开发实用的Chrome插件 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录 ...

  9. 前端开发中一些好用的chrome插件总结

    下载了很多chrome插件和应用,有些是常用的,有些偶尔用一次,有些是不止开发中用的,现做一下总结: 红色是个人认为比较好用的,排名不分先后 1.AppJump管理应用的插件  安装了许多应用之后肯定 ...

随机推荐

  1. List<Object>中,以Object的某一属性值为参照进行排序,选取最大记录的解决办法

    一.场景:java web, 在一列表中选取一条记录,该记录的某一个属性值在此List中为最大值: List的格式为List<Object>,其中Object为定义的Vo或者Po类,其中包 ...

  2. Java SE 8 流库(二)

    1.3. filter,map,flatMAP方法 流的转换会产生一个新流,它的元素派生出自另一个流中的元素: Stream<T> filter(Predicate<? super ...

  3. Linux 容器 vs 虚拟机 —— 谁更胜一筹

    自从Linux上的容器变得流行以来,了解Linux容器和虚拟机之间的区别变得更加棘手.本文将向您提供详细信息,以了解Linux容器和虚拟机之间的差异. Linux容器vs虚拟机 – 应用程序与操作系统 ...

  4. java内存模型个人理解总结

    现阶段线程之间的通讯主要有两种:内存共享和消息传递,而且在java中是采用的内存共享.简单说下内存共享: 假设现在有a线程和b线程,在a和b线程之间的通讯是依靠a线程将相关数据刷新到共享内存,然后b线 ...

  5. 》》webpack打包成的文件

    /******/(function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installed ...

  6. 深入理解Java内存模型——volatile

    volatile的特性 当我们声明共享变量为volatile后,对这个变量的读/写将会非常特别. 理解volatile特性的一个好方法是:把对volatile变量的单个读/写,看成是使用同一个监视器锁 ...

  7. redmine工作流程总结

    1.需求调研员和測试员新建问题,问题跟踪为支持,指派给产品经理 2.产品经理对收到的问题进行分类处理,功能类型的,改动跟踪状态为功能,指派给自己.是bug类型的,将跟踪类型改动错误类型,指派给技术经理 ...

  8. mysql并行复制降低主从同步延时的思路与启示

    一.缘起 mysql主从复制,读写分离是互联网用的非常多的mysql架构,主从复制最令人诟病的地方就是,在数据量较大并发量较大的场景下,主从延时会比较严重. 为什么mysql主从延时这么大? 回答:从 ...

  9. CS:APP3e 深入理解计算机系统_3e C Programming Lab实验

    queue.h: /* * Code for basic C skills diagnostic. * Developed for courses 15-213/18-213/15-513 by R. ...

  10. java与数据库

    工具:mysql: java eclipse,phpstudy. 以MySQL为例 java连接MySQL可能你在度娘的帮助下,又设置环境变量又改这改那的,结果还是没有连接成功. 今天我来分享一下不需 ...