工欲善其事必先利其器
前端开发利器：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