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