chrome开发者模式

就算你不是一名前端开发工程师，相信你也不会对Chrome浏览器感到陌生。根据最新的一份（2015/06）的浏览器市场占有率报告，Chrome近乎占有浏览器天下的半壁江山。简单、快捷使它成为了新时代人们的新宠。

如何唤醒开发者工具

通过菜单栏右上角的选项选择，或亦可以使用快捷键windows为F12、mac为alt+command+i

image.png

Elements

在Element中主要分两块大的部分
A：HTML结构面板
B：操作dom样式、结构的显示面板

image.png

如上图：左侧为html的页面结构，右侧为所选dom节点的样式面板
篮筐处按钮。
点击后可直接点击页面中按钮等元素以直接选中对应的dom节点。
点击红色框按钮可将页面变为适配移动端窗口，用以调试移动端应用。
在左侧可直接修改元素样式，以查看页面效果。

Console

展示页面的一些输出内容，或报错提示等。

image.png

Soruce

当前站点包含的资源都可在其中查看。

image.png

如上图：左侧为项目内静态资源目录。
右侧为具体文件内容。ps:由于webpack等模块化技术的运用，所看到的资源文件可能是经过压缩打包后的结果。如要查看具体项目对应文件，可使用ctrl+o，进行查询打开。可对代码进行断点操作用以调试程序。

Network

用以查看网络连接请求等内容的版块。可在其中查看页面向服务器发送的各类请求。

image.png

如上图，红框部分可对网络请求进行筛选，可更方便的找到自己想要查看的网络请求。

image.png
上图为一些特殊的浏览器操作：
1.group by frame ：对请求按窗口进行排序。

2.Disable cache : 禁用缓存。
3.Offline Online ：设为线下/线上模式。

网络请求内部结构（报文）

如下图，红框部分为一个请求的内容分类：
包括Headers、Preview、Response、Cookies、Timming

image.png

Headers报文头部

头部信息：包括请求服务地址、请求允许方式、请求缓存相关信息、以及请求传递参数。

Preview

服务端返回的数据预览

Response

网络请求返回的数据

Cookies

包括：发送的cookies信息及返回的cookies信息

Timing

本次网络请求得时间信息

以上为一些基础的chrome开发者工具的使用解析，均为简略说明，为让非前端开发人员对chrome的开发工具有一个简单了解，以方便日后再团队开发写作中，每个人都能有一个更好的错误定位能力，可初步判断bug是前端或是后端造成，减少无效的沟通成本。