做开发的时候，调试程序是必不可少的一个环节。
如何调试前端程序代码呢？这就需要用到浏览器开发者工具。
我们编写的网页代码(html、css、JavaScript)是必须通过浏览器来解析、渲染，才能在浏览器上展示为网页的，那么基本上所有的浏览器上都自带了开发者工具，这样对于开发者来说，不但可以在浏览器上看到自己编写的网页效果，同时还能在浏览器上进行调试，边调试边能够看到调试后的网页的效果，这是非常方便的。
接下来我们以谷歌浏览器为例，来了解下开发者工具（developers tool），其他浏览器上也一定会有开发者工具，只不过在不同的浏览器里面，开发者工具所在的入口位置可能会不同。
其实不同的浏览器自带的开发者工具，功能都是差不多的。不过谷歌浏览器、火狐浏览器做的更好一点而已，对开发者来说，尤其是前端开发者，最专业的浏览器应该是火狐浏览器，不过用其他的也可以，不用太过于吹毛求疵。
现在我打开谷歌浏览器(没有谷歌浏览器的小伙伴可以自己在电脑上下载安装一下)，然后在谷歌浏览器中打开百度这个网页，然后在浏览器地址栏最右边，会看到有3个纵向排列的小点，然后点击那3个小点，在出现的下拉菜单中，把鼠标滑到"更多工具"，就会在又出现一个菜单，在这个菜单上，就能找到"开发者工具"。如下图所示：
然后点一下这个"开发者工具"，就会调出浏览器的开发者工具，如下图所示，我画圆圈的区域就是开发者工具区域：
我们在这个开发者工具上，看到的这些代码，就是现在浏览器上显示的百度这个网页的代码，我们把鼠标在这些代码上滑动，当鼠标停留在某一个html元素上时，就会在开发者工具左边，把该html元素在网页上所占的区域，上面覆盖一个浅蓝色阴影的效果，表示这一块区域就是鼠标所指的html代码所渲染出来的。如下图：
我们还可以修改网页上的东西，如何修改呢？
比如：
我们把鼠标滑到搜索框右边的"百度一下"这个按钮上面，然后点击一下右键，就会弹出一个菜单，在这个菜单上找到并点击"检查"，就会在右侧的开发者工具中以深蓝色区域选中"百度一下"这一块所在的html代码（我们看到"百度一下"这个按钮是一个input元素），然后我们在选中的代码上右键点击，就会弹出一个菜单，在弹出的菜单中点击"Edit as HTML"，然后这一块的代码就会变成可编辑的状态了，我们可以修改这一块代码，比如我把value="百度一下"修改一下，改为"抖音一下"，具体操作及修改后的效果如下图所示：
小伙伴们可以这样，自己用开发者工具改一改网页，随便玩一玩，体验一下。
但是这种修改其实只是在我们本地的浏览器上改动，这相当于只是一个调试网页的过程，并不会对百度的网页真正完成修改，因为这些代码都是在人家百度的服务器里面的，除非你能黑进人家的服务器进行修改。
当我们刚开始打开开发者工具的时候，默认是在"Elements"这个菜单里面，Elements就是元素的意思，表示在这里调试的是html元素，Elements后面还有Console（控制台）、Sources（资源）等等其他的功能模块菜单。现在我们先了解Elements，其他的菜单我们后面再了解。
我们还看到，开发者工具的上半部分现在是html代码，下半部分默认选中的是"Styles"这个菜单，在这个菜单里面，就是css代码。如下图：
我们把鼠标滑到开发者工具的css区域，css属性的前面自动会出现单选框，表示这个css属性在起作用，如果我们把对勾去掉，就表示这个css属性不会作用在对应的html元素上了。
我们把鼠标停留在某一个css选择器（.classname、#idname就是选择器，所谓选择器，就是表示选择某一个html元素）上，该选择器对应的html元素在网页中就会覆盖上蓝色阴影，表示这个css是作用在这里的html元素上的。我们看到"百度一下"所在的input元素的class是"s_btn"，我们可以去掉这个选择器（.s_btn就是选择器，表示选择了class="s_btn"这个html元素，对它进行修饰美化）后面的花括号里面的css属性前面的，去掉之后，我们看到"百度一下"这个按钮就标的很丑了，如下图：
我们还可以双击css代码区域，进行css属性的修改。比如我们在.s_btn后面的花括号里面，找到color这个属性，这里默认的属性是color:#fff，#fff是十六进制的颜色值，表示白色，我们把"百度一下"这几个字的字体颜色变成红色。可以把#fff改成red，如下图所示：
以上就是对浏览器的开发者工具的简单介绍，我们现有一个基本的了解，知道它的功能，以及如何进行简单的调试。

    
浏览器开发者工具基本使用教程
谷歌Chrome浏览器开发者工具教程—基础功能篇 - 算命de博客 - CSDN博客

