chrome浏览器中 F12 功能的简单介绍

- 日理万妓 2024-04-18 10:02 125阅读 0赞

由于F12是前端开发人员的利器，所以我自己也在不断摸索中，查看一些博客和资料后，自己总结了一下来帮助自己理解和记忆，也希望能帮到有需要的小伙伴，嘿嘿！

首先介绍Chrome开发者工具中，调试时使用最多的三个功能页面是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有网络（Network）等。

![70][]

*   元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
 *  控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。
 *  源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
 *  网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。

**1、元素（Elements）**

查看元素代码：点击如图![70 1][]箭头（或用者用快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置 。

查看元素属性：可从被定位的源码中查看部分，如class、src，也可在右边的侧栏中查看全部的属性，如下图位置查看

![70 2][]

修改元素的代码与属性：可直接双击想要修改的部分，然后就进行修改，或者选中要修改部分后点击右键进行修改，如下图

**![70 3][]**

**注意：这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。**

右边的侧栏个功能的介绍:如下图所示

![70 4][]

**2、控制台（Console）**

*  查看JS对象的及其属性
 *  执行JS语句
 *  查看控制台日志：当网页的JS代码中使用了console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉。

**3、源代码（Sources）**其主要功能如下介绍

![70 5][]

**4、网络（Network）大体功能如下：**

![70 6][]

** **

**请求文件具体说明**

**![70 7][]**

**一共分为四个模块：**

*  Header：面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
 *  Preview：预览面板，用于资源的预览。
 *  Response：响应信息面板包含资源还未进行格式处理的内容
 *  Timing：资源请求的详细信息花费时间

*  1.  打开浏览器,按f12,点击Network,可以查看相关网络请求信息,记得是打开f12之后再刷新页面才会开始记录的

![1017421-20181009110827235-215258733.png][]

*  查看Network基本信息,请求了哪些地址及每个URL的网络相关请求信息都可以看的到
    
    URL，响应状态码，响应数据类型，响应数据大小，响应时间
 *  ![1017421-20181009110836301-1232344571.png][]
 *  请求URL可进行筛选和分类
    
    选择不同分类,查看请求URL,方便查找
 *  ![1017421-20181009110846349-1066479371.png][]
 *  也可以直接Filter搜索查询相关URL
    
    可以输入关键字或者正则表达式进行查询
 *  ![1017421-20181009110858415-1843040361.png][]
 *  Waterfall能分割重要的请求耗时,查看具体请求耗时在哪个地方
    
    鼠标指到相关区域可以看到具体耗时
 *  ![1017421-20181009110906562-374372873.png][]
 *  我们具体分析下里面每个各代表什么意思,分别耗时多少,通过这个来分析服务器到底是哪个环节出了问题
    
    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调试页面各个功能分别是什么？
        
         ![1017421-20181009112153521-1698682115.png][]
        
         
        
         
    
    Elements标签页
    
    Elements标签页的左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性。
    
     
    
    ![1017421-20181009112204863-862968394.png][]
    
     
    
    Elements标签页的右侧
    
     
    
    ![1017421-20181009112215886-1353618376.png][]
    
     
    
    Network标签页
    
    Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示
    
    ![1017421-20181009112227978-1348717541.png][]
    
     
    
    Sources标签页
    
    Sources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。
    
     ![1017421-20181009112236552-1469961277.png][]
    
     
    
    Audits标签页
    
    这个对于优化前端页面、加速网页加载速度很有用;点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了
    
     
    
    ![1017421-20181009112245949-1069130619.png][]
    
     
    
    Console标签页
    
    就是Javascript控制台了
    
     ![1017421-20181009112254204-1403249234.png][]
    
     
    
     
    
    在控制台中可以直接模拟手机、调整UA、修改网络连接状态。
    
     
    
    ![1017421-20181009112303609-14395621.png][]

[70]: https://img-blog.csdn.net/20180410172402581?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzI0MzU2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180410173113988?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzI0MzU2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180410174131636?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzI0MzU2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20180410175401686?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzI0MzU2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/20180410180342393?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzI0MzU2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: https://img-blog.csdn.net/2018041018293410?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzI0MzU2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: https://img-blog.csdn.net/20180410184756216?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzI0MzU2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 7]: https://img-blog.csdn.net/20180410185344632?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzI0MzU2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[1017421-20181009110827235-215258733.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/fd28983bf4444fd4ba235bd62977f1ca.png
[1017421-20181009110836301-1232344571.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d2b569e0665f4f1db43eae0534802056.png
[1017421-20181009110846349-1066479371.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/2c3196310cfa499782af724f82f28cd2.png
[1017421-20181009110858415-1843040361.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d584695b32714cbc89b5af1f01f3ca1c.png
[1017421-20181009110906562-374372873.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/99dbdc9c799444c396ee127be9b55792.png
[1017421-20181009112153521-1698682115.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b7121c9b1650467dbc1e6f8a27039a3a.png
[1017421-20181009112204863-862968394.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c5de92b7d1ba42009e0788a223340a4d.png
[1017421-20181009112215886-1353618376.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/950ef548aa244b46b74ca7bffbd6908b.png
[1017421-20181009112227978-1348717541.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d2961bd8ab4d40999209ec4c373321fe.png
[1017421-20181009112236552-1469961277.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0e0a2161492a488ca9c6a1d2518a7ba9.png
[1017421-20181009112245949-1069130619.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ae720e19ea864981b8c28cc92024c7aa.png
[1017421-20181009112254204-1403249234.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/534cbc44afff4c7a9bc3b13d77aee00c.png
[1017421-20181009112303609-14395621.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5adcd057d4e8473ebd69202fd1f8cb6e.png