江苏龙网

  1. 主页 > 生活百科 > >

JavaScript 断点调试技巧

JavaScript


JavaScript 断点调试技巧

文章插图
为什么要使用 debugger这篇文章将介绍如何使用断点来进行 JAVAScript 调试 。在读这篇文章之前 ， 需要问一个问题：为什么要使用断点来进行调试?
我们首先需要认可使用断点的是必要的 ， 否则下文介绍的所有断点调试方法都会是废话 。console.log 是前端开发最常用的调试手段 ， 它简单直接解决一部分问题 。但当遇到十分复杂的问题 ， console.log 就会变得不趁手 。比如：
  • 一个逻辑复杂的算法
如果你刷过 leetcode 一定深有体会 ， 算法某个测试用例报错了 ， 有时很难光靠目测找出有问题的那个方法 。
  • 一个复现步骤十分繁琐的bug 。
花了10分钟好不容易复现了 ， 但是只跟踪到某行代码 ， 需要第二次添加 log 才能继续寻找问题 。查看log -> 添加log -> 查看log... 这个过程重复几遍 ， 今天剩下的砖就搬不完了 。
  • 一段运行流程冗长的代码
  • 一段没有注释、起名随意的代码
  • server 端代码
有 nodejs 服务端开发经验的同学相信有过在 postman 和 ide 之间反复横跳的经历 ， 如果光靠 log ， 对于一个巨大的复杂对象 ， 控制台是不好查看全貌的 。如果一个接口还涉及到数据库增删、第三方依赖 ， 那么复原上一次请求造成的后果也是一件痛苦的事情 。
在这些情况下 ， 断点调试是非常有价值的 ， 将 debug 的时间复杂度从 O(n) 降到 O(1) ， 让搬砖更快乐 。
这是文章的内容大纲：
  • Chrome debugger 基本用法
  • VS Code 调试 SPA 应用
  • Chrome 调试 Nodejs
  • VS Code 调试 Nodejs
 
Chrome debugger 基本用法最简单的断点调试 ， 就是在代码中加一句 debugger ， 然后到浏览器中刷新页面 ， 这时候浏览器就会在 debugger 语句那停止执行 。
为了方便理解 ， 引入一个简单例子 ， 在一个文件夹中创建 index.html 和 index.js ， 然后在 index.html 中引入 index.js 。index.js 内容如下：
// 国际惯例 ， hello world 。const greet = () => {const greeting = "hello debugger";// 浏览器执行到这里将会暂停debuggerconsole.log(greeting); };greet();console.log("js evaluation done");执行命令：
npm i -g serve serve .然后访问 http://localhost:5000并打开开发者工具 。
这时候我们的 hello world 断点就打上了 ， 就像这样：
JavaScript 断点调试技巧

文章插图
 
图中分为四个区域 ， 蓝色区域用于文件选择 ， Page 一栏是指当前页面中的 JS 文件 ， Filesystem 会显示我们系统中的文件 。通常我们使用 Page 。
粉色是代码的行号和内容 。代码的行号处可以通过点击来添加新的断点 ， 再次点击后取消 。
黄色区域用于控制代码的执行 ， 只需要掌握前四个按钮的含义 ， 就可以应付绝大多数场景 。按钮1是让代码继续执行(resume) ， 如果遇到下一个断点就会再次中断执行 。按钮2可以让浏览器执行当前行(图中是第3行) ， 然后在下一行中断代码 ， 按钮3是进入当前函数 ， 查看函数具体内容 。假设我们当前停在第7行 greet()  ， 点击按钮3就会进入 greet 方法中(也就是第2行) 。如果不想再看 greet 方法了 ， 就点击按钮4 ， 跳出这个方法 ， 回到第8行 。
绿色区域可以查看变量的内容和当前的调用栈 。
debugger 是最简单粗暴的打断点方式 ， 但是需要修改我们的代码 。需要注意的是 ， 上线前必须删除这些语句 。也可以通过配置 webpack 来自动去除 。不过终究还是有些不方便 ， 所以我们来看下如何通过 vscode 来简化打断点的方式 。
 
VS Code 调试 SPA 应用首先我们使用 Vite 来创建一个 Vue 应用用于演示(React步骤类似) 。
# 创建 vut-ts 应用 npm init vite cd hello-vite npm install # 调用 VS Code cli 打开项目 ，  # 或者手动在 VS Code 打开 。code . npm run dev然后在 VS Code 中新建一个文件 .vscode/launch.json ， 填入这些内容：
{"version": "0.2.0","configurations": [{"type": "pwa-chrome","request": "launch","name": "Launch Vue project",// 这里填入项目的访问地址"url": "http://localhost:3000","webRoot": "${workspaceFolder}"},] }


推荐阅读


上一篇：聊聊大厂都在用的雪花算法

下一篇：买电脑、硬件安全下车必须要做的操作，奸商绝不会告诉你