Chrome开发者工具学习笔记

简介

Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具。我们可以使用开发者工具来重演，调试和剖析我们的网站。开发者工具主要包含Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板、Security面板和Audits面板，这些功能主要在前端开发中用的比较多

面板功能介绍

• Elements：查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈
• Console：记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell
• Sources：断点调试JS
• Network：从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
• Performance（原名：Timeline）：评估实时网页性能以及相关的数据
• Memory：堆栈快照、JavaScript函数内存分配、隔离内存泄漏
• Application：该面板主要是记录网站加载的所有资源信息，包括存储数据、缓存数据、字体、图片、脚本、样式表等
• Security：通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS
• Audits：对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议

Elements面板

• 双击DOM树视图里面的节点，可以实时编辑标签属性，修改后按下回车，效果就会立刻反应在浏览器里面，各种页面内容都可修改，但如果刷新一下，相当于重新下载页面，修改会变删除
  
• 当然还有右侧的一些其它功能，例如Style面板可以实时修改CSS的属性值，Computed面板可以编辑左侧选中的盒子模型参数等，这些内容更改之后可以即时显示在页面，所示前端用这个面板调试页面，简直不要太舒服
  

Console面板

• 通过JS代码或者命令行console.log()、console.warn()和console.error()可以将日志信息输出到控制台，且可以作为与JS进行交互的命令行Shell，这里有个小技巧，上下键可切换回之前的命令，shift + 回车可输入多行信息，输入clear()或者快捷键Ctrl + L可以清屏，Tab键可以代码自动补全
  

Sources面板

可以在这个面板里面设断点，调试JS代码，也可以在工作区打开自己的本地文件调试

Network面板

Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化，该面板主要包括5大块模块

• Controls 控制Network的外观和功能。
• Filters 控制Requests Table具体显示哪些内容。
• Overview 显示获取到资源的时间轴信息。
• Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
• Summary 显示总的请求数、数据传输量、加载时间信息。

其中 Requests Table 显示如下信息列

• Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing
• Status HTTP状态码
• Type 请求的资源MIME类型
• Initiator 标记请求是由哪个对象或进程发起的（请求源）
• Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
• Time 请求或下载的时间，从发起Request到获取到Response所用的总时间
• Waterfall 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序

Performance（原名：Timeline）

评估实时网页性能以及相关的数据，点击如图所示按钮即可绘制火焰图，此功能可实时绘制一段时间当前页面时间轴的性能轨迹，然后生成一张图表

例如，我在视频网站绘制几秒图后，点击Stop完成，绘制完成后会得到如下火焰图，显示性能报告，我们根据性能报告用来分析页面得性能，从而找到性能瓶颈

主要由四大模块组成

• Controls 录制开关和控制录制过程中需要记录哪些信息。
• Overview 网页性能的概要信息。
• Flame Chart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
• Details 当选择一个指定的事件后，会显示这个事件的更多信息；当没有选择事件时，会显示指定的时间帧信息。

Memory 面板

堆栈快照、JavaScript函数内存分配、隔离内存泄漏

Application 面板

记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等

Security 面板

可以去调试网页安全和认证等问题，确保你的网站上实现HTTPS（判断网页安全性）

点击View certificate 可以查看证书信息（颁发给、颁发者、证书有效期），如果网页是安全的，则会显示这样一条消息：This page is secure (valid HTTPS)
HTTPS和HTTP的区别主要为以下四点：
① https协议需要到CA申请证书，一般免费证书很少，需要交费。
② http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
③ http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
④ http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

Audits 面板

对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。

目前先简单介绍一下各模块，之后用到了再补充