Skip to main content

调试技巧

SewenAbout 3 min调试技巧调试技巧

调试技巧

  • 调试本身可以分为两个过程，定位问题 和 解决问题，而更重要的显然是如何快速的定位问题；本文将集中讨论如何 快速发现 并 调试问题

前端调试

  • 根据bug实际情况分析，可以将 bug 分为 前端bug 和 后端bug；根据常见前端 bug 特性可以快速定位 Bug

BUG 排查定位

  1. 当前页面是否需要请求获取数据

    1. 不涉及服务端 Bug:
      1. UI 样式显示错误
      2. 交互逻辑错误
    2. 不能确定是否服务端数据错误：
      1. 白屏
      2. 一直 loading

  2. 检查控制台是否报错

  3. 控制台报错：根据报错判断错误类型

    1. [Vue warn] ：JS 警告。通常为语法使用错误警告、版本错误等； 一般不会影响代码执行，部分会影响代码执行（如语法错误）；因此要注意警告内容，避免因为忽略 Vue 警告导致 bug 定位失败

    2. JS 错误类型：

    类型描述
    SyntaxError：语法错误Uncaught SyntaxError: Unexpected number变量名不符合规范；
    Uncaught SyntaxError: Unexpected 给关键字赋值；等
    Uncaught ReferenceError：引用错误引用一个不存在的变量时发生的错误。将一个值分配给无法分配的对象，比如对函数的运行结果或者函数赋值。
    RangeError：范围错误RangeError是当一个只超出有效范围时发生的错误。主要的有几种情况，第一是数组长度为负数，第二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。
    TypeError类型错误变量或参数不是预期类型时发生的错误。比如使用new字符串、布尔值等原始类型和调用对象不存在的方法就会抛出这种错误，因为new命令的参数应该是一个构造函数
    URIError，URL错误相关函数的参数不正确。URI相关参数不正确时抛出的错误，主要涉及encodeURI、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape(）六个函数。
    EvalError eval()函数执行错误在ES5以下的JavaScript中，当eval()函数没有被正确执行时，会抛出evalError错误。
    1. 根据报错定位异常代码：
    2. 调试方法：
      1. 代码注释法 ：利用二分法思想逐行去注释代码，直到定位问题
      2. console 打印调试
      3. 断点调试
      4. 辅组工具调试：
        1. Ajax Interceptor: 用于拦截请求并修改请求数据,可以修改返回数据
        2. Vue.js devtools

  4. 检查网络请求

    1. 当前页面是否需要请求获取数据，有则检查网络请求
    2. 通常 数据不符合预期引起的错误（TypeError 等）：访问不存在的属性得到了undefined/null/NaN等值之后，会引发后续的异常。要先从检查数据入手。
    3. 检查Network/网络面板，查看需要获取数据的接口是否成功获取到数据：
      1. 检查关键点：
        1. 检查返回数据是否正确
          1. 查看请求状态（是否返回 500 等错误码）
          2. 请求状态码正确，检查数据格式是否错误（根据接口文档检查）
          3. 数据状态和格式正确，检查请求是否正确
        2. 检查请求是否正确
          1. 请求方法是否使用正确
          2. URL 是否正确（正式服/测试服地址是否正确）
          3. 跨域（是否跨域导致请求失败）
          4. 请求参数（根据接口文档确认请求参数是否正确）
          5. 请求的 Content-Type 是符合要求
          6. 请求体格式是否符合要求（JSON/Form）
          7. 是否携带了身份信息

前端调试工具

Chrome DevTools

断点调试

生产环境调试

PC 端调试

移动端调试

参考资料