JavaScript Console 对象 | 菜鸟教程



转载于:https://www.cnblogs.com/gitwow/p/10444415.html

在阅读下面内容之前，那么些简单的了解浏览器开发者工具到底是什么东西，到底有什么用途。
浏览器开发者工具到底是什么？
其实简单的说，浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具，当然只要你有兴趣想要了解，只要你对这个世界充满这好奇，什么东西你都可以了解。
开发者工具到底有什么用？
它的作用在于，帮助开发人员对网页进行布局，比如HTML+CSS，帮助前端工程师更好的调试脚本（JavaScript、jQuery）之类的，还可以使用工具查看网页加载过程，获取网页请求（这个过程也叫做抓包），抓包是非常有意思的过程，而每一个浏览器厂商生产出来的浏览器都会有自己的杀手锏，也就是功能上的差别，那么这个时候你就找一个最适合自己的浏览器使用就可以，接下来就是介绍我常用的三个浏览器。
一、谷歌浏览器chrom
一般在windows系统上浏览器开发者工具打开都是按F12快捷键，但是今天我是用mac进行讲解的。

那么上面的这张图就是打开chrom浏览器工具的方式，也可以通过快捷键打开

上面这张图就是打开chrom开发者工具之后的样子，现在简单的介绍：
第一个框：是用于屏幕适配的，也就是传说中的chrom能够调试各种移动设备的屏幕分辨率。

上面这张图就是点击之后的效果，用于移动设备屏幕适配的功能
Element标签：该标签使用来查看页面的HTML标签元素的，能够也就是查看源码，我们可以看到布局，可以看到用到的样式，还有用到的链接等等。
console标签：这个就是一个web控制台
sources标签：这个是显示资源文件的

1.该选择框使用来选择资源的，当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件。
2.这个地方使用来调试js代码的地方，这个非常重要，看到行号上面有蓝色的标签，这个标签就是断电，当我们需要调试程序的时候打一个断电，然后通过3这个工具栏进行调试，那么调试过程就不详细解释，也就是打一个断电然后刷新页面程序会调到你打断点的地方，然后通过4来查看程序中变量的值什么的。
3.中的标签，第一个是停止状态的按钮就是表示程序是否停止（在debug时），后面的是程序继续跳过方法，跳过下一个语句，调到上一个语句。
Network标签：这个就是抓包常用的工具

那么这个页面就是用于抓包的页面，我们需要分析页面的请求，比如模拟登陆什么的都需要去分析程序是怎么在后台执行的，接下来就，我们可以看到Headers（请求消息头） Preview（预览） Response（响应） Timing（求求时间）Cookie这些东西
最上面还有一个工具栏，有一个红色的圆点和静止符号的按钮，那么这两个按钮，当为红色按钮的时候表示当前的请求不被清空（但是这里的请求是不跳转页面的请求，当跳转到新的页面，那么也会请求也会被清空），后面这个按钮就是清空请求的。
下面还有一行工具栏，这个工具栏主要是用来选择和过滤请求消息的。
再下面可以看到时间线，这个就是记录一个请求开始到结束的时间。
注意：当你需要请求到另一个页面的时候都不清空你的请求的时候需要勾选上Preserve log，同时让红色按钮显示红色
TimeLiness标签：这个就是我们上面讲的请求时间
那么后面的几个标签也不是很常用，我就不做过多的说明，现在简单的了解这些基本的入门使用知识就基本够用，我相信这些功能都用熟之后你也会知道其他的功能的。
二、火狐浏览器FireFox
通过谷歌浏览器的认识那么我们就很简单的使用火狐咯，其实在mac上我是非常喜欢火狐的，因为功能是非常的强大。
现在只讲火狐和谷歌浏览器的区别：

火狐浏览器的打开方式，这里我们选择Web控制台，当然你可以打开没一个试试，试试总是没有错的对吧，我不经意的打开了WebIDE简直就是惊呆我了，这个直接就是一个写前端的神奇没有什么好说的咯。你也可以打开试试，每一个都可以试试，这些功能真的很强大。
当打开之后，我们会发现，火狐真的给人眼前一亮的赶脚

看吧，是不是有一种眼前一亮的赶脚，反正我是有的（当然了你第一次打开的话坑定和我的不一样了，我这个是设置主题之后的效果，你也可以去设置咯）
看看，和chrom没有什么不同吧，都是那几个，而且人家是中文的，对一些看到English就发晕的同学简直是不能太有爱
功能上没什么区别，但是在我抓包的过程中发现，火狐抓包的能力真的强，我自己开始是用谷歌现在我选择使用火狐更多
那么就简单的介绍不同的地方

大家可以看上图，我觉得这个就是我不用深入研究就能知道的最大区别啦：
1、看到没有，这里列出的消息头 Cookie 响应什么的一个都不少，而且人家多了参数 安全性
参数这个就不用多说了，在我们抓包分析的过程中参数绝对是非常重要的内容，所以能够直接给你展示出来，可以给你减少去分析参数的过程，那么安全性呢，不言而喻了吧。
2、我们再来看，编辑和重发 原始头 能够模拟请求，简直碉堡啦，有没有，喜欢到爆，谷歌当然也可以有，但是好像是要装插件的。
好啦，还有很多不同，但是我说啦，只要你掌握了上面所讲的这些东西，我相信你去研究其他的功能都会是小菜一碟咯。
那么我们来看看设置里面给我们提供了那些自定义功能，这个也是非常强大的功能哦

当点击图中1按钮（设置按钮）后将出现一个神奇的地方，就是这里面，这里面也有很多功能啦，可以一个一个勾选上去体验吧孩子。
注意：看到图中2没有，这个勾选上有什么作用，和Chrom中的Preserve log是一个作用，当你请求道要挑传的页面的时候如不勾选上那么你的请求会被清空，勾选上了那么就不会被清空，这样更加有力你分析问题咯。
三、Safari浏览器
Safari的开发者工具呢也很不错，但是从功能上我觉得是不能够满足我内心强大欲望的，so，我一般上网用Safari，开发调试用上面两种，上网用Safari真的是方便而且简洁。
好了简单的放上几张图让大家感受吧：

这个呢就是打开Safari开发者工具的方式，在顶部菜单栏下面开发者标签中打开显示错误控制台就可以看到下面的场景咯

上面是打开网络这个标签的，我们可以看到该有的功能是一个都没少，而且我觉得非常简洁，说真的我如果不是一个开发者，我会爱死这样的一个浏览器，简洁大方，并且用户体验非常好，没有杂七杂八的功能。
想起一句话：好的产品不是还能不能扩展，而是做到没有办法再精简。

看吧这就是调试代码的地方，功能上没有什么不同，但是感觉很规范，很简洁，很友好。
如果你是入门，我相信这些已经够啦，当你熟练运用了这些功能之后我相信你自己去研究就非常容易啦
记录学习的每一步，记录每一次的成长！！！！

浏览器原理学习笔记08—浏览器开发者工具
文章目录
浏览器原理学习笔记08—浏览器开发者工具
1. Chrome 开发者工具
2. 网络分析工具
2.1 Network 面板
2.2 优化时间线上耗时项
3. 性能分析工具概述
4. Audits
4.1 利用 Audits 生成 Web 性能报告
4.2 性能报告解读
4.3 根据报告优化 Web 性能
4.3.1 性能分析相关重要时间节点
4.3.2 针对报告六项指标进行优化
5. Performance
5.1 生成报告
5.2 报告分析
5.2.1 概览面板
5.2.2 性能指标面板
5.2.3 详情面板
5.3 Main 指标分析
5.3.1 导航阶段
5.3.2 解析 HTML 数据阶段
5.3.3 生成可显示位图阶段


Write By CS逍遥剑仙

我的主页: www.csxiaoyao.com

GitHub: github.com/csxiaoyaojianxian

Email: sunjianfeng@csxiaoyao.com

1. Chrome 开发者工具
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C7QIeVAg-1590812985882)(/Users/csxiaoyao/Downloads/浏览器原理学习笔记/pic/08/01.png)]
前面章节中提到过 Elements面板、Console面板、Sources面板的使用，本章主要讲解 NetWork 面板和 Audits 面板、Performance 面板。
2. 网络分析工具
2.1 Network 面板


面板下方 DOMContentLoaded 表示构建 DOM 所需要的 HTML、JavaScript、CSS 文件加载完成的时间


面板下方 Load 表示浏览器加载所有的资源(包括图像、样式表等)的时间


2.2 优化时间线上耗时项


排队(Queuing)时间过久
大概率是由浏览器为每个域名最多维护 6 个连接导致的，可以将资源放在 n 个域名下就可以同时支持 6 * n 个连接了，这种方案称为 域名分片 技术。还可以把站点升级到 HTTP2解除每个域名最多维护 6 个 TCP 连接的限制。


第一字节时间(TTFB)时间过久
TTFB 是反映服务端响应速度的重要指标，即浏览器在数据发送出去后等待接收服务器第一个字节的数据的时间 Waiting (TTFB)。可能是服务器生成页面数据的时间过久，也可能是网络的原因，可以通过服务器缓存、CDN等方式解决。


3. 性能分析工具概述
Web 性能的定义：Web 应用在浏览器上的加载和显示的速度。因此，可以从 页面加载阶段 和 页面交互阶段 两个阶段来分析。
Chrome 提供了两个完善的工具帮助开发者发现 性能瓶颈：Performance 和 Audits。Perfomance 提供了更多细节数据，也更加复杂；而 Audits 比较智能，但隐藏了更多细节。Audits 非常适合用来分析加载阶段的性能，Performance 更适合用来分析页面交互阶段的性能。
推荐使用 Chrome Canary 版并在隐身模式下工作，确保安装的扩展、浏览器缓存、Cookie 等数据不会影响到检测结果。
4. Audits
4.1 利用 Audits 生成 Web 性能报告
cmd + shift + N 打开隐身窗口，输入待测试网址并打开开发者工具中的 Audits 标签，然后配置 设备类型 (Device) 和 监测类型 (Categories)，有以下监测类型：

Performance：监测 Web 性能
Progressive Web App：监测 PWA 程序性能
Best practices：监测 Web 应用是否采用了最佳实践策略
Accessibility：监测是否实施了无障碍功能，让身体有障碍的人可以方便地浏览 Web 应用
SEO：监测 Web 应用是否实施了搜素引擎优化

此处选择 Performance 后点击运行，生成性能报告。

4.2 性能报告解读

Audits 除了会给出评分和性能指标外，还会分析该站点并提供优化建议，报告主要由以下几部分组成：

Metrics：提供六项性能指标和截图，还可以点击 View Trace 按钮跳转 Performance 标签
Opportunities：可优化项，给出可以直接优化的建议
Diagnostics：手动诊断，采集了一些可能存在的影响页面加载性能的指标，需要根据实际情况手动排查
Runtime Settings：运行时设置，给出测试的设备信息

4.3 根据报告优化 Web 性能
4.3.1 性能分析相关重要时间节点


First Paint：FP，渲染进程确认请求后开始创建空白页面的时间点
First Content Paint：FCP，关键资源 (js、css) 加载完成后修改 DOM，引发重排重绘等一系列操作，在页面中绘制第一个像素的时间点
Largest Content Paint：LCP，继续执行 JavaScript 脚本，首屏内容完全绘制完成的时间点。介于 FCP 和 LCP 之间的 FMP 已不推荐，略过
DOMContentLoad：在 JavaScript 脚本执行结束后渲染进程判断 DOM 生成完毕，触发 DOMContentLoad 事件
onLoad：所有资源加载结束后触发 onLoad 事件

4.3.2 针对报告六项指标进行优化
Metrics 提供的六项性能指标可以帮助开发者优化 Web 性能：

First Paint：首次绘制(FP)，过长可能是由于网络原因导致 HTML 文件加载时间过久
First Meaningfull Paint：首次有效绘制(FMP)，推荐使用下面的首屏时间 LCP 指标替代 FMP 进行分析
Speed Index：首屏时间，也称 Largest Content Paint (LCP)，过长则需要针对具体情况分析是加载关键资源过久还是 JavaScript 执行时间过久
First CPU Idle：首次 CPU 空闲时间，也称 First Interactive，表示页面达到最小化可交互的时间，优化方式与 LCP 一致
Time to Interactive：完全可交互时间(TTI)，即页面内容已经完全显示、所有 JavaScript 事件已注册完成的时间，如果过久，可以推迟执行一些和生成页面无关的 JavaScript 工作
Max Potential First Input Delay：最大估计输入延时，预估 Web 页面在加载最繁忙的阶段，窗口中响应用户输入所需的时间，可以使用 WebWorker 来执行一些计算以释放主线程，还可以重构 CSS 选择器以执行较少的计算

5. Performance
5.1 生成报告
不同于 Audits，Perofrmance 只是单纯地采集性能数据并按时间线的方式展现。Audits 只能监控加载阶段的性能数据，Performance 还可以监控交互阶段的性能数据，但两个阶段需要分开录制。设置完 Network 和 CPU 等信息后，点击 reload 按钮会刷新页面录制加载阶段性能数据；点击 record 按钮则录制交互阶段性能数据并手动停止。
5.2 报告分析
报告页分为三个面板：概览面板、性能面板和详情面板。

