1.选取DOM元素
要是你用过两天jQuery的话，一定对 $('.className') 或者 $('#id') 这种选择器不会陌生。上面这俩货分别是jQuery的类选择器和ID选择器。
在一个网页没有引入jQuery的情况下，在控制台里你也可以通过类似的方法选取DOM.
不管 $('tagName') /$('.class')/ $('#id') 还是 $('.class #id') 等类似的选择器，都相当于原生JS的document.querySelector('') 方法。这个方法返回第一个匹配选择规则的DOM元素。
在Chrome的控制台里，你可以通过 $$('tagName') 或者 $$('.className') 记得是两个$$符号来选择所有匹配规则的DOM元素。选择返回的结果是一个数组，可以通过数组的方法来访问其中的单个元素。
举个栗子 $$('className') 会返回给你所有包含 className 类属性的元素，之后你可以通过 $$('className')[0] 和$$('className')[1] 来访问其中的某个元素。
天啦噜！原来Chrome自带的开发者工具还能这么用！
2.一秒钟让Chrome变成所见即所得的编辑器
你可能经常会困惑你到底能不能直接在浏览器里更改网页的文本内容。答案是肯定的，你可以只通过一行简单的指令把Chrome变成所见即所得的编辑器，直接在网页上随心所欲地删改文字。
你不需要再傻傻地右键审查元素，编辑源代码了。打开Chrome的开发者控制台，输入
document.body.contentEditable=true
然后奇迹就发生啦!要是你正在用Chrome现在就可以试试!
天啦噜！原来Chrome自带的开发者工具还能这么用！
3.获取某个DOM元素绑定的事件
在调试的时候，你肯定需要知道某个元素上面绑定了什么触发事件。Chrome的开发者控制台可以让你很轻松地找到它们。
getEventListeners($('selector')) 方法以数组对象的格式返回某个元素绑定的所有事件。你可以在控制台里展开对象查看详细的内容。
天啦噜！原来Chrome自带的开发者工具还能这么用！
要是你需要选择其中的某个事件，可以通过下面的方法来访问：
getEventListeners($('selector')).eventName[0].listener
这里的 eventName 表示某种事件类型，例如：
getEventListeners($('#firstName')).click[0].listener
上面的例子会返回ID为 firstName 元素绑定的click事件。
4.监测事件
当你需要监视某个DOM触发的事件时，也可以用到控制台。例如下面这些方法：
monitorEvents($('selector')) 会监测某个元素上绑定的所有事件，一旦该元素的某个事件被触发就会在控制台里显示出来。
monitorEvents($('selector'),'eventName') 可以监听某个元素上绑定的具体事件。第二个参数代表事件类型的名称。例如 monitorEvents($('#firstName'),'click') 只监测ID为firstName的元素上的click事件。
monitorEvents($('selector'),['eventName1','eventName3',….]) 同上。可以同时检测具体指定的多个事件类型。
unmonitorEvents($('selector')) 用来停止对某个元素的事件监测。
5.用计时器来获取某段代码块的运行时间
通过 console.time('labelName') 来设定一个计时器，其中的 labelName 是计时器的名称。通过console.timeEnd('labelName') 方法来停止并输出某个计时器的时间。例如：
console.time('myTime'); //设定计时器开始 - myTime
console.timeEnd('mytime'); //结束并输出计时时长 - myTime
//输出: myTime:123.00 ms
再举一个通过计时器来计算代码块运行时间的例子：
console.time('myTime'); //开始计时 - myTime
for(var i=0; i < 100000; i++){
2+4+5;
}
console.timeEnd('mytime'); //结束并输出计时时长 - myTime
//输出 - myTime:12345.00 ms
6.以表格的形式输出数组
假设我们有一个像下面这样的数组：
var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]
要是你直接在控制台里输入数组的名称，Chrome会以文本的形式返回一个数组对象。但你完全可以通过console.table(variableName) 方法来以表格的形式输出每个元素的值。例如下图：
天啦噜！原来Chrome自带的开发者工具还能这么用！
7.通过控制台方法来检查元素
你可以直接在控制台里输入下面的方法来检查元素
inspect($('selector')) 会检查所有匹配选择器的DOM元素，并返回所有选择器选择的DOM对象。例如inspect($('#firstName')) 选择所有ID是 firstName 的元素，inspect($('a')[3]) 检查并返回页面上第四个 p元素。
$0, $1, $2等等会返回你最近检查过的几个元素，例如 $0 会返回你最后检查的元素，$1 则返回倒数第二个。
天啦噜！原来Chrome自带的开发者工具还能这么用！
8.列出某个元素的所有属性
你也可以通过控制台列出某个元素的所有属性：
dir($('selector')) 会返回匹配选择器的DOM元素的所有属性，你可以展开输出的结果查看详细内容。
天啦噜！原来Chrome自带的开发者工具还能这么用！
9.获取最后计算结果的值
你可以把控制台当作计算器使用。当你在Chrome控制台里进行计算时，可以通过$_来获取最后的计算结果值，还是直接看例子吧：
2+3+5
9 //- The Answer of the SUM is 9
$_
9 // Gives the last Result
$_ * $_
81 // As the last Result was 9
Math.sqrt($_)
9 // As the last Result was 81
$_
9 // As the Last Result is 9
天啦噜！原来Chrome自带的开发者工具还能这么用！
10.清空控制台和内存
当你需要这么做的时候，只需要输入 clear 然后回车就好啦!
如果我们在编排自己的app的时候，发现页面上显示的内容有错误，或者没有实现我们想要的效果，我们应该如何快速找到问题所在？
（1）观察console，看看控制台有没有报错，如果有是否是我们自己写的代码出现了问题。如果是，立即改正。 （2）如果页面没有报错，查看network中我们像服务器发送的请求，请求的服务名称是否正确，请求的数据是否是后台服务需要的数据格式。如果是，请改正。 （3）如果以上两方面都没有问题，那就不是前台页面的问题，可能是我们服务的问题，这就需要我们调试后台服务，按照前台的数据格式传入参数，查看是否返回了正确的结果，如果出错，查看日志信息， 看看是否有报错等问题。 以上三点几乎可以解决99%的问题，那1%的问题可能是平台的bug或者其他不可抗力因素。
使用Chrome浏览器F12调试普通JS的方法，也许大家都会，但是调试过程中常常发现，有些JS在Source中找不到呢？
这些JS是通过XHR请求实时动态加载的，在Source下的静态目录中找不到，那还怎么进行断点调试呢？
这里介绍一种经过验证、简便的方法：
在js代码的头部或者尾部加上如下这句话，其中custom.js可根据实际情况替换。
//@ sourceURL=custom.js
Chrome的开发者工具总共包含9个面板：
Elements，该面板包含了当前网页对应的html代码，通过该面板可以查找网页源代码中的任一元素,手动修改任一元素的属性和样式都能实时在浏览器里面得到反馈。
Console，该面板可以打印出开发过程中的日志信息，且可以作为与当前页面进行交互的Shell。
Sources，通过该面板可以打开当前网页相关的源文件，一般用于js文件的断点调试。
Network，记录了从用户发起页面请求到整个页面被加载这一过程中各个请求的相关信息，包括状态，返回资源类型，大小等等。开发者可以通过这些数据对当前页面的网络性能有一个直观的了解。
Timeline，记录当前网页的生命周期内所发生的各类事件及资源的加载时间。 Profiles，如果想要了解当前页面加载对于硬件资源的消耗情况，就可以通过该面板获取相关信息。比如记录cpu执行某个js文件的时间细节，显示js对象和相关的dom节点的内存消耗，记录内存的分配情况等。
Application，记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
Security，判断当前网页是否安全。
Audits，对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
1.ctrl + p ,输入文件名，打开想要调试的文件。
2.ctrl + f，输入函数名，定位到某个需要调试的函数。
3.添加断点。
4.重新加载页面，查看函数执行结果。
为了方便调试，还可以使用一些快捷键。
F8：恢复运行。
F10 : 步过，遇到自定义函数也当成一个语句执行，而不会进入函数内部。
F11 ： 步入，遇到自定义函数就跟入到函数内部。
Shift + F11： 步出，跳出当前自定义函数。
要打开任务管理器，直接在 Chome 界面中按下 Shift + ESC 快捷键即可。
Constructor -- 类名Distance -- 估计是对象到根的引用层级距离
Objects Count -- 给出了当前有多少个该类的对象
Shallow Size -- 对象所占内存（不包含内部引用的其它对象所占的内存）(单位：字节)
etained Size -- 对象所占总内存（包含内部引用的其它对象所占的内存）(单位：字节)
点击类名左边的三角形，可以看到所有该类的对象。对象后面的“@70035”表示的是该对象的ID（有人会错认为是内存地址，GC执行后，内存地址是会变的，但对象ID不会）。把鼠标停留在某一个对象上，会显示出该对象的内部属性和当时的值。
掌握Chrome常用快捷键 [返回目录]
可能你花了很长的时间才掌握了Firefox的快捷键，那么无需烦恼，因为Chrome 保留了 Firefox 的多数基本操作快捷键，比如打开新窗口或新标签。因此，Firefox 用户可以很轻松的过渡到Chrome。另外，Chrome也有不少自有的快捷键。以下是我们最常用的一些快捷键列表，有些可能是从火狐下移植过来的，有些是Chrome自有的。
1) 基本快捷键
Ctrl + Shift + T ：恢复已关闭的标签页（最多恢复10项）
Ctrl +B ：显示或隐藏书签栏
Ctrl + Shift +B ：打开书签管理器
Ctrl H ：打开浏览器历史页面
2) 地址栏快捷键
Ctrl + Enter ：自动添加前缀www和后缀.com并打开
Ctrl + K或Ctrl + E ：地址栏输入
Ctrl + F5或Shift + F5 ：强制刷新
CTRL + D：当前页添加为书签
Ctrl + U：查看源文件
Ctrl +0：页面恢为正常尺寸
HTTPS和HTTP的区别主要为以下四点：
① https协议需要到CA申请证书，一般免费证书很少，需要交费。
② http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
③ http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
④ http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
研究表明：用户最满意的打开网页时间是2-5秒，如果等待超过10秒，99%的用户会关闭这个网页。Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。网站的加载速度严重影响了用户体验，也决定了这个网站的生死存亡。
在示例中，当浏览器解析到 <script> 标签（第 4 行）时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，这意味着，其后的 styles.css 样式文件和<body>标签都无法被加载，由于<body>标签无法被加载，那么页面自然就无法渲染了。因此在该 JavaScript 代码完全执行完之前，页面都是一片空白。
由于脚本会阻塞页面其他资源的下载，因此推荐将所有<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响这样页面下载不会显得太慢。这是优化 JavaScript 的首要规则：将脚本放在底部。
代码压缩
使用压缩工具对JS、CSS代码进行压缩，提高页面加载速度（后期执行）。
尽量将样式写在单独的css文件里面，在head元素中引用
有时候为了图方便或者快速搞定功能，我们可能会直接将样式写在页面的style标签或者直接内联在元素上，这样虽然简单方便，但是非常不利于日后的维护。将代码写成单独的css文件有几点好处：
l 内容和样式分离，易于管理和维护
l 减少页面体积
l css文件可以被缓存、重用，维护成本降低