chrome dev tools
介绍一下Chrome dev tools 的基本使用和一些意想不到的小技巧

Chrome Developer Tools 是Chrome内嵌的一系列编辑和调试的工具。可以有效的追踪布局的问题，为javascript设置断点并对程序进行优化

====打开方式====
Ctrl+Shift+I  打开/关闭调试工具.(显示的是上次关前的tab)
Ctrl+Shift+J  打开/关闭调试工具的Console页
Ctrl+Shift+C  打开调试工具Elements页 在此界面继续按下组合键相当于放大镜按钮快捷键

====8个工具====
Chrome调试工具根据任务的不同分成8个Tab
Elements COnsole Source Network Audit Timeline Profile Resource。 可以通过 Ctrl + [ 和 Ctrl + ] 来切换他们

Elements 检查the DOM and styles
Console 查看console API产生的信息 比如console.log() 可以直接输入js语句和你的程序交互
Source 主要用于debug 甚至可以直接编辑文件
Network 实时显示了当前的网络请求和下载的资源
Audit 分析页面加载，并提供建议和优化为减少网页加载时间，提高响应速度。
Timeline 加载页面的时间都花费在哪里，所有的事件，从loading，解析js，计算样式，页面重绘都有记录。
Profile 记录下执行时间和内存的使用，帮助你你明白资源都消耗在哪里，因此可以优化的你的代码
Resource 检查页面加载的资源。它可以让你直接操作HTML5 数据库，本地存储，Cookie，AppCache

====Elements====
可以通过这个界面来查看HTML和对应的样式。最常见的方式则是右键--Inspect Element.
使用放大镜按钮，将会高亮你选中的元素。当你选中后，Element将用蓝色显示对应的HTML片段。
可以通过拖拽的方式来改变HTML的结构，双击可以修改标记和属性名属性值
按下F2或者Edit as HTML 可以编辑HTML
Elements底部的区域叫做breadcrumb trail 用于显示当前节点层级

DOM breakPoints

Event Listeners
在这个界面可以看到元素注册的事件 点击漏斗标识选择 selected nodes only 可以只显示当前选中的节点的事件 展开事件可以看到究竟是哪个文件哪一行定义了该事件

Styles
同时，你也可以在Styles界面中看到该元素对应的CSS。
样式前面有复选框，可以很方便的使这一个css失效或生效
(有的样式用删除线盖住了 表示该样式被其他样式覆盖)
通过单击可以修改值 对于数值型的值，可以通过????来改变 Alt + ???? 则是以0.1为单位改变
回车后可以增加一条新的样式
+号按钮可以增加一个新的样式选择器
鼠标按钮可以强制的使元素使用伪类样式(不过这里的伪类仅限于active focus hover vistied4种)
对于颜色值，单击色块可以打开一个颜色选择器来修改。
css选择器后面显示了哪个文件哪一行定义了该样式，可以点击它进入到Sources面板对对应的css文件做修改
修改后可以暂时保存(并不会写入到文件 只是暂时保存在当前回话中)
右击Load Modifications 可以查看所做的改动
通过Revert可以撤销改动

Styles右侧有一个 Metrics面板，通过盒模型的方式很直观的显示了Margin Padding border width height的值 通过双击可以很轻松的修改他们
且当鼠标Hover在Metric中各个区块之上时，页面中对应的区域也会用相同的颜色高亮。

====Console====
Console界面非常有用，可以在Console中输入语句与程序交互。
尤其是Debug的时候，Console面板可以和其他面板同时显示
使用设置按钮旁边的抽屉按钮即可用Split-View的方式打开Console

清除Console中得内容
可以使用禁止标志 或者在Console中输入 clear() 或者使用快捷键 Ctrl + L
如果在程序中想要清除Console 使用Console.clear()
Console中可以输入语句 Console中默认回车是执行 如果想输入多行语句 可以使用Shift + Enter 来换行
===> 因此可以定义一个函数并执行他

Console中也有一个过滤器(漏斗标志) 可以用来筛选要显示的信息
在Console中显示的信息主要有4种 log error(红色) warning(黄色) info(蓝色) 过滤器可以分别显示这几种信息

Console中比较使用的小技巧
以组输出
console.group("Authentication phase");
//......
console.groupEnd("Authentication phase");

格式化输出
console.log("%s has %d points", "Sam", "100");

应用CSS改变字体样式
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

统计一段代码执行时间
console.time("Array initialize");
//......
console.timeEnd("Array initiaize");

选择器
$(‘#loginBtn‘); 相当于querySelector
$$(‘button.loginBtn‘); 相当于querySelectorAll

====Source====
主要是用于Debug 当然还可以编辑代码
单击设置断点 右键Edit BreakPoint 可以设置断点失效条件
右侧Watch Expression 可以监控变量
Call Stack 可以看到函数调用情况
对于异步函数调用(异步请求 setTimeout等) 需要勾上Async才能看到正确的函数调用顺序

可以暂时对文件做修改 之后按下Ctrl + S 可以临时保存
背景色将变成粉色
右键 Load Modifications 可以载入所有的改动 点击revert可以撤销改动
和sublime一样 通过Ctrl + F可以查找
Ctrl + G 可以跳转到某一行

DOM modifications
当DOM节点发生改变的时候可以中断js程序执行
在Elements面板中 右键一个元素 Break On中设置
有三种情况
Subtree Modification 当子节点改变的额时候
Attributes Modifications 属性发生改变的时候
Node Removal 节点被删除的时候

====Network====
在次面板打开的时候 它将会记录所有的网络活动
默认给出了很多列 Name名称 Method请求方式 Status请求状态
资源类型Type 请求来源Initiator 大小Size Time时长 时间线Timeline
可以在漏斗中选择希望显示的列
单击名字可以看到详细的请求和相应信息

chrome dev tools