【F12】chrome浏览器中F12功能的简单介绍chrome浏览器中 F12 功能的简单介绍
由于F12是前端开发⼈员的利器，所以我⾃⼰也在不断摸索中，查看⼀些博客和资料后，⾃⼰总结了⼀下来帮助⾃⼰理解和记忆，也希望能帮到有需要的⼩伙伴，嘿嘿！
chrome浏览器是什么浏览器图标⾸先介绍Chrome开发者⼯具中，调试时使⽤最多的三个功能页⾯是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有⽹络（Network）等。
元素（Elements）：⽤于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
控制台（Console）：控制台⼀般⽤于执⾏⼀次性代码，查看JavaScript对象，查看调试⽇志信息或异常信息。
源代码（Sources）：该页⾯⽤于查看页⾯的HTML⽂件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试
JavaScript源代码，可以给JS代码添加断点等。
⽹络（Network）：⽹络页⾯主要⽤于查看header等与⽹络连接相关的信息。
1、元素（Elements）
查看元素代码：点击如图箭头（或⽤者⽤快捷键Ctrl+Shift+C）进⼊选择元素模式，然后从页⾯中选择需要查看的元素，然后可以在开发者⼯具元素（Elements）⼀栏中定位到该元素源代码的具体位置。
查看元素属性：可从被定位的源码中查看部分，如class、src，也可在右边的侧栏中查看全部的属性，如下图位置查看
修改元素的代码与属性：可直接双击想要修改的部分，然后就进⾏修改，或者选中要修改部分后点击右键进⾏修改，如下图
注意：这个修改也仅对当前的页⾯渲染⽣效，不会修改服务器的源代码，故⽽这个功能也是作为调试页⾯效果⽽使⽤。
右边的侧栏个功能的介绍：如下图所⽰
2、控制台（Console）
查看JS对象的及其属性
执⾏JS语句
查看控制台⽇志：当⽹页的JS代码中使⽤了console.log()函数时，该函数输出的⽇志信息会在控制台中显⽰。⽇志信息⼀般在开发调试时启⽤，⽽当正式上线后，⼀般会将该函数去掉。
3、源代码（Sources）其主要功能如下介绍
4、⽹络（Network）⼤体功能如下：
请求⽂件具体说明
⼀共分为四个模块：
Header：⾯板列出资源的请求url、HTTP⽅法、响应状态码、请求头和响应头及它们各⾃的值、请求参数等等
Preview：预览⾯板，⽤于资源的预览。
Response：响应信息⾯板包含资源还未进⾏格式处理的内容
Timing：资源请求的详细信息花费时间
1. 打开浏览器，按f12，点击Network，可以查看相关⽹络请求信息，记得是打开f12之后再刷新页⾯才
会开始记录的
2. 查看Network基本信息，请求了哪些地址及每个URL的⽹络相关请求信息都可以看的到
URL，响应状态码，响应数据类型，响应数据⼤⼩，响应时间
3. 请求URL可进⾏筛选和分类
选择不同分类，查看请求URL,⽅便查
4. 也可以直接Filter搜索查询相关URL
可以输⼊关键字或者正则表达式进⾏查询
5. Waterfall能分割重要的请求耗时，查看具体请求耗时在哪个地⽅
⿏标指到相关区域可以看到具体耗时
6. 我们具体分析下⾥⾯每个各代表什么意思，分别耗时多少，通过这个来分析服务器到底是哪个环节出了问题
Queueing 是排队的意思
Stalled 是阻塞请求访问该URL的主机是有并发和连接数限制的，必须要等之前的执⾏才能执⾏之后的，这段时间的耗时
DNS Lookup 是指域名解析所耗时间
Initial connection 初始化连接时间，这⾥⼀般是TCP 3次连接握⼿时间
SSL https特有，是⼀种协议
Request sent 发送请求所消耗的时间
Waiting 等待响应时间，这⾥⼀般是最耗时的
Content Download 下载内容所需要消耗的时间
7
我们了解了上⾯每个耗时的时间，才能根据对应时间来修改和优化服务器访问的速度
留个作业,⼤家看看下⾯这张图，分别都耗时在哪⾥呢，我们⼜该怎么定位问题及解决⽅案呢?我们之后讲解
如何使⽤浏览器的F12调试页⾯？
⼀个程序员按照要求编写⼀个⽹页，不可能⼀次编写就完全达到⽬的，⼀般要对⾃⼰的的代码修改调试⼏次后才能到达要求，浏览器的F12开发⼈员⼯具就可以很⽅便的帮助程序员调试⾃⼰的代码。
F12 开发⼈员⼯具是⼀套按需采⽤的⼯具，⽹站开发⼈员可以随时在任何⽹页上使⽤ F12 ⼯具，从⽽快速调试 JavaScript、HTML 和级联样式表 (CSS)，还可以跟踪并查明⽹页或⽹络的性能问题。
F12调试页⾯各个功能分别是什么？
Elements标签页
Elements标签页的左侧就是对页⾯HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性。
Elements标签页的右侧
Network标签页
Network标签页对于分析⽹站请求的⽹络情况、查看某⼀请求的请求头和响应头还有响应内容很有⽤。注意是在你打开Chrome开发者⼯具后发起的请求，才会在这⾥显⽰
Sources标签页
Sources标签页可以查看到请求的资源情况，包括CSS、JS、图⽚等的内容。也可以设置各种断点。对存储的内容进⾏编辑然后保存也会实时的反应到页⾯上。
Audits标签页
这个对于优化前端页⾯、加速⽹页加载速度很有⽤；点击run按钮，就可以开始分析页⾯，分析完了就可以看到分析结果了
Console标签页
就是Javascript控制台了
在控制台中可以直接模拟⼿机、调整UA、修改⽹络连接状态。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。