node.js调试(Node.js调试指南)

更新时间:2023-03-01 00:10:42 阅读: 评论:0

VSCode Node.js 调试配置 (npm 脚本启动)

相当于直接使用 node 命令,用 npm run script 脚本 来启动 Node.js 程序是更为常见的场景,比如当目标是运行一个应用。

假设项目的 package.json 有一个用来调试的 debug 脚本:

我们要怎么启动项目的跟踪调试呢?

文档指路 ➡️ 【Node.js 调试入门】 、 【VSCode 中的 Node.js 调试】 、 【Launch 对 npm 及其他工具的配置支持】

VS Code 支持两种核心调试模式 Launch 和 Attach ,Launch 方式是直接以 debug 模式启动应用,并为我们自动添加一个调试器;而 Attach 方式则是将 VSCode 调试器连接到已经运行中的应用程序或进程。我们这里用的是 Launch 方式。

在终端运行:

或点击VSCode 的小甲虫图标:

上面蓝色位置圈错了,应该是第一个 Node.js。

VSCode 十分智能,预设了很多针对不同需求的启动配置:

让我们来做进一步的修改:

之前那个启动配置项可以删除,留下这个需要的即可。

我们将 console 属性 设置为外部终端,我们启动调试时 VScode 就会自动打开下图中对应的终端(根据操作系统)。可以根据个人使用习惯,自定义用什么终端 (比如我在 VSCode 设置的 Terminal › External: Osx Exec,从默认的改为了 iTerm2)。

别忘了先把我们的脚本加上端口

NodeJs VSCode 断点调试

1.首先 你已经有一个.js 文件了,例如我的demo12.js
2.在工作区内打一些断点,如无异常的话应该是实心红点
3.点击 运行和调试 按钮

4.点击小齿轮按钮,修改配置文件
5.右键刚才那个js文件,复制出其相对路径,放在配置文件${workplaceFolder} 的后面
6.点击开始按钮,进行调试

运行成功后,程序会定位到打断点的地方,并且,调试控制台可以看到输入结果,上面的一排按钮与其他调试工具类似,不赘述了

在实际开发当中,可以配置多分launch.json文件,以应对不同项目的调试
修改name值用于区分,并且,要修改program ,将对应项目的入口文件配置在这里即可

如何在SubLime里用 Node.js 调试 JavaScript 程序

1. 首先到 nodejs.org 下载 Node.js 安装包并安装。
2. 打开 Sublime Text 2 编辑器。选择菜单 Tools --> Build System --> new Build System...
3. 将文件保存为 JavaScript.sublime-build
4. 文件内容为:
{
"cmd": ["node", "$file"],
"file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
"lector": "source.javascript"
}

5. 重新启动 Sublime Text 2. 勾选菜单 Tools --> Build Syst

[Node] 如何使用 VSCode 调试 child_process

使用 VSCode 调试 Node.js 的时候,
遇到 child_process 中的断点,是跟不进去的。

(1)目录结构
打开 VSCode,并以 main 作为根目录,

(2)app.js

(3)child/process.js

(4).vscode/launch.json

main 项目中按 F5 ,程序会停在 app.js 中的断点处,单步调试,

然后,调试进程就结束了。并不会跑到第 6 行的断点处,

child/process.js 中的断点,也跑不进去,

以上示例中,我们发现 VSCode 无法调试到 child_process 中。
也不确定 VSCode 未来是否会支持。

当前我们可以通过 Debug 的 Attach 方式,对 child_process 进行调试。

我们需要另一个 VSCode 实例来 Attach,两个 VSCode 一起使用。

main 项目的 .vscode/launch.json 启动 main/app.js
attach 项目的 .vscode/launch.json attach 到 child_process

目录结构分别如下,

为了能 attach 成功,我们需要同步修改 main/app.js 与 attach/.vscode/launch.json,
调试端口号可以任选,不一定的 9001 ,但应保持一致。

(1)main/app.js

(2)attach/.vscode/launch.json

(1)启动 main 项目

(2)debug attach 项目
attach 项目中按 F5 ,VSCode 会 attach 到已经启动的子进程上,

(1)main 项目,按 F5 启动调试

main 项目单步调试,

这时子进程已经启动了,切换到 attach 项目启动调试。

(2)attach 项目,按 F5 启动调试

attach 项目单步调试,

(3)main 项目 child.nd

main 项目单步调试,断点直接跑到了 attach 项目中,

attach 项目单步调试,断点又回到 main 项目,

Debugging in Visual Studio Code


如何使用DevTools调试Nodejs运行的Javascript

目前,常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能。我们先来看IE的:

1、在F12开发人员工具中进行调试
打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML、CSS、Javascript等网页资源进行跟踪调试使用的。

如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成。

我们看到在这个工具窗口里面有几个标签页,分别是:HTML、CSS、控制台、脚本、探查器和网络,点开每一个标签,可以执行相应的任务。
在HTML标签窗口中,工具栏中的按钮所执行的操作如下图:

CSS标签是用来查看样式的;控制台显示网页中JS的各种输出信息,包括错误信息、用户日志等;打开脚本标签页,这里面才是我们想要的内容。

我在图中用黄色矩形选中连个控件,左侧的下拉列表用来选择文件,右侧的按钮用来启动调试。当点击启动调试后,调试程序会将窗口最大化,我们在选中的文件中找到需要调试的位置,点击左侧边栏添加断点即可进行调试。

当有程序运行到我们的断点处时,就可以进行调试了:

在这里,我们可以使用快捷键进行操作,常用的快捷键如下:
F9:添加/移除 断点
F10:逐过程,即跳过该语句中的方法、表达式等
F11:逐语句调试,即单步调试,会跳入方法、表达式,进行逐语句的跟踪调试

在执行过程中,如果我们要执行即时的代码,我们就需要在右侧的窗格中输入代码,按回车即可:

如果要执行多行代码,点击运行按钮右侧的双箭头,就会打开多行模式。我就不再截图片了。

这种直接在浏览器中调试的方法同样适用于Google浏览器Chrome和FireFox FireDebug,只不过在细枝末叶上面有些不同罢了,主体的功能都是一样的。
按F12键进入开发者工具,可以查看源代码、样式和js:

点击Scripts按钮,可以打开这个调试窗口,里面包含了网页中脚本文件源码,点击左侧的按钮可以打开选择文件的侧窗口。

2、使用debugger关键字进行调试
这种方法很简单,我们只需要在进行调试的地方加入debugger关键字,然后当浏览器运行到这个关键字的时候,就会中断:

设置以后就可以使用debugger关键字进行调试了;进过这样的设置,我们还可以捕获到意外的错误,进行跟踪调试。

node.js(express)在vscode中打断点

首先点击vscode菜单栏的运行 > 打开配置,进行配置断点启动内容

{

            "type": "node",

            "request": "launch",

            "name": "node debugger",

            "program": "${workspaceFolder}/bin/www"

        }

然后运行调试即可

如果这个项目已经通过node start 或者其他配置启动了项目,用调试的启动项目是启动不了的,端口已经被占用。所以应该直接点击启动调试

本文发布于:2023-02-28 19:09:00,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/zhishi/a/167760064252994.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:node.js调试(Node.js调试指南).doc

本文 PDF 下载地址:node.js调试(Node.js调试指南).pdf

标签:指南   node   js   Node
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 实用文体写作网旗下知识大全大全栏目是一个全百科类宝库! 优秀范文|法律文书|专利查询|