浏览器开发者工具详解
Elements标签
DOM
Addattribute添加属性
Editattribute修改属性
EditasHTML编辑html
Deleteelement删除节点
Copy
Cutelement剪切节点（仅能在内部paste）
Copyelement复制节点
Pasteelement粘贴在选中节点内部的最后位置
CopyouterHTML复制节点（暂不了解区别）
Copyselecter复制CSS选择器
CopyXPath复制XPath选择器
css个xPath区别点击查看
简单来说：
Xpath则更加强大，定位更加准确，可以匹配文本，可以寻找父级。
例：//*[@id="select"]/div[3]/div[2]/div[1]/div[2]
css选择器更加快速，但是不能选择父级（据说css4将增加此功能）
例：#select>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div.lf.select_title
Hideelement隐藏节点
Forcestate添加鼠标状态
Breakon为DOM结构打断点，当其改变状态时，会顿住
Expandrecursively展开所有节点
Collapsechildren收缩子节点
Scrollintoview使页面滚动到选中节点位置
Focus
Styles查看页面当前样式、此处可临时修改样式
此处会同时会显示当前样式的来源xxx.css以及行数line，还有当前结构的盒模型。
点击Showall则会显示所有的默认样式
EventListeners注册的事件通过选择切换，可以查看当前结构绑定事件，以及父级绑定的事件,备注：悬浮可临时remove此事件
Ancestors
All、Passive、Blocking
Frameworklisteners
DOMBreakpoints所添加的DOM结构断点
Properties选中节点所有的方法与属性
Accessibility（暂不了解）
查看DOM结构、临时修改DOM内容
查看页面Styles、临时修改页面Styles
查看DOM结构的Computed(计算后的属性)
查找节点绑定的事件EvenListeners
console控制台
这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作JavascriptAPI查看用。例如我想查看console都有哪些方法和属性，我可以直接在console中输入"console"并执行
console.assert()
判断第一个参数是否为真，false的话抛出异常并且在控制台输出相应信息。
console.clear()
清空控制台。
console.count()
以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。
console.countReset()
与console.count()配合，清除调用次数。
console.error()
打印一条错误信息，使用方法可以参考stringsubstitution。
console.group()
打印树状结构，配合groupCollapsed以及groupEnd方法;
console.groupCollapsed()
创建一个新的内联group。使用方法和group相同，不同的是groupCollapsed打印出来的内容默认是折叠的。
console.groupEnd()
与console.group()配合使用，结束当前Tree
console.info()
打印以感叹号字符开始的信息，使用方法和log相同
console.log()
打印字符串，可以使用printf风格的占位符。支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。
例如：console.log("%d年%d月%d日",2011,3,26);
console.profile()
可以以第一个参数为标识，开始javascript执行过程的数据收集。和chrome控制台选项开Profiles比较类似，具体可参考chromeprofiles
console.profileEnd()
配合profile方法，作为数据收集的结束。（暂时未发现结果）
console.table()
将数据打印成表格。console.table[en-US]
console.time()
计时器，接受一个参数作为标识。
console.timeEnd()
与console.time()配合使用，接受一个参数作为标识，结束特定的计时器。
console.trace()
打印stacktrace.
console.warn()
打印一个警告信息，使用方法可以参考stringsubstitution。