开发者模式
- 右键–审查元素
- 快捷键:
- windows7: f12
- windows10: fn+f12
- mac: fn+f12
分模块学习
1.Elements
-
在Element中主要分两块大的部分
(1) HTML结构面板
(2) 操作dom样式、结构、时间的显示面板 -
查看伪类样式,比如:hover
-
$(selector)的用法
- $0、$1、$2、$3 和 $4 命令用作在 Elements 面板中检查的最后五个 DOM 元素。$0 返回最近一次选择的元素,$1 返回仅在最近一次之前选择的元素或对象,依此类推。
- $ ==> document.querySelector and $$ ==> document.querySelectorAll
- $_ 返回最近评估的表达式的值。
了解更多请参考:command line api
2.Console
这个除了查看错误信息、打印调试信息、写一些测试脚本以外,还可以当作Javascript API查看用。
例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行。
[点击查看图片](http://www.cr173.com/up/2012-9/2012091013365076964.png)
3.Sources
- 说明
Sources标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容。 - 命令断点调试(很重要)
4.Network
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助。注意是在你打开Chrome开发者工具后发起的请求,才会在这里显示的哦。
-
Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态 。
- Name:请求文件名称
- Method:方法(常见的是get post)
- Status:请求完成的状态
- Type:请求的类型
- Initiator:请求源也就是说该链接通过什么发送
- Size:下载文件或者请求占的资源大小
- Time:请求或下载的时间
- Timeline:该链接在发送过程中的时间状态轴(我们可以把鼠标移动到这些红红绿绿的时间轴上,对应的会有它的详细信息:开始下载时间,等待加载时间,自身下载耗时)。
-
单击面板中的任意一条http信息,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数。
- Headers(表头信息、返回信息、请求基本状态)
- Preview(返回的格式化转移后文本信息)
- response(转移之前的原始信息)
- Cookies(该请求带的cookies)
- Timing(请求时间变化)