chrome 开发者工具可以非常好的帮助我们分析和处理 web 请求中遇到的各种问题，当然像 ie 火狐等都有。在实际的工作过程中使用 chrome 较多，所以这里着重下下 chrome 的使用，其他类似
打开开发者工具
1.选择地址栏后面的三个点按钮 —更多工具—开发者工具，或者按快捷键，Windows 和 mac 还是有区别的
Windows 是 ctrl+Y mac 是 option+command+I
或者右键点击检查打开
打开之后会显示这样的对话框，注意后边，默认可能这个框是在侧边的，我们可以去调整，我是喜欢在下面
查看源码
1.点击Elements 选项，可以查看当前网页的源码，右侧是显示样式表和盒模型等
在右侧可以选择设置，在弹出的页面选择要显示的功能
具体的可以自行研究，包括快捷键
回调当前设置的主页面，再次选择找到 show console drawer
在这个页面，我们可以设置 user-agent
在user-agent 中设置
切换到移动端模式
1.点击 elements 旁边的图标，可以预览移动端下的页面布局，可以选择在那种舍不下显示以及定义尺寸 是否横屏
##console
console 选项用来显示当前页面的一些调试或错误信息
输入 js 语句
过滤器后面可以选择日志级别
source
source 下可以查看当前页面的所有元素，js、css 以及外部链接的加载内容
network
这个功能最重要，一般网络出现问题，页面元素无法加载，我们都可以在这里看到
当前发现如上图所示，一片空白，是因为你是在页面已经加载完毕后打开了控制台，需要刷新下，一般我喜欢俺 command+shift+r强制刷新，可以拖拽时间轴上的滚动条浏览指定时间加载的元素内容。
另外，如果希望查看指定类型的文件，比如图片，可以在时间轴上方的菜单栏中进行过滤，如果只希望看图片的，可以选择 Img。也可以按文件名过滤，在 filter 中输入名称过滤
红色部分的按钮可以调整或隐藏时间轴和显示文件列表的模式
在底层会显示当前页面加载了多少个元素以及总共耗时，默认是 ms，如果是s，则表示页面加载时间整理过长，可以针对性的看下究竟是哪个元素耗时过长
可以对 time 进行排序查看，另外如果是文件访问404，可以通过状态查看
另外在该选项中还可以模拟页面的网络环境，选择对应的网络环境进行测试页面加载
在 No throtting 户名的三角按钮选择
disable cache 可以禁止浏览器缓存
查看证书
1.切换到 security 可以查看当前证书加载的相关内容
点击 view certificate 查看证书信息
好了，目前就讲到这里，chrome还有很多特别高级的设置没有提到。期待你的发现。
