最近看一篇网文《浏览器自带开发工具的秘密》，里边介绍了几款浏览器自带开发工具使用的一些技巧，是两年多前的文章了，已经有些旧了，但很多经验技巧还是很有用，转载过来分享一下，原文附在最后。本文中针对这篇文章提到的chrome开发工具的一些技巧，结合我自己使用最新版本的经验（基于43.0..版本），为大家分享一下。
常规
用最新的开发版
开发工具会不断完善，在开发版可以体验。ChromeCanary是Chrome实验版，Canary和Chrome可以同时安装。你可以通过chrome://flags进一步加强你的Chrome开发工具，启用“EnableDeveloperToolsexperiments（启用开发工具实验）”。不要忘了点击页面底部的“现在重启”按钮。
找到开发工具
‘F12’快捷打开
右键点击页面，选择‘审查元素’，快捷方式是ctrl+shift+I
浏览器地址栏右侧有一个菜单按钮，点击之后，更多工具--开发者工具
选择开发工具的位置
开发工具右侧关闭按钮旁边有一个如图的按钮，点击可以使开发工具在浏览器底部和右侧切换，长按可以选择脱离浏览器，打开一个单独的开发者工具窗口。
设置
接上，在旁边还有一个齿轮形的按钮，点击可以进行设置，General是常规设置，在shortcuts里可以查看快捷键，方便使用。
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);
输出数据表格
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);什么也不输出。
任意Tab打开控制台
有时候我们需要在其他tab页查看console，在之前的按钮旁边还有一个..样式的按钮，点击即可打开控制台，或者也可以用Esc键打开控制台。
检查
通过面包屑导航DOM
点击下图左侧顶端的放大镜可以直接选择页面元素，选中之后点击页面元素，Elements标签当中的Dom树会直接展开。当你检查DOM树的节点时，节点的DOM路径面包屑列表显示在开发工具里。点击列表上的项，可以迅速切换节点
编辑
改变CSS值
如果有个元素需要修改margin，padding，width或者height，可以使用方向键增加/减少尺寸。简单使用上下方向键增加/减少1个单位。
“Shift”+上下方向键，可以增加/减少10个单位；“Alt”+上下方向键，可以增加/减少0.1个单位。
“Shift”+Page-Up/Page-Down，可以增加/减少个单位。
当你矫正尺寸时，这些快捷键非常实用。
改变:active，:hover，:focus，:visited状态样式
在开发工具里修改CSS非常爽，但是碰到hover之类的伪类就有点挠头了。恰好有解决方案。
Chrome有个按钮是干这用的，在“Elements”标签右手边看到一个虚线框和光标在一起的图标，它可以切换其它状态。
拖拽重排元素
在Chrome和Safari里，，“Elements”标签下，可以拖拽重排元素顺序。简单点击拖动元素即可，目标位置会出现一条线。
调试
用debugger;调试
添加此行代码：debugger;可以自动创建断点，当开发工具打开时运行，断点会自动创建。尽管快速添加断点很方便，不用在开发工具一行一行找，小心不要把debugger;提交到线上环境。
条件断点
不必每次生效时，条件断点很有用。例如，你知道你的代码在最后一项有bug，你可以用条件判断在最后一项时激活debugger。条件满足，断点触发。
在Chrome中创建条件断点，先创建个正常的断点，然后右击断点选择“编辑断点”添加条件。
DOM断点
如果特定的DOM改变，你的页面会被破坏，或者你只想找出元素属性或子元素改变，哪些代码生效，Chrome和Firebug均可以在DOM修改时设置断点，你可以找到代码问题的根源。简单点击你想监控的元素，右击选择“breakon”选项。
XHR断点
在Chrome，可以为XmlHttpRequest设置断点，你可以调试AJAX请求。到“Sources”标签选择“XHR断点”，点击右侧加号图标，输入部分或所有你想添加断点的URL。一旦请求返回，断点将生效，你可以看到返回的数据，并可单步调试后续操作。取消勾选可以关掉断点，右键选择“DeleteBreakpoint删除断点”删除断点。
检查断点的作用域并监控值
在Chrome，Javascript在断点处暂停时，你可以查看当前作用域的所有变量和对象，既可以悬浮查看，也可以通过控制台查看。右侧工具栏第一项Watch中可以添加变量名进行监控，使变量持续保持更新。
调试压缩后的JavaScript
下断点让JavaScript调试更容易，但是如果代码已经放到生成环境，很可能已被压缩。如何调试最小化的代码呢？庆幸的是一些浏览器已经支持解压你的JavaScript。在Chrome选择“sources”标签，找到相应的文件，然后点击“{}”图标（prettyprint，在面板底部）。
移动端
chrome浏览器可以直接模拟移动设备，包括所有主流的手机、平板等设备。在开发工具左侧顶部的放大镜旁边有一个手机模样的按钮，点击之后，可以切换到移动设备的查看模式。
上图中橙色部分可以通过下拉列表选择设备型号，或者直接修改宽高为自己需要的尺寸，然后刷新页面，即可查看在此设备或尺寸下，页面的表现。
上面给大家介绍了一些常用的开发技巧，chrome浏览器自带的开发工具还有许多强大高深的功能，大家可以在使用过程中慢慢摸索。
最后还是附上原文《浏览器自带开发工具的秘密》，其中还有诸如Firefox、IE、safari等浏览器开发工具的使用技巧，感兴趣的读者请猛戳下方的阅读原文
北京专业治疗白癜风的医院白癜风软膏能不能治白癜风