VS Code 调试彻底攻略（2）：逐行步进调试

时间 2020-05-29

标签 code 调试彻底攻略逐行步进繁體版

原文原文链接

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

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

未经容许严禁转载java

在要检查的代码之间导航很重要。若是去遍历代码的每一行，那将会是乏味且没有必要的。调试器提供了便捷的方法来查看重要的内容，并跳出可有可无的代码块。让咱们看看怎样在调试时进入、跳过和退出函数！git

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

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

在上一篇中，咱们研究了 VS Code 调试器，并在代码中添加了断点，还查看了本地状态。程序员

此次，咱们将学习如何逐行执行代码以及如何跳入和跳出函数调用。github

获取代码

首先，让咱们把上次的服务器修改的更加复杂。添加两个额外的函数：一个从请求中获取名称，另外一个用于生成问候语。面试

你能够把下面的代码粘贴到 index.js中。typescript

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}`);
});

该系列的代码可在 https://github.com/thekarel/d... 得到

启动调试器

让咱们启动调试器：使用调试工具栏或按 F5 并选择 Node.js：json

你应该可以正常访问 http://127.0.0.1:3456/?name=Coco 并看到问候语。segmentfault

若是你喜欢命令行，也能够用 curl http://127.0.0.1:3456\?name\=Coco 进行访问。

好的，如今服务器已启动并正常运行，让咱们添加一个断点。没有断点，调试器将没法启动：

在第 21 行添加一个断点：

const name = getNameFromReq(req)

一步步的调试Step by Step

再次触发对 http://127.0.0.1:3456/?name=Coco 的请求，调试器将被激活并停在第 21 行的代码：

漂亮！如今让咱们专一于调试工具栏：

首先是按钮的名字。从左到右按顺序以下（带有默认的 VS Code 快捷方式）：

Continue / Pause F5
Step Over F10
Step Into F11
Step Out ⇧F11
Restart ⇧⌘F5
Stop ⇧F5

Continue、restart 和 stop 很简单，会分别执行你所指望的操做：继续到下一个断点，从新启动进程，以及中止进程（和调试器）。

Step 与当前行上的函数调用相关：你能够单步执行某个函数调用（Step Over），也能够进入该函数调用（Step Into 在内部查看并调试）或着离开这个函数（Step Out）。Step-over 操做还容许你逐行执行代码，即便该行不是函数调用。

Step 命令仅控制你在调试器中看到的内容。因此 “Step Out” 或 “Over” 一个函数将会 仍然照常执行全部代码。调试器不会让你感到无聊，你可以更快地完成本身的主要工做。

Continue

Continue 将会运行代码，直到下一个断点或程序结束。一种调试的方法是预先在相关行上添加多个断点，而后用 continue 在它们之间跳转：

若是你已经知道哪些函数或行与你的目的有关，那么 Continue 操做将很是方便。调试器将在预约义的位置暂停，这时你能够对变量和调用栈进行检查。

Step Over

你能够将 Step Over 看做是在函数中逐行进行，但不进入函数调用。若是你对当前行中的函数调用内部逻辑不感兴趣，而只想查看局部变量如何随时间变化，用它就对了，例如：

Step Over 是略过说明性代码的好方法。

Step Into

当某行调用了你感兴趣的函数，并想要更深刻地研究时，可使用 Step Into。一旦进入代码块后，能够像往常同样进行调试（使用 continue、step 等命令）。

观察咱们是怎样如何跳过 getNameFromReq，而后进入到 getGreeting 的：

Step Out

Step Out 与 Step In 相反：若是你再也不对某个函数感兴趣，能够离开它。使用 “Step out” 将一次运行完该函数的剩余代码。

经过调试检查这两个函数之间的区别，咱们逐行执行第一个函数，可是早早的就退出第二个函数：

如今，你应该对调试器工具栏有了更好的了解，如何着眼于重要的事情并跳过无关的部分。这些命令不只能够节省你的时间，还可使整个调试工做变得更加愉快！为何不在你的项目中试试呢？

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

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

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

更多文章...