VSCode调试教程1基础知识
在接下来的几篇文章中,我们将研究如何以专业的方式调试 JavaScript 和 TypeScript 代码。我们将学习如何使用 Visual Studio Code 中内置的调试器,而不是让 console.log
到处乱飞。
调试器允许你在程序运行时打开程序,查看其状态、变量、暂停并逐步观察数据流。你甚至可以运行代码片段,并在运行时环境中尝试想法。所有这些都无需停止程序后修改代码(添加 console.log!)并重新启动。你能够使用调试器解决问题并更快地了解代码。
获取代码
该系列在 GitHub 上的代码:https://github.com/thekarel/debug-anything
我们第一个话题的代码非常简单——先把下面的代码复制粘贴到你的 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}`);
});
由于代码已经被修改,所以需要重新启动服务器。使用调试器很简单:你可以按或单击绿色的重启图标:
你也可以禁用断点,因为现在不需要它了:
访问 http://127.0.0.1:3456?name=Coco
,看看我们的工作成果!
希望你能够继续探索调试器。在下一篇中,我们将会用 "step over"、 "step in" 和 "step out" 功能逐行调试代码。
VSCode调试教程系列:
1、基础知识
2、逐行步进调试
作者:Charles Szilagyi
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbieac
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24