很抱歉，这文章是我好久之前写的 图片是存在有道云的，不知道为什么在移动端无法加载
常用快捷键
chrome快捷键
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.左上角的箭头，鼠标点击后，移动到网页，下面会自动跳转到相应的元素上；
选中一个元素，右击鼠标，你会看到有一个弹出窗口出现，里面有若干选项
当你想代码满足某些条件时才输出信息到控制台，那么你大可不必写if或者三元表达式来达到目的，cosole.assert便是这样场景下一种很好的工具，它会先对传入的表达式进行断言，只有表达式为假时才输出相应信息到控制台。
var isDebug=false;
console.assert(isDebug,'开发中的log信息。。。');
console.count
除了条件输出的场景，还有常见的场景是计数。
当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑，内置的console.count可以很地胜任这样的任务。
function foo(){
//其他函数逻辑blah blah。。。
console.count('foo 被执行的次数：');
}
foo();
foo();
foo();
Timeline
Timeline面板是查看动态流的。在这里可以测试页面的性能问题。比如页面的渲染速度，动画的流畅度等。
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); // 成对出现，配合使用
timeline 工具详解
待读
很多的技巧 英文 https://umaar.com/dev-tips/
网友评论