VS Code 调试彻底攻略（3）：编辑变量并从新执行函数

时间 2020-05-30

标签 code 调试彻底攻略编辑变量从新执行函数繁體版

原文原文链接

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

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

未经容许严禁转载java

能够经过在调试器中从新执行代码块，来查看它们在不一样状况下的行为。在调用栈中修改变量并从新执行函数可让你节省大量的时间！node

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

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

在前面的文章中，咱们已经研究了如何开始调试简单的服务器以及能够步进逐行调试代码。今天，咱们将介绍两个重要的功能。第一个是怎样编辑变量，第二个是从新执行函数——确切地说是从新启动调用栈框架而无需从新启动调试器或程序。git

虽然这些功能不是很直观，可是很是强大，能够帮你节省大量时间。你能够把不一样的输入传给埋藏在调用栈深处的函数，而不用在从新启动程序时漫长而乏味的等待。程序员

让咱们看看如何在前文的微型服务器代码中使用这两种调试方式。github

准备工做

请将下面的代码复制粘贴到一个空文件中：面试

const http = require('http');
const url = require('url');

const hostname = '127.0.0.1';
const port = 3456;
const serverUrl = `http://${hostname}:${port}`

const getNameFromReq = (req) => {
  const {name} = url.parse(req.url, true).query;

  return name
}

const getGreeting = (name) => {
  const greeting = `Hello, ${name}!`

  return greeting
}

const server = http.createServer((req, res) => {
  const name = getNameFromReq(req)
  const greeting = getGreeting(name)

  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end(`${greeting}\n`);
});

server.listen(port, hostname, () => {
  console.log(`Server running at ${serverUrl}`);
});

Hello, undefined!

咱们的玩具服务器的请求中始终存在一个名为 name 的查询参数。若是没有参数，响应将会变为 “Hello, undefined!”：json

> curl http://127.0.0.1:3456
Hello, undefined!

让咱们经过调试器看看 getGreeting 函数在不一样 name 参数下的表现如何。显然修复这个问题很简单，可是让咱们来看看在调试器能够作些什么。 🤓segmentfault

在第 15 行上放置一个断点，而后在没有查询参数 name 的状况下访问服务器（例如，curl http://127.0.0.1:3456）。

你应该看到调试器启动后停在第 15行。

若是你不肯定如何执行此操做，请参阅本系列的第 1 部分，基本知识

确保调试侧栏中的 “Variables” 和 “Call stack” 部分都已经被打开。如今咱们重点关注未定义的局部变量 name：

而后跳过下一行（F10）并观察 getGreeting 的返回值：

若是你须要快速了解step over、step into 和 step out，请阅读本系列的第 2 部分：步进逐行调试

好了，这一点也不不奇怪：若是 name 是 undefined，则问候语将会显示 Hello，undefined！。

从新执行函数

让咱们从新运行此这个，此次使用不一样的 name 值。咱们不须要去触发另外一个请求——能够从新启动最后一个栈帧：

咱们又回到了 getGreeting 函数的开头👌

如今尝试一下若是 name 为 null 会怎样？咱们能够编辑局部变量来测试：

能够尝试设置一个字符串值——注意把值在在引号中：

你能够覆盖在 closure 中本地或定义的任何内容，包括如下函数：

请记住：重写函数后，你必须从新启动处理流程才能返回到原始实现。

就是这样：你如今能够在调试器中从新启动函数，并编辑本地和闭包值，包括字符串和函数。为何不试试看，若是从新启动栈中的高阶函数会发生什么？

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

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

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

更多文章...