当前位置: 代码迷 >> Web前端 >> chrome 前端 开发工具 控制台 课程
  详细解决方案

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

热度:1319   发布时间:2012-11-22 00:16:41.0
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
  相关解决方案