chrome dev tools

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 用于显示当前节点层级
在Elements界面中 选中一个元素右键Scroll into View 所选中的元素将滚动到视图内

Event Listeners
在这个界面能够看到元素注册的事件 点击漏斗标识选择 selected nodes only 能够只显示当前选中的节点的事件 展开事件能够看到到底是哪一个文件哪一行定义了该事件
Styles
同时，你也能够在Styles界面中看到该元素对应的CSS。
样式前面有复选框，能够很方便的使这一个css失效或生效
(有的样式用删除线盖住了 表示该样式被其余样式覆盖)
经过单击能够修改值 对于数值型的值，能够经过⬆️⬇️来改变 Alt + ⬆️⬇️ 则是以0.1为单位改变 Shift +Up/Down 以10为单位改变值
回车后能够增长一条新的样式
+号按钮能够增长一个新的样式选择器
鼠标按钮能够强制的使元素使用伪类样式(不过这里的伪类仅限于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(蓝色) 过滤器能够分别显示这几种信息\\
刷新页面仍然想保留控制台中得信息，右键选中Preserve Log upon Navigation\\
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");
//......
cons™ole.timeEnd("Array initiaize");
选择器
$('#loginBtn'); 至关于querySelector
$$('button.loginBtn'); 至关于querySelectorAll
Xpath
$x(xpath)命令能够执行一个xpath查询，如$x('//img')
会找出页面中全部的图片\\
====Source====
主要是用于Debug 固然还能够编辑代码\\
格式化Javascript 使用{} Pretty View按钮
单击设置断点 右键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\\
Timeline中得浅色表示等待时间，深色表示加载时间\\
能够在漏斗中选择但愿显示的列\\
单击名字能够看到详细的请求和相应信息\\
对于XHR请求 能够右键选择Replay XHR 来从新发送XHR请求
====Timeline====
Timeline工具栏提供了对于在加载你的Web应用的过程当中，时间花费状况的概览，这些应用包括处理DOM事件, 页面布局渲染以及向屏幕绘制元素。\\
它将真实三个层面的数据(Event Frame Memory)来显示程序从加载到显示时间都花费在了哪里\\
默认该面板不记录任何信息
点开记录按钮(红色表示正在记录) 再次点击则中止记录
或者使用Ctrl + E快捷键开始记录\\
想要记录一个页面从加载开始的所有信息 可使用 Ctrl + R + E 组合键
禁止按钮会清空目前全部记录\\
垃圾桶按钮会强制进行一次垃圾回收\\
漏斗按钮能够筛选出耗时超过15ms的记录
=====Frames=====

====Profile====
Profile里面提供了三种类型，经过这三种分析能够查看内存泄露和占用状况。
收集JavaScript的CPU占用信息\\
获取堆的快照\\
录制堆的分配状况\\
Ctrl+E 开始/结束录制\\

====Resources====
Resources可让你检查应用的本地数据资源，包括indexedDB/WebSql DB，localStorage/sessionStorage，cookie以及AppCache，你还能够检查应用的视觉资源，包括图片、字体和样式等(在Frames中)。
好比AppCache中，你能够检查Chrome已经缓存了当前文档的哪些资源以及AppCache的状态和浏览器链接状况。\\

=====Audits=====
分析页面的性能，并提供优化建议\\
使用Run开始分析