说明：截图中的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. ffmpeg转换参数和对几种视频格式的转换分析

    我们在将多种格式的视频转换成flv格式的时候,我们关注的就是转换后的flv视频的品质和大小.下面就自己的实践所得来和大家分享一下,主要针对avi.3gp.mp4和wmv四种格式来进行分析.通常在使用f ...

  2. C#实现eval 进行四则运算（有码）

    在JavaScript中实现四则运算很简单,只需要调用eval函数就行了,但是不知道什么原因万能的.NET却没有封装这个函数~ 在这里为大家封装了一个C#版本的eval函数,具体的设计参考了<大 ...

  3. STL学习笔记4--set and multiset

    集合(Set)是一种包含已排序对象的关联容器.多元集合(MultiSets)和集合(Sets)相像,只不过支持重复对象,其用法与set基本相同. 用法介绍 1.insert()函数 首先把头文件set ...

  4. DirectShow简单入门程序

    1.首先确认已安装过相关工具及配置环境,然后打开vs2010,新建一对话框应用程序 取名为Player_test1,然后打开菜单->项目->属性-> 添加strmmiids.lib库 ...

  5. Python subprocess.Popen中communicate()和wait()区别

    刚开始我是使用的wait(),但是当adb命令返回太多时,程序就会卡死,查询得知原因后,才使用了communicate(),communicate()返回一个元组:(stdoutdata, stder ...

  6. WordCount by Java

    WordCount by Java 软测第二周作业 该项目github地址如下: https://github.com/YuQiao0303/WordCount 一.概述 项目WordCount的需求 ...

  7. js深度复制

    项目过程遇到需要对一个对象处理,然后独立出来用,结果怎么处理都会影响到原有变量,原来是引用导致,只有深度复制才行. 最终用下面的赋值方法才搞成功 var result=$.extend( true, ...

  8. mysql 修改密码 开启远程访问权限

    修改密码 update user set password=password('') where user='root'; FLUSH   PRIVILEGES; 远程访问权限: GRANT ALL ...

  9. 监视网络接口TCP状态信息数据有多种工具或命令。下面举例一些：

    nstat命令 nstat kernel ======= ss -s == netstat -i netstat -s ip -s link sar -n DEV 1

  10. 【Luogu】P4159迷路（矩阵优化）

    题目链接 将每个点拆成时刻1~9,然后根据题目要求连边,比如i-j有一条权为x的边就从点i-x向点j-1连一条边,表示经过x次之后可以到达. 然后就矩阵快速幂乱搞就好了. #include<cs ...