chrome 前端 开发工具 控制台 教程
工欲善其事必先利其器
前端开发利器：chrome控制台 快捷键：F12
官方文档：https://developers.google.com/chrome-developer-tools/docs/overview
常用的栏目：Elements,Resources,NetWork,Scripts,Console
Elements：
左侧：
显示的是实时HTMl，不是最初加载的源代码。可以使用左下角放大器工具选择当前页面上的元素，以快速定位双击可编辑。右键快捷菜单有一些常用功能。修改完成后会及时生效。
Styles
查看当前元素的所有css样式，也可以双击编辑，对于数值值，可以使用上下键逐步调整。双击“}”可以新建一条css。输完width后输入“:”会跳到值框。按回车结束也可以新建样式规则。对于A标签还可以切换状态：:active
其他：
Metrics：显示当前元素的DOM框模型Properties：显示当前元素的DOM属性，按照类的继承层级排列，越靠下层级越高。Event Listeners：显示当前元素上绑定的事件。
Resources
显示所有本页相关的资源：（如果显示不全，请在控制台开启的情况下刷新当前页面）Freames下是加载的css,js,html文件。Cookies。其他HTML5相关的本地存储。很常用的功能：搜索。搜索加载的所有文件的内容。
NetWork
在控制台开启的时候侦听http链接。点击单个条目，消息展示本次http请求的详细内容。包括http请求头和http Body。
Scripts
选择想要查看的js文件如果代码格式很乱可以通过大括号工具格式化代码。点击代码行号可以插入断点。在中断情况下可以用鼠标移到变量上查看变量值右键也有很多有用工能。右上角工具：在下一次js运行时中断。一句一句运行。进入当前语句调用的函数内。结束当前函数。Watch Expressions 查看表达式值Call Stack 函数调用栈Scope Variables 变量作用域，当前所有可以访问的变量。不同作用域：全局，局部，闭包Breakpoints所有断点。
Console
可以即时的运行js，可以当做js练习IDE来用。箭头表示上一个语句的返回值。常用命令console.dir(obj)会输出详细的对象内容。页面上的所有Errors,Warnings,还有console.log,dir等都会显示在本控制台上。
详细的console api：
中文：http://visionsky.blog.51cto.com/733317/543789
英文：http://getfirebug.com/wiki/index.php/Console_API