5.2.1 概览面板
概览面板以时间线展示了一些关键的历史数据指标，如页面帧速 (FPS)、CPU 资源消耗、网络请求流量、V8 内存使用量 (堆内存) 等，还以不同颜色竖线展示了关键时间点。


FPS出现红色块表示红色块附近帧渲染时间过久，可能卡顿
CPU图层面积太大表示CPU使用率过高，可能某个 JavaScript 脚本占用太多主线程时间，影响其他任务执行
若内存一直增加，可能出现了内存泄露

5.2.2 性能指标面板
一般先用概览面板定位问题的时间节点，再用性能面板分析该时间节点内的性能数据。

性能面板展示了特定时间段内的多种性能指标数据，与 渲染流水线 息息相关。

Main：记录渲染进程的主线程的任务执行过程，后续会详细介绍
Compositor：记录合成线程的任务执行过程。绘制结束后，渲染主线程会将绘列表制提交 (commit) 给合成线程，因此合成线程的任务记录很重要
Raster & GPU：记录合成线程执行任务过程中的 光栅化线程池 Raster 和 GPU 进程主线程的任务执行过程
Chrome_ChildIOThread：记录 IO 线程的任务记录，在页面事件循环部分讲述过该 IO 线程
Network：与网络面板的瀑布流类似
Timings：记录一些关键时间节点，如 FP、FCP、LCP 等
Frames：记录每帧的画面
Interactions：记录用户交互操作记录

5.2.3 详情面板
详情面板用于展示性能面板中图形对应的详细数据。

5.3 Main 指标分析
通过下面的简单页面代码分析页面加载过程。
<html>
<head>
    <title>Main</title>
    <style>
        .area {
            border: 2px ridge;
        }
        .box {
            background-color: rgba(106, 24, 238, 0.26);
            width: 5em;
            height: 5em;
            margin: 1em;
        }
    </style>
</head>


<body>
    <div class="area">
        <div class="box rAF"></div>
    </div>
    <br>
    <script>
        function setNewArea() {
            let el = document.createElement('div')
            el.setAttribute('class', 'area')
            el.innerHTML = '<div class="box rAF"></div>'
            document.body.append(el)
        }
        setNewArea()   
    </script>
</body>
</html>

下图为报告页的精简图，灰色横条代表 Task 任务，灰色横条下的彩色横条为对应过程调用。

5.3.1 导航阶段
该阶段主要是从网络进程接收 HTML 响应头和 HTML 响应体。

导航阶段的任务实际上是在老页面的渲染主线程上执行的，点击 Performance 重新录制按钮后，浏览器进程会通知网络进程 send request，当网络进程收到 content-type 为 text/html 的响应头 (Receive Respone) 后，接着执行 DOM 事件 (pagehide、visibilitychange、unload 等)，然后开始接收 HTML 数据 (Recive Data 可能有多个)，完成后触发 Finish load。
5.3.2 解析 HTML 数据阶段
该阶段主要是将接收到的 HTML 数据转换为 DOM 和 CSSOM。

这个阶段的主要任务为 ParseHTML，解析过程中遇到 script 标签则 Evalute Script，执行脚本首先要 Complie Script，编译后进入执行过程，执行全局代码时 V8 会先构造一个 Anonymous 过程，然后全局调用 setNewArea，该函数涉及 DOM 操作，因此会强制执行 ParserHTML。DOM 生成完成后触发 readyStateChanged、DOMContentLoaded 等相关 DOM 回调事件，最后 Reculate Style 生成 CSSOM。
5.3.3 生成可显示位图阶段
该阶段主要是利用 DOM 和 CSSOM 经过显示流程生成可显示位图。

在生成完 DOM 和 CSSOM 后，渲染主线程会在显示流程前执行一些 DOM 事件回调 (readyStateChange、load、pageshow)，然后经过计算布局 Layout、更新层树 Update LayerTree、生成绘制列表 Paint、合成位图 Composite Layers 操作完成全部主线程任务并生成位图。

主线程 Composite Layers 后将绘制列表等信息提交给合成线程 Compositor，完全由合成线程来执行合成任务。合成线程维护了一个 Raster 线程池，执行 Rasterize Paint 任务完成光栅化操作，而光栅化在 GPU 进程中执行，生成的图层会被提交给浏览器进程进行合成并最终显示在页面上。
Main 指标可以帮助开发者分析页面性能瓶颈，如 JavaScript 是否执行过久或代码里是否存在强制同步布局等操作，以便针对性地优化。