说明：截图中的Chrome版本为52，不同版本可能略有区别。

常用设置

开发时消除静态资源缓存不能立刻更新的困扰，勾选Disable cache即可

切换颜色显示格式

修改默认颜色显示格式，在Settings（控制台按F1）>Preferences>Elements>Color format

选择dom

快速选中dom节点，鼠标选中的dom节点，可以看到chrome将其赋值为$0，因此在控制台直接敲出$0就可以得到，不用去输繁琐的CSS选择器，而且$1 - $4记录了你最近选过的4个dom节点。

chrome默认提供了一些选择dom的函数

  • $(selector)等同于document.querySelector(selector)
  • $$(selector)等同于document.querySelectorAll(selector)
  • $x(path)即xpath搜索，chrome中可以等同document.evaluate(path,document)

打开一个chrome空白页（确保$没有被js使用），测试如下

调试

断点可以编辑，比如在for循环中可以编辑进入断点的条件。

全局搜索（ctrl+shift+F），快速找到代码

美化代码，方便调试

写代码

chrome中有专门写代码的地方（位置在Sources>Snippets），这里写的代码不会丢失，任何页面都可以运行，非常方便。

巧用chrome开发者工具的更多相关文章

  1. 巧用网页开发者工具F12 审查、修改元素、去除广告、屏蔽遮罩

    巧用网页开发者工具F12 审查.修改元素.去除广告.屏蔽遮罩 每当打开一个网页的时候,是否为页面有很多广告而烦恼:是否为要操作页面(例如观看超清视频),请先注册登录等等事情而麻烦:是否对网页加锁的视频 ...

  2. Chrome开发者工具不完全指南：（三、性能篇）

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  3. Chrome开发者工具不完全指南（四、性能进阶篇）

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

  4. Chrome开发者工具不完全指南（五、移动篇）

    前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...

  5. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

  6. Chrome开发者工具不完全指南（六、插件篇）

    本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件.在chrome商店里面有很多插件,没事建议大家去逛逛.不过需要FQ,所以诸位请自备神器.一.皮肤插件 首先是大家期盼已久,翘首以 ...

  7. Chrome开发者工具详解(4)-Profiles面板

    Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...

  8. Chrome开发者工具详解(3)-Timeline面板

    Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...

  9. Chrome开发者工具详解(2)-Network面板

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

随机推荐

  1. 【NopCommerce 3.1】asp.net mvc 利用jQuery from.js上传用户头像

    纯代码不解释. 在CusotmerControllers中添加上传方法 /// <summary> /// ajax上传用户头像 /// </summary> /// < ...

  2. windows控制台主题美化工具-colortool

    最近在win10上装了 wsl 系统,发现界面主题太挫,文件夹颜色很不清晰 . 特此在网上搜索了一下,发现了 colortool 这个工具 这是微软官方提供的用于控制台配色的程序 发布版本地址:htt ...

  3. Dsamain

    TechNet 库 Windows Server Windows Server 2008 R2 und Windows Server 2008 Windows Server 命令.参考和工具 Comm ...

  4. Robotium测试报告的生成方法（下）

    7.4 测试报告优化 通过上面的三种方法,我们都可以得到一个Xml格式的测试报告,不过这不是我们想要的,因为这样的报告读起来很费劲,而且这样的报告发给领导们也是不行的.所以我们要美化一下才行,一般都是 ...

  5. Python 字节与字符串的转换

    html = urlopen("http://www.cnblogs.com/ryanzheng/p/9665224.html") bsObj = BeautifulSoup(ht ...

  6. 数据结构算法——链表的各种操作，C++和Python

    时隔已久,一直没更新博客,感觉很愧疚呀. 先贴上所有的代码.这个是用C++写的 #include "stdafx.h" //Author:Albert //Date: 2018.1 ...

  7. 冒泡排序（Bubble Sort）及优化

    原理介绍 冒泡排序算法的原理如下: 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有 ...

  8. 团队Alpha版本冲刺（二）

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:丹丹 组员7:家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示组内 ...

  9. tail /grep/more

    1.tail -f 文件名 不断的刷新日志信息,实时的得到新追加到文件中的信息,常用来跟踪日志文件,如tail -f err.log Ctrl+C退出 2.grep '内容' 文件名 3.more 分 ...

  10. 【Luogu】P4462异或序列（莫队）

    题目链接 观察什么时候x到y之间那一段可以被统计 xorsum[x-1]^xorsum[y]=k xorsum[x-1]=xorsum[y]^k||xorsum[y]=xorsum[x-1]^k 莫队 ...