前端Chrome浏览器调试总结

前言

前言：调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天，如何在前端开发中降低开发成本，提升工作效率，掌握前端开发调试技巧尤为重要。

功能介绍

chrome开发者工具最常用的四个功能模块

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

元素（ELements）

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

• 查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。

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

• 侧栏个功能的介绍：
  

PS注：在元素（ELements）上的修改仅对当前浏览器的页面展示生效，不会修改源代码。

控制台（Console）

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

以下是在在查漏补缺时，找到的一个B站up主做的不错的图片整理，还有一些其他知识点的整理，有兴趣的可以去了解一下；另外框住的是一些是本人开发过程中用的最多的几个console语句，基本上能解决大部分日常遇到的问题。

源代码（Sources）

主要功能介绍：

网络（Network）

面板组成：
Chrome的Network面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要，下面简单介绍下这5个部分的作用。

• 控制器：控制面板的外观与功能
• 过滤器：过滤请求列表中显示的资源
• 概览：显示HTTP请求、响应的时间轴。
• 请求列表：默认时间排序，可选择显示列。
• 概要：请求总数、总数据量、总花费时间等。
  
  控制器：
  
  过滤器：
  

按字符串

• 键入所需要过滤的字符串到过滤文本框

按类型

• XHR、JS、CSS、Img、Media、Font、Doc、WS（WebSocket）、Manifest或Other（此处为列出的任何其他类型）
• 多个类型，按住Command（Mac）或Ctrl（Windows、Linux）
• 按时间过滤：概览面板，拖动滚动条
• 隐藏Data URLs：CSS图片等小文件以 BASE64 格式嵌入HTML中，以减少HTTP请求数

属性过滤

• domain:仅显示来自指定域的资源。您可以使用通配符字符（*）纳入多个域
• has-response-header：显示包含指定HTTP响应标头的资源
• is：使用 is:running 可以查找 WebSocket 资源，is:from-cache 可查找缓存读出的资源
• Larget-than：显示大于指定大小的资源（以字节为单位）。将值设为1000等同于设置为1k
• method：显示通过指定 HTTP 方法类型检索的资源
• mime-type：显示指定 MIME 类型的资源
• mixed-content：显示所有混合内容资源（mixed-content:all）,或者仅显示当前显示的资源（mixed-content:displayed）
• scheme：显示通过未保护HTTP（scheme:http）或受保护 HTTPS（scheme:https）检索的资源。
• set-cookie-domain：显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源。
• set-cookie-name：显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。
• set-cookie-value：显示具有 Set-Cookie 标头并且值与指定值匹配的资源。
• status-code：仅显示 HTTP 状态代码与指定代码匹配的资源。

请求列表：

简单介绍下每列的含义：

• Name：资源的名称
• Status：HTTP状态代码
• Type：请求的资源的MIME类型
• Initiator：发起请求的对象或进程。它可能有以下几种值：
  Parser（解析器）：Chrome的 HTML 解析器发起了请求（鼠标悬停显示JS脚本）
  Redirect（重定向）：HTTP重定向启动了请求
  Script（脚本）：脚本启动了请求
  Other（其他）：一些其他进程或动作发起请求，例如用户点击链接跳转到页面或在地址栏中输入网址。
• Size：服务器返回的响应大小（包括头部和包体），可显示解压后大小
• Time：总持续时间，从请求的开始到接受响应中的最后一个字节
• Waterfall：各请求相关活动的直观分析图

注：鼠标右键单击，添加其他列

预览请求内容：

查看具体资源的详情：

• Headers 该资源的HTTP头信息。
• Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
• Response 显示HTTP的Response信息。
• Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
• Timing 显示资源在整个请求生命周期过程中各部分花费的时间。