共计 2715 个字符，预计需要花费 7 分钟才能阅读完成。
作者：Charles Szilagyi
翻译：疯狂的技术宅
原文：https://charlesagile.com/debu…
未经允许严禁转载
在接下来的几篇文章中，我们将研究如何以专业的方式调试 JavaScript 和 TypeScript 代码。我们将学习如何使用 Visual Studio Code 中内置的调试器，而不是让 console.log 到处乱飞。
VS Code 调试完全攻略系列目录
- 基础知识
- 步进逐行调试
- 编辑变量并重新执行函数
- launch.json 和调试控制台
- 基于浏览器的 React 应用
- 调试用 TypeScript 开发并打包的 React ?
调试器允许你在程序运行时打开程序，查看其状态、变量、暂停并逐步观察数据流。你甚至可以运行代码片段，并在运行时环境中尝试想法。所有这些都无需停止程序后修改代码（添加 console.log！）并重新启动。你能够使用调试器解决问题并更快地了解代码。
我们先从一些简单的 Node.js 代码开始，然后着眼于调试浏览器程序、Express 服务器、GraphQL、TypeScript、Serverless、Jest 测试、Storybook 等等，不过在此之前要先了解一些必要的基础知识！即使你不喜欢服务器端 Node.js，仍然希望你先看完本文。
获取代码
该系列在 GitHub 上的代码：https://github.com/thekarel/d…
我们第一个话题的代码非常简单——先把下面的代码复制粘贴到你的 index.js 文件中：
const http = require('http');
const hostname = '127.0.0.1';
const port = 3456;
const serverUrl = `http://${hostname}:${port}`
const server = http.createServer((req, res) => {
const name = 'World'
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end(`Hello, ${name}!\n`);
});
server.listen(port, hostname, () => {console.log(`Server running at ${serverUrl}`);
});现在继续并在 VS Code 中打开文件夹：
为了确保到一切正常，请试着运行它：
node index.js然后访问 http://127.0.0.1:3456，你应该会看到 Hello, World!。
请确保立即停止 node index.js 命令，否则你将收到一个丑陋的“错误：Error: listen EADDRINUSE error soon ?
代码本身很简单：运行 HTTP 服务器，并用“Hello，World！”响应每个请求。很简单对不对？但是这段简单的代码足以了使我们解调试的基本概念。
添加新功能
让我们向服务器添加一个功能：我们不再返回硬编码的消息 “Hello, World!”，而是从查询中得到 name，在点击 http://127.0.0.1:3456/?name=Coco 时会回复 Hello, Coco!。
我们先假装不知道该怎么做，运行服务器后，发送请求并查看 Coco 出现在什么地方不是更有趣吗？试一试吧。启动调试器！
启动调试器
确保已在 VS Code 中打开 index.js，单击调试器图标，单击“运行并调试”，然后单击 Node.js：
现在你的服务器正在调试模式下运行！访问 http://127.0.0.1:3456?name=Coco 你不会看到任何不同，应该仍然返回默认消息。
接下来，在代码中添加一个 断点（breakpoint），这样在下次访问服务器 URL 时将会暂停执行。可以通过单击编辑器左边的行号来实现：
访问 http://127.0.0.1:3456?name=Coco，VS Code 将弹出一个视图并暂停服务器：
我们需要先找出查询中 name 的位置，这样才能完成后面的工作。在 左侧边栏 中：你会看到一个名为 Variables 的部分。在 Local 下，IDE 显示了函数本地作用域的所有变量。有一个看上去可能性很大的：req：
现在我们知道了，请求查询字符串位于 req.url 中，在文档的帮助下，我们把代码脚本修改为：
const http = require('http');
const url = require('url'); // ?
const hostname = '127.0.0.1';
const port = 3456;
const serverUrl = `http://${hostname}:${port}`
const server = http.createServer((req, res) => {const {name} = url.parse(req.url, true).query; // ?
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end(`Hello, ${name}!\n`);
});
server.listen(port, hostname, () => {console.log(`Server running at ${serverUrl}`);
});由于代码已经被修改，所以需要重新启动服务器。使用调试器很简单：你可以按 ⇧+⌘+F5 或单击绿色的重启图标：
你也可以禁用断点，因为现在不需要它了：
访问 http://127.0.0.1:3456?name=Coco，看看我们的工作成果！?
希望你能够继续探索调试器。在下一篇中，我们将会用 “step over”、“step in” 和 “step out” 功能逐行调试代码。
本文首发微信公众号：前端先锋
欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章：
- 深入理解 Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13 个帮你提高开发效率的现代 CSS 框架
- 快速上手 BootstrapVue
- JavaScript 引擎是如何工作的？从调用栈到 Promise 你需要知道的一切
- WebSocket 实战：在 Node 和 React 之间进行实时通信
- 关于 Git 的 20 个面试题
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什么？
- 30 分钟用 Node.js 构建一个 API 服务器
- Javascript 的对象拷贝
- 程序员 30 岁前月薪达不到 30K，该何去何从
- 14 个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩展插件
- Node.js 多线程完全指南
- 把 HTML 转成 PDF 的 4 个方案及实现
- 更多文章 …
