Chrome devtools调试

小码农__阿龙
143 阅读4分钟

调试面板组成

  • Element元素面板：检查和调整页面，调式DOM，调试CSS
  • Network网络面板：调试请求，了解页面静态资源分布以及网页性能的检测
  • Sources源代码资源面板：调试JavaScript页面源代码，进行断点调试代码
  • Application应用面板：查看、调试客户端存储，如Cookie、LocalStorage、SessionStorage等
  • Performance性能面板：查看网页的细节，细粒度对网页载入进行性能优化
  • Memory内存面板： JavaScript CPU分析器，内存堆分析器
  • Security安全面板： 查看网页安全及证书问题
  • LightHouse面板：进行性能分析，给出优化建议

Element功能及介绍

查看编辑HTML和DOM

  • 编辑内容（innerHtml）
  • 编辑属性(attribute)
  • 修改元素类型
  • 调整DOM节点顺序
  • 删除、隐藏、增加、拷贝节点

image.png

dom节点调试

  • 拷贝节点及其选择器等
  • dom节点的调试 （1）属性修改时打断点 我们将选中的a标签的href值进行修改：

步骤：右键点击元素 => Break on =>attribute modifications ，这样就给元素打上断点，复制该元素的JS path，并对其值进行修改，然后执行断点： image.png

事件监听

image.png

调试样式和css

image.png 优先级排列：从上到下，优先级依次降低。因为有些样式优先级较低，会被较高优先级的样式覆盖掉，所以会被划掉。我们可以对这些样式的属性或属性值进行修改，也可以划掉这个样式，使其隐藏。

添加:hover :active等伪类

div:hover: { background-color: blue; }

使用animations调试动画

image.png

source面板断点调试

可以使用Console面板执行以下功能：

  • 运行JavaScript代码，交互式编程

image.png

  • 查看程序中打印的Log日志 console.log() | console.error() | console.info() | console.warn()

使用debugger进行断点调试

7种断点类型

  1. 行断点：代码运行到当前行之前暂停执行
  • 在源代码添加debugger关键字
  • 或者点击Sources面板中的源代码的行号 image.png
-   Step over next function call：跳过下一个函数的执行
-   Step into next function call：进入到下一个函数的执行
-   Step out of current function：跳出当前函数
-   Step（快捷键F9）：单步执行

image.png 2. 条件行断点：当满足条件时才会触发该断点

  • 右击Sources面板中的源代码的行号
  • 选择“Add conditional breakpoint”

image.png image.png 3. DOM 断点:即Elements面板提及过的三种DOM断点（上面）

  1. XHR/Fetch 断点

image.png

-   可以对协议做断点。例如http，https，ws，wss等等。
-   可以对域名做断点。例如github.com，segmentfault.com等等。
-   可以对端口号做断点。例如[http://test.foo.com](https://link.segmentfault.com/?enc=iLbg%2BUlAPywwRFUHJfP6sA%3D%3D.9bTQjccZsEZK4xmSenKmwpTH6RoWKXcSgNJ1U7HzjwA%3D):8080，[http://test.bar.com](https://link.segmentfault.com/?enc=LDn%2FgG92JwdsGTBLgMBdDg%3D%3D.mDSnZC%2FjtnwNQYuOQV6olMpVPhC5zGEtF%2FEyx5bVoDs%3D):9090等等。
-   可以对路径做断点。例如[http://test.foo.com/bar](https://link.segmentfault.com/?enc=cDVWH%2FX4%2FFuiATvJXGG94A%3D%3D.btkkbIR8wwhVdUbKxS7AsWK4MEuL0oHg7lLmTy2JIX8%3D)，http://test.foo.com/bar/baz
-   可以对参数做断点。例如[http://test.foo.com/bar](https://link.segmentfault.com/?enc=IVlcrQe2PGiFrOlvk2pLSw%3D%3D.oFATN%2FjYjGwCsjRHMYHagEkjzaGmQ2WgHCWR9gERmqM%3D);type=baz
-   可以对查询字符串做断点。例如[http://test.foo.com/bar?type=...](https://link.segmentfault.com/?enc=hdrg582SjbUEpdGiO%2Bq9wg%3D%3D.RlYiX736n%2BxHhbTVhhijbFObts0Tm%2FfYNkX6vyo5T2mqA%2FuYGdCD6Lw69GCgKhep)
-   可以对片段做断点。例如[http://test.foo.com/bar/#foo](https://link.segmentfault.com/?enc=i0uCoftSVv%2B4rQ7QZVjzeg%3D%3D.i5rHV6hE%2B0BsLUJDFd7037NbFw%2Bxf0RtG3RXYmZF920%3D)

  1. Event Listener breakpoints

如果要暂停事件触发后运行的事件侦听器代码，请使用事件侦听器断点。我们可以选择特定的事件，例如click事件；或者事件类别，例如所有的鼠标事件。

image.png

Element功能及介绍

网络面板包含5个窗格：

  1. Controls  (控件)  : 使用这些选项可以控制 Network (网络)面板的外观和功能。
  2. Filters  (过滤器)  : 使用这些选项可以控制在请求列表中显示哪些资源。提示：按住 Cmd （Mac）或 Ctrl （Window / Linux），然后点击过滤器可以同时选择多个过滤器。
  3. Overview  (概览)  : 这个图表显示检索资源的时间轴。如果您看到多个垂直堆叠的栏，这意味着这些资源被同时检索。
  4. Requests Table  (请求列表)  : 此列表列出了检索的每个资源。默认情况下，此表按时间顺序排序，也就是最早的资源在顶部。单击资源名称可以获得更多信息。提示：右键单击列表的任何标题栏可以以添加或删除信息列。
  5. Summary  (概要)  : 概要窗格告诉您请求的总数，传输的数据量，和加载时间。 image.png

默认情况下，请求表列显示以下列

  • Name  (名称)  : 资源的名称。

  • Status  (状态)  : HTTP状态代码。

  • Type  (类型)  : 请求的资源的MIME类型。

  • Initiator  (发起人)  : 发起请求的对象或进程

  • Size  (尺寸)  : 响应头的大小（通常是几百字节）加上响应数据，由服务器提供。

  • Time  (时间)  : 总持续时间，从请求的开始到接收响应中的最后一个字节。

  • Timeline  (时间轴)  : Timeline 列显示所有网络请求的视觉瀑布。点击此列的标题栏会显示其他排序字段的菜单。

avatar
文章
阅读
粉丝