很抱歉，这文章是我好久之前写的 图片是存在有道云的，不知道为什么在移动端无法加载
常用快捷键
chrome快捷键 左右切换tag页
left: ctrl + pgup
right: ctrl + pgdn
new tab: ctrl + t
1.文件快速切换
快捷键Ctrl + P 就可以快速查找你的工程文件。
2.源代码内部查找
如果你想要查找源代码的内容，你可以使用Ctrl + Shift + F (Cmd + Opt + F)并输入字符串关键词。
3.到某一行
当你在Chrome DevTools中打开一个源文件，你可以指定到任意一行，用快捷键 Ctrl + G (Windows 和 Linux), 或者 Cmd + L (Mac)并输入你想跳到哪一行。
你也可以示用Ctrl + O，并输入“：”+第几行。
4.在控制台中选中元素
在DevTools中你可以手动选择DOM元素。
$() 返回符合当前CSS选择器的第一个元素，例如 $(‘div’) 会返回页面中第一个div元素。
$$() 返回符合当前CSS选择器的一串 好多个 不是一个元素。
（下面的图是我在网上搜集的，自己写肯定没有这个配图说的清楚）
开发者工具面板各个板块介绍
Elements
常用方法：
1.鼠标移动到元素上会在原网页上显示蓝色印记；
2.在开发者工具下面显示元素在HTML里的位置关系；
3.在styles选项中编辑该元素的样式，并且看到html结构的实时更新；
4.左上角的箭头，鼠标点击后，移动到网页，下面会自动跳转到相应的元素上；
选中一个元素，右击鼠标，你会看到有一个弹出窗口出现，里面有若干选项
Add attribut: 为该元素添加属性
Edit attribute：修改该元素的属性
Force element state： 为元素激活某种状态（主要用在可以几乎的元素比如a、input、button等）
Edit as HTML：编辑该元素（你可以重写它的整个content）甚至修改它的标签名称
Break on：为该元素添加dom操作事件监听。
在element里可以调试css查看html的DOM，这些都是平常最常用的功能
然后chrome最可爱的css颜色选择，当你点击一个css的color属性后，就会出现下图，你就可以选择自己喜欢的颜色了，而且这时你移动鼠标到页面上任意位置会出现一个放大镜一样的取景器，点击就会在elelment面板上显示你点击位置的颜色相关信息。。。。。
点击color属性可以在rgba、hsl和hexadecimal中间来回切换颜色的格式
就像这样。。。。
DevTools有一个可以模拟CSS状态的功能，例如元素的hover和focus,可以很容易的改变元素样式。在CSS编辑器中可以利用这个功能
Network
Network是一个监控当前网页所有的http请求的面版，它主体部分展示的是每个http请求，每个字段表示着该请求的不同属性和状态
Name：请求文件名称
Method：方法（常见的是get post）
Status：请求完成的状态
Type：请求的类型
Initiator：请求源也就是说该链接通过什么发送（常见的是Parser、Script）
Size：下载文件或者请求占的资源大小
Time：请求或下载的时间
Timeline：该链接在发送过程中的时间状态轴（我们可以把鼠标移动到这些红红绿绿的时间轴上，对应的会有它的详细信息：开始下载时间，等待加载时间，自身下载耗时）
2.单击面板中的任意一条http信息，会在底部弹出一个新的面板，其中记录了该条http请求的详细参数header（表头信息、返回信息、请求基本状态—请参看http1.1协议内容对号入座）、Preview（返回的格式化转移后文本信息）、response（转移之前的原始信息）、Cookies（该请求带的cookies）、Timing（请求时间变化）
位置1：filter过滤器，可在输入框中输入关键字搜索对应请求的文件。
位置2：请求文件的列表里进行了分类，个人常用的是查看XHR的分类，查看Ajax请求。
位置3：设置网络的通信方式。默认"No thirotting"不节流。这里可以设置断网模式，或者模拟3G，4G网络等情况下页面加载的速度。网速可以在"settings"里面设置。
Sources
sources面板是调试中最常用的地方。
位置1：查看页面中加载的资源文件
位置2：如果浏览器装了插件，插件所需要的JS文件会在这里显示
位置3：使用ctrl+p/ctrl+o 打开某个文件
位置4：断点的操作
位置5：查看异步请求时所设置的定时器
位置6：点击右边的加号，可以增加监听的变量。不过鼠标放到JS文件中的变量时也会显示对应的值。
位置7：设置各种不同的断点。
当勾选XHR Breakpoints里的any XHR时，页面中触发Ajax请求时都会中断。
当勾选"Event listener breakpoint" 下的 Mouse（鼠标）下的 Click （单击）事件时，触发某个按钮的点击事件就会中断。
位置8：一般线上的代码都是打包后的代码，不利于调试。点击{}后格式化该文件。
这里我再就说一下怎么使用sources这个面板进行一些js的调试：
图中的4号区域有6个按键（有的版本这几个按键位置在source下面）
当你调试时按下第一个暂停（快捷键f8）,js停止运行，然后点击第三个想箭头一样的按钮（快捷键f10），javascript执行下一句，同理另一个箭头按钮表示向上执行，返回上一句js的状态。
设置断点：（当4号区域第五个按钮按下时）点击sources中间的代码行数，就会在这里设置一个断点，蓝色时表示激活断点，再次点击取消，这样刷新页面直接执行到你设置的断点处。
然后我就必须提一个比较可爱的功能了。。。。。代码美化。。。。。
以前看源码跟个鬼一样 所有js css全堆在一起，是个正常人都看不懂，但chrome在sources源代码的部分下面有一个按键 “{}” 点击后你就会发现世界美好了，，，，，
想快速的找到你点击某个特定的按钮或者链接的运行代码，只需要在你点击按钮前启用“Event listener breakpoint” Mouse：mouseover还有mouseout
我在div上写了一个mouseover的js当js检测到有运行到mouseover时就会显示出mouseover执行的function（）
你就可以看看事件是怎么执行的了
但使用这个功能可能会进入到第三方的代码库像jQuery,这时候你就需要花费一些调试的时间来到达真正的事件处理函数。最好的方法是标记“Blackbox Script”避免进入到第三方的脚本。调试时就再不会进入第三方的脚本库了，代码会一直运行到没有标记blackboxed的文件为止。你可以blackbox脚本通过右击调用栈里的第三方库的文件，并从上下文菜单中选择“Blackbox Script”即可：
然而一般我不用jquery
console
Rainbow Text(一个小效果)
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22),
color-stop(0.15, #f2f),
color-stop(0.3, #22f),
color-stop(0.45, #2ff),
color-stop(0.6, #2f2),
color-stop(0.75, #2f2),
color-stop(0.9, #ff2),
color-stop(1, #f22) );
color:transparent;-webkit-background-clip: text;font-size:5em;');
console.time & console.timeEnd 计算耗时
对代码执行的耗时情况进行测试时，处理手工在代码中创建前后两个时间戳进行对比，在dev tools中，我们可以使用console.time与 console.timeEnd实现。
console.time("测试用时");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("测试用时");
关闭Console界面
console.log：普通信息
console.log('%c你好','color:red;','小明','你知道被妈妈打了么');
console.info：提示类信息
console.error：错误信息
console.warn：警示信息
var data = [{'品名': ‘室友', '数量': 4}, {'品名': '电脑', '数量': 9}];
console.table(data);显示图表
另外，console.log() 接收不定参数，参数间用逗号分隔，最终会输出会将它们以空白字符连接。
console.assert
当你想代码满足某些条件时才输出信息到控制台，那么你大可不必写if或者三元表达式来达到目的，cosole.assert便是这样场景下一种很好的工具，它会先对传入的表达式进行断言，只有表达式为假时才输出相应信息到控制台。
var isDebug=false;
console.assert(isDebug,'开发中的log信息。。。');
console.count
除了条件输出的场景，还有常见的场景是计数。
当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑，内置的console.count可以很地胜任这样的任务。
function foo(){
//其他函数逻辑blah blah。。。
console.count('foo 被执行的次数：');
}
foo();
foo();
foo();
console.dir
将DOM结点以JavaScript对象的形式输出到控制台
而console.log是直接将该DOM结点以DOM树的结构进行输出，与在元素审查时看到的结构是一致的。不同的展现形式，同样的优雅，各种体位任君选择反正就是方便与体贴。
console.dir(document.body);
console.log(document.body);
console.time & console.timeEnd
输出一些调试信息是控制台最常用的功能，当然，它的功能远不止于此。当做一些性能测试时，同样可以在这里很方便地进行。
比如需要考量一段代码执行的耗时情况时，可以用console.time与 console.timeEnd来做此事。
这里借用官方文档的例子：
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");
另外值得一赞的是，Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点，多么滴熟悉。
$('body')
copy
通过此命令可以将在控制台获取到的内容复制到剪贴板。
copy(document.body)
然后你就可以到处粘了：
这里的控制台命令只能在控制台中环境中执行，因为他不依附于任何全局变量比如window，所以其实在JS代码里是访问不了这个copy方法的，所以从代码层面来调用复制功能也就无从谈起。
Timeline
Timeline面板是查看动态流的。在这里可以测试页面的性能问题。比如页面的渲染速度，动画的流畅度等。
位置1：点击这个按钮开始Record，按钮变成红色，再次点击停止记录。
位置2：选择记录生成的图表模式
位置3：需要记录的类型
位置4：fps指每秒的帧数，这个可以衡量页面的渲染速度。如果超过60fps，则页面可能需要优化下了。如果超过30fps，则页面的卡顿现象会比较严重。
位置5：记录期间页面加载的比重。看哪个范围的值特别大，占用时间最长，然后有针对性的优化。
Settings
勾选下面这个选项后就会在控制台中打印出所有的Ajax请求地址。
Profile（性能优化）
性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。
1: <script type="text/javascript">
2: function All(){
3: alert(11);
4: for(var i=0;i<10;i++){
5: funcA(1000);
6: }
7: funcB(10000);
8: }
9:
10: function funcA(count){
11: for(var i=0;i<count;i++){}
12: }
13:
14: function funcB(count){
15: for(var i=0;i<count;i++){}
16: }
17:
18: console.profile('性能分析器');
19: All();
20: console.profileEnd();
21: </script>
Audits 加载速度优化参照的是雅虎前端工程师的十四条黄金建议
有趣功能
远程调试
Android与PC双向同步
支持在手机浏览器/native app中调试，支持端口转发，支持虚拟主机名映射（virtual host mapping）
准备条件：
1. Chrome32+
2. Android USB连接
3. 浏览器调试需要Android4.0+，以及Android Chrome（PC的Chrome要比Android版本高才行）
4. app调试需要Android4.4+，以及WebView.setWebContentsDebuggingEnabled(true);
步骤：
1. 开启USB调试，手机打开Chrome进入需要调试的页面
2. PC打开Chrome进入chrome://inspect，勾选Discover USB devices
3. 在设备列表中点击inspect开始远程调试
4. 计时console.time/timeEnd(str); // 成对出现，配合使用
设备传感仿真
设备模式的另一个很酷的功能是模拟移动设备的传感器，例如触摸屏幕和加速计。你甚至可以恶搞你的地理位置。这个功能位于元素标签的底部，点击“show drawer”按钮，就可看见Emulation标签 --> Sensors.
有道云真的给我印象很不好
参考这个吧
timeline 工具详解
待读
很多的技巧 英文 https://umaar.com/dev-tips/
