chrome 前端 开发工具 控制台 教程

[size=x-large]工欲善其事必先利其器
前端开发利器：chrome控制台 [color=red]快捷键：F12[/color][/size]
[size=large]官方文档：[url]https://developers.google.com/chrome-developer-tools/docs/overview[/url][/size]
[size=x-large]常用的栏目：Elements,Resources,NetWork,Scripts,Console[/size]

[size=x-large]Elements：[/size]
[img]http://dl.iteye.com/upload/attachment/0066/4466/4f704280-8e27-30ef-849c-f379e974fcd3.png[/img]
[size=large]
左侧：
[list]
[*]显示的是实时HTMl，不是最初加载的源代码。
[*]可以使用左下角放大器工具选择当前页面上的元素，以快速定位
[*]双击可编辑。右键快捷菜单有一些常用功能。
[*]修改完成后会及时生效。
[/list]
Styles
[list]
[*]查看当前元素的所有css样式，也可以双击编辑，对于数值值，可以使用上下键逐步调整。
[*]双击“}”可以新建一条css。输完width后输入“:”会跳到值框。按回车结束
[*]也可以新建样式规则。
[*]对于A标签还可以切换状态：:active
[/list]
其他：
[list]
[*]Metrics：显示当前元素的DOM框模型
[*]Properties：显示当前元素的DOM属性，按照类的继承层级排列，越靠下层级越高。
[*]Event Listeners：显示当前元素上绑定的事件。
[/list]
[/size][size=x-large]Resources[/size][size=large]
[list]
[*]显示所有本页相关的资源：（如果显示不全，请在控制台开启的情况下刷新当前页面）
[*]Freames下是加载的css,js,html文件。
[*]Cookies。
[*]其他HTML5相关的本地存储。
[*]很常用的功能：搜索。搜索加载的所有文件的内容。
[/list]
[/size][size=x-large]NetWork[/size][size=large]
[list]
[*]在控制台开启的时候侦听http链接。
[*]点击单个条目，消息展示本次http请求的详细内容。
[*]包括http请求头和http Body。
[/list]
[/size][size=x-large]Scripts[/size][size=large]

[img]http://dl.iteye.com/upload/attachment/0066/4468/a00003fb-27a3-3863-912b-b15b25fa8b45.png[/img]

[list]
[*]选择想要查看的js文件
[*]如果代码格式很乱可以通过大括号工具格式化代码。
[*]点击代码行号可以插入断点。
[*]在中断情况下可以用鼠标移到变量上查看变量值
[*]右键也有很多有用工能。
[*]右上角工具：在下一次js运行时中断。一句一句运行。进入当前语句调用的函数内。结束当前函数。
[*]Watch Expressions 查看表达式值
[*]Call Stack 函数调用栈
[*]Scope Variables 变量作用域，当前所有可以访问的变量。不同作用域：全局，局部，闭包
[*]Breakpoints所有断点。
[/list]
[/size][size=x-large]Console[/size][size=large]

[img]http://dl.iteye.com/upload/attachment/0066/4470/bfca8222-422c-32a1-b247-2043ce0b9e8b.png[/img]

[list]
[*]可以即时的运行js，可以当做js练习IDE来用。
[*]箭头表示上一个语句的返回值。
[*]常用命令console.dir(obj)会输出详细的对象内容。
[*]页面上的所有Errors,Warnings,还有console.log,dir等都会显示在本控制台上。
[/list]
详细的console api：
中文：[url]http://visionsky.blog.51cto.com/733317/543789[/url]
英文：[url]http://getfirebug.com/wiki/index.php/Console_API[/url]
[/size]