[TOC] ## 前言 本文中将详细介绍一些chrome的开发技巧，也许你已经知道了，也许你还不是特别清楚，不妨都看一下，分分钟提高你的开发效果与调试效率。 ## 面板介绍 一般我们通过f12或者右键菜单可以打开开发者工具，也可以通过页面右键菜单审查打开这个界面。 这个界面主要由element元素，console控制台，source资源,network网络，performance表现,memory记忆，application应用，security安全，audits审计组成。另外该菜单还包括一个选择元素的箭头，手机模拟器，设置菜单，关闭按钮等。 下面分别介绍这几个面板的主要作用，欢迎大家进行积极的补充。  ## 选择元素，elements视图 你可以通过鼠标右键选择元素，也可以用箭头指引到需要的元素。从个人使用经验来讲，我一般是选择到元素的大概位置然后点击审查，这样比较快，因为点击到箭头再移动到元素需要两步。  在这个视图中你可以进行的操作：  * **查看整体页面的dom结构**，可以根据需要展开或者折叠任意的结构，也可以删除或者隐藏，甚至可以编辑或者复制某dom元素，该功能用来分析dom结构是否正确，也可以用来判断分析某些特殊情况下你的样式以及结构是否仍然正确。 * **修改伪类状态**：针对任何一个元素可以人为添加某状态，包括focus,active,hover等，这个方法针对某些某些鼠标覆盖才能显示的dom非常方便。 * **查看某dom元素的样式**，包括其继承样式以及元素样式，并且会在最底部展示其盒模型。如果你希望更快的查看其生效样式或者快速的查看盒模型，可以点击右边的tab，综合样式。其中，如果你可以快速的复制某部分样式或者定位到这部分样式的代码来源那个文件的哪一行，方便快速定位。  * 如果你的代码是压缩的，可以通过格式化快速解压  ## console控制台 ## source资源 ## network网络 ## performance表现, ## memory记忆 ## application应用 ## security安全 ## audits审计 ## 参考文档 * [chrome开发者工具使用详解](http://blog.csdn.net/u014686180/article/details/45844251) * [chrome的开发使用](http://blog.csdn.net/csdnligao/article/details/53925094)