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开始分析