VS Code 调试彻底攻略（1）：基础知识

时间 2020-05-28

标签 code 调试彻底攻略基础知识繁體版

原文原文链接

做者：Charles Szilagyi
翻译：疯狂的技术宅javascript

原文：https://charlesagile.com/debu...前端

未经容许严禁转载java

在接下来的几篇文章中，咱们将研究如何以专业的方式调试 JavaScript 和 TypeScript 代码。咱们将学习如何使用 Visual Studio Code 中内置的调试器，而不是让 console.log 处处乱飞。node

VS Code 调试彻底攻略系列目录

基础知识
步进逐行调试
编辑变量并从新执行函数
launch.json 和调试控制台
基于浏览器的 React 应用
调试用 TypeScript 开发并打包的 React 📦

调试器容许你在程序运行时打开程序，查看其状态、变量、暂停并逐步观察数据流。你甚至能够运行代码片断，并在运行时环境中尝试想法。全部这些都无需中止程序后修改代码（添加 console.log！）并从新启动。你可以使用调试器解决问题并更快地了解代码。git

咱们先从一些简单的 Node.js 代码开始，而后着眼于调试浏览器程序、Express 服务器、GraphQL、TypeScript、Serverless、Jest 测试、Storybook 等等，不过在此以前要先了解一些必要的基础知识！即便你不喜欢服务器端 Node.js，仍然但愿你先看完本文。程序员

获取代码

该系列在 GitHub 上的代码： https://github.com/thekarel/d...

咱们第一个话题的代码很是简单——先把下面的代码复制粘贴到你的 index.js 文件中：github

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 中打开文件夹：面试

为了确保到一切正常，请试着运行它：shell

node index.js

而后访问 http://127.0.0.1:3456，你应该会看到 Hello, World!。json

请确保当即中止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" 功能逐行调试代码。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...