浏览器DeBug及网络接口调试方法

江子麟
695 阅读1分钟

浏览器调试（以Chrome浏览器为例）

在开发者工具中进行调试，打开方式：

  • 右键检查
  • Win: F12 / Ctrl + Shift + i
  • Mac: Cmd + Opt + i

代码调试（Sources面板）

进入调试方法

  1. 面板左侧打上break point（注意source map情况）

image.png

  1. 代码中打入debugger

    仅在开发者工具打开时有效，否则浏览器会忽略它

    function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- 调试器会在这停止

  say(phrase);
}

面板功能使用

  1. 调式的常用区域有如下四个 image.png

  2. 使用Debug时的面板 image.png

    他们从左到右分别是

    1. 放开该断点（如果再碰到断点会继续停下，长按选择□即停止debug）
    2. step over next function call（即下一步但不会进入方法内部）
    3. step into next function call（即下一步但会进入方法内部）
    4. step out of current function（跳出当前方法）
    5. step（下一步）
    6. deactivate/activate breakpoints （停用/启用所有断点）

Network调试

基本信息

网络面板包含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 (发起人) : 发起请求的对象或进程。它可能有以下几种值：

    • Parser (解析器) : Chrome的HTML解析器发起了请求。
    • Redirect (重定向) : HTTP重定向启动了请求。
    • Script (脚本) : 脚本启动了请求。
    • Other (其他) : 一些其他进程或动作发起请求，例如用户点击链接跳转到页面，或在地址栏中输入网址。

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

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

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

单个请求详情

image.png

分为五个板块分别是：

  • Headers (标头) : 与资源相关的HTTP头。
  • Preview (预览) : 预览JSON，图片和文字资源。
  • Response (响应) : HTTP响应数据（如果有）。
  • Timing (时序) : 资源的请求生命周期的明细分类。

网络时序Timing

image.png

生命周期显示在以下类别中花费的时间：

  • Queuing (排队)
  • Stalled (停滞)
  • 如果适用： DNS lookup (DNS查找)， initial connection (初始连接)， SSL handshake (SSL握手)
  • Request sent (请求发送)
  • Waiting (等待)（到开始下载第一个字节的时间（TTFB））
  • Content Download (内容下载)

【重要】请求列表信息

image.png

在不同的选项中可能会有不同的请求我们一般常用的会有

  • Replay XHR —— 重发请求，无需点击按钮触发了

    • 如果需要修改参数重发请求可以

      1. 选择Copy as fetch
      2. 控制台粘贴代码
      3. 修改参数，回车搞定

  • copy as cURL

参考文献：

avatar
文章
阅读
粉丝