常规
找到开发工具
快捷方式：
“F12”（Windows）
“Cmd”+“Option”+“I”（Mac）
右键选择“InspectElement检查元素”
Safari需要在首选项高级显示开发菜单，启用开发工具
Firebug是Firefox扩展，需要在此安装
用最新的开发版
开发工具会不断完善，在开发版可以体验。ChromeCanary是Chrome实验版，Canary和Chrome可以同时安装。你可以通过chrome://flags进一步加强你的Chrome开发工具，启用“EnableDeveloperToolsexperiments（启用开发工具实验）”。不要忘了点击页面底部的“现在重启”按钮。
FirefoxAurora提供Firefox最新特性预览。不幸的是，Aurora不能和Firefox同时打开。
WebkitNightly是Safari测试版，因此有些不稳定。WebkitNightly可以和Safari同时运行。
OperaNext是Opera最新改良版，会提供一些新的功能和特性。
现在浏览器的发布周期为12周，浏览器自动更新，变化是增量的。
移动开发工具位置
有时候不想让我们的工具在屏幕底部，大部分的开发工具提供了配置选项。
Chrome开发工具，左下角图标允许改变停靠设置。快速点击它，会在底部和右侧切换。长按可以选择停靠选项（独立窗口打开），你也可以点击并拖拽移动开发工具。
Firefox和Safari开发工具，停靠选项在右上角临近关闭按钮的位置，可以新窗口打开。
要改变停靠位置，可点击左上角小虫子，选择Firebug界面位置（上/下/左/右）。Firebug右上角可以快速选择：最小化，新窗口，关闭。
开发工具调试响应式设计
当调试移动站点的时候，停靠在右侧可充分利用空间，并且可以快速调整浏览器视口和开发工具的宽度，调试不同网页宽度。
在Chrome开发工具左下角，点击按钮可切换下侧或右侧停靠位置。
在Chrome开发工具右下角，点击并选择“General”标签，你可以改变工具的外观，停靠右侧时可以垂直显示面板。
学习快捷键
Chrome的快捷键列在设置菜单里，点击右下“齿轮”图标，可以看到“Shortcuts”标签。
IE的快捷键是在线的。
Opera的快捷键也在设置按钮里。
Console控制台
Log,Info,Debug,Warn,Error
不必用alert时，console.log()是个极其有用的输出调试工具；
console.log()是printf风格，因此你可以这么做：console.log("%sis%dyearsold.","Bob",42)。
可以用console.info()输出提示信息；console.debug()输出调试信息；console.warn()输出警示信息；console.error()输出错误信息。
你还可以用%c模式，把第二个变量作为样式格式参数。例如：
console.log("%cThisisgreentextonayellowbackground.","color:green;background-color:yellow");
Firebug只不过显示的图标不同，消息的背景色是一致的。
根据MDN的消息，他们不赞成使用console.debug()，因此没有图标标识，赞成用console.log()代替。
Chrome和Safari（nightly）用info时不显示图标，用debug时显示蓝图标；用warn时显示黄图标；用error时显示红图标。
你可以输出多个值，用逗号隔开即可，方便在同一行输出对象和数组，例如：console.log(Kings:,kings);
输出数据表格
console.table()可以用来输出数组或者对象列表，以一种合适的表格形式显示。
例如：console.table([[10,true,"blue"],[5,false]])将输出以下格式：
如果元素的数量不匹配，表格将显示undefined表示没有数据。
自定义列名，属性名必须在对象中指定元素。自定义（index）的值，可以给每个属性命名。
第二个可选的变量允许你明确指定哪一列要输出。
console.table({ "London":{population:,country:"UK",elevation:"24m"}, "NewYork":{population:,country:"USA",elevation:"10m"}}, ["population","country"])
结果如下：
Assert
console.assert()用于测试表达式的真假。
它有两个参数：表达式和显示信息。如果表达式是FALSE时，信息将会显示。
例如：console.assert(!true,Thisisnottrue);输出”Thisisnottrue”。console.assert(true,Thisisnottrue);什么也不输出。
使用控制台定时器
使用console.time(label)，定时器在控制台启动。字符串label是必须的，我们想停止它时，有个定时器引用。调用console.timeEnd(label)定时器停止，控制台输出定时器执行的毫秒数（通过label识别）。
持久控制台
有时页面加载时，你需要保留控制台信息。有时在点击或离开页面时，我们需要这个作为参考或者用来查看日志。
在Chrome里，右键点击控制台，显示菜单里有“PreserveLoguponNavigation”，选择它将保存你的控制台内容。
Firefox默认会保存控制台信息。你可以点击右上角“清除”按钮清除控制台日志，或者打开/关闭工具。
在Firebug里，有个显著的按钮用来保持控制台内容，就在控制台的上部。
Opera默认保存控制台内容，你可以右键选择“clearconsole”清除控制台日志或者重开工具。
重新运行命令
如果已经在JavaScript控制台输入过命令，你想重新运行它，简单点一下“上”箭头即可翻看原先的命令列表。
任意Tab打开控制台
在Chrome，尽管控制台有自己的tab，在任意tab按下“ESC”键即可打开控制台，因此不必切换tab了。
Safari控制台在开发工具的底部，“ESC”键用来切换控制台日志的可见性。在命令行执行一个命令也将打开控制台日志。
在Firefox，快速切换到控制台：“Ctrl+Shift+K”（Windows），“Cmd+Option+K”（Mac）。
改变框架焦点
用命令行运行JavaScript非常实用，但是如果页面有iframe，你又不知道如何定位框架，就不好办了。
在Firebug，你可以用下面的命令聚焦框架：
cd(window.frames[‘frameName’]);
Chrome可以在控制台底部的下拉列表中改变框架。
Opera在“Console控制台”和“Documents文档”有个改变框架的下拉菜单。
你可以通过document.getElementsByTagName("iframe");获得iframe列表。
引用当前和前一个元素
如果你的“Elements”标签选择了一个元素，你可以用$0调用它。输入$0.innerHTML试试看。
在Firebug和Opera，你可以用$1选择前一个元素。
在Chrome和Safari，你可以通过$1-$4选择更靠前的元素。
在Firebug，你可以通过$n(2)-$n(5)选择更靠前的元素。
最终求值表达式
如果你需要先前表达式的结果用于后面的求值，你可以使用便利$_，最终表达式结果自动展示给你。
Firebug1.12开始支持。
检查
通过面包屑导航DOM
当你检查DOM树的节点时，节点的DOM路径面包屑列表显示在开发工具里。
Chrome和Opera，显示在DOM检查器的底部。
Firebug，Firefox和Safari，显示在DOM检查器的顶部。
你可以直接点击节点，或者按箭头键导航面包屑。按左箭头是父节点，按右箭头是第一个子项。上下箭头导航到下一个或前一个子节点。没有更多子节点，上下箭头导航回到DOM树。
在Firefox，你可以右击面包屑看兄弟节点列表，可以快速导航到兄弟节点。
在Safari，你可以左击面包屑看兄弟节点。
搜索DOM节点
在Firefox，你可以在“检查器”面板搜索特别的节点。面包屑右边有个小的搜索框有同样作用。
聚焦时搜索框变大。
输入一个匹配的选择器，DOM树将自动高亮它。
在Chrome，你可以按Ctrl-F打开对话框，CSS选择器如期工作。
检查字体
Firefox有个字体检查器，可以查看当前元素使用的字体。
你可以修改默认的“Abc”文字，在字体列表底部有个按钮，可以显示页面所有字体。
浏览你的响应式网站
在响应式设计时代，最重要的是如何在任意尺寸的设备查看我们的网站。尽管我们可以调整浏览器大小，开发工具里还是有一些其它的工具可用。
在Chrome开发工具的“设置”面板（工具右下角点击齿轮），在“Overrides”标签，你会发现“DeviceMetrics设备指标”选项，你可以指定宽度和高度，以及字体缩放尺寸。你可以把开发工具停靠在右侧，然后调整页面大小测试。
Firefox开发工具内置一个‘响应式设计模式’工具，此工具在开发工具的右上角。它包含一些预设的尺寸，你可以添加需要的尺寸。Firefox也提供旋转的选项，你可以测试landscape和portrait模式。
3D视图
Firefox开发工具可以3D视图查看你的网站，可以方便地查看元素嵌套关系，点击开发工具右上角立方体图标可以启动它。
编辑
改变CSS值
如果有个元素需要修改margin，padding，width或者height，可以使用方向键增加/减少尺寸。简单使用上下方向键增加/减少1个单位。
“Shift”+上下方向键，可以增加/减少10个单位；“Alt”+上下方向键，可以增加/减少0.1个单位。
“Shift”+Page-Up/Page-Down，可以增加/减少个单位。
当你矫正尺寸时，这些快捷键非常实用。
改变:active，:hover，:focus，:visited状态样式
在开发工具里修改CSS非常爽，但是碰到hover之类的伪类就有点挠头了。恰好有解决方案。
Chrome有个按钮是干这用的，在“Elements”标签右手边看到一个虚线框和光标在一起的图标，它可以切换其它状态。
Firebug的HTML标签右侧，点击样式小箭头，可以选择想要的状态。Firebug并没提供:visited状态选项。
Firefox为你选择的DOM元素提供一个下拉菜单，右键选择“查看元素”可以看到它，Firefox同样没提供:visited状态选项。
在Opera，“样式”标签有个像列表的图标，Opera提供了:link和::selection选项。在新版Opera，位置跟Chrome一致了。
在Safari，DOM上右击一个元素，显示一个菜单，里面有“ForcePsuedo-Classes”选项。
拖拽重排元素
在Chrome和Safari里，，“Elements”标签下，可以拖拽重排元素顺序。简单点击拖动元素即可，目标位置会出现一条线。
使用SASSSourceMaps
使用CSS预处理器有许多优势，但是在浏览器开发工具中修改比较困难。例如，当你再次运行SASS时，在开发工具中保存的编译后CSS可能被覆盖，不太理想。SASS3.3以上（可以安装使用‘sassgeminstallsass–pre’），为SASS文件创建映射很容易，你可以很容易的保存修改。
首先，为SASSwatch命令增加--sourcemap，像这样：
sass--watchscss/devtoolsecrets.scss:css/devtoolsecrets.min.css--style