您的位置:

vscode调试nodejs打断点,vscode断点调试vue

本文目录一览:

nodejs挂在windows IIS运行的,VScode怎么可以附加调试的?

Step 1: 点击Debug按钮,调出launch.json文件,更改program的路径为目标js文件。

生成的luanch.json文件在.vscode文件下

step2:接下来就可以加断点调试了

如何在vscode中使用nodejs

一、使用Express创建项目[这两步都在dos 模式下执行]

1,安装全局的Express!(已安装请忽略)

npm install -g express

2,创建项目

创建项目(创建文件夹名称ExpressApp)

express ExpressApp

小插曲:如果你习惯了Linux下的环境,你可以在自己电脑上安装cmder(不知道是什么东西,请自行百度),这个命令行工具排版漂亮,不像微软的dos 那么枯燥!我用的是Mini版本,如果你想体验linux下的全部功能,可以下载full版本。

3,下载第三方包

(1)cmd命令行切换到项目目录

cd d:\nodejs\ExpressApp

(2)根据需要编辑package.json,运行如下指令安装第三方包

npm install

在项目目录下node_modules可见安装好的第三方包

ExpressApp

|– node_modules

(3)运行项目

npm start

输出如下:

ExpressApp@0.0.0 start d:\Nodejs_Workspace\ExpressApp

node ./bin/www

注:npm start指令会自动执行node ./bin/www

在浏览器中输入,可访问Express欢迎页面

二、使用VSCode开发Nodejs

1、VSCode打开Nodejs

code d:\nodejs\ExpressAppcode.

注:在当前项目下创建ExpressApp.bat,输入“code .”即可,下次直接此文件直接使用VSCode打开Nodejs项目

2、添加智能提示

VSCode打开Nodejs项目,默认是没有智能提示。

(1)使用TypeScript Definition Manager(TSD)在项目中下载所需的tsd文件,VSCode中打开时有智能

全局安装tsd(如已安装忽略)

npm install -g tsd

下载所需的组件提示(以下载node、express、requirejs提示为例)

tsd query node --action installtsd query express --action installtsd install require

注:

①多个提示组件在query参数后可以空格分隔简写为tsd query node express –action install

②组件会项目目录下添加typings文件夹

|– typings

|– node

|– express

|– require

(2)添加js文件引用的智能提示

假如在文件引用另外一个文件common.js时,文件头添加如下

{ // See // for the documentation about the jsconfig.json format "compilerOptions": { "target": "es6", "module": "commonjs", "allowSyntheticDefaultImports": true }, "exclude": [ "node_modules", "bower_components", "jspm_packages", "tmp", "temp" ]}

(小提示,如果你引入了rquire,那么你的编辑器右下方会显示一个“灯泡”的提示,你只要点灯泡就不用自己苦逼的写这个配置文件了)

此配置表示代码服从ES5标准并使用commonjs规范,发VScode下有此配置之后,可以实现在文件中对require引用js文件的智能提示。(我测试时无此配置也会有智能提示,不清楚什么原因)

[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.send

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

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

Debugging in Visual Studio Code

VSCode + make + makefile + c++ 断点调试

一、VSCode 自带

新建文件夹 Test - VSCode 打开 Test - 新建文件 main.cpp - 

DEBUG “执行按钮”右边“add configuration...”  选择 “g++ build and debug” - 

VSCode 自动生成 tasks.json 和 laugh.json 即可断点调试

二、makefile 文件

1. VSCode 新建文件 makefile 内容如下:

.default: all

all: main

main: main.o

    g++ -Wall -Werror -std=c++14 -g -O -o $@ $^

%.o: %.cpp

    g++ -Wall -Werror -std=c++14 -g -O -c $^

clean:

    rm -rf qwirkle *.o *.dSYM

此时,打开命令行,make,可以生成可执行文件

2. task.json 改成如下:

{

    "tasks": [

        {

            "type": "shell",

            "label": "shell",

            "command": "/usr/bin/make",

        }

    ],

    "version": "2.0.0"

}

3. launch.json 改成如下:

{

    // Use IntelliSense to learn about possible attributes.

    // Hover to view descriptions of existing attributes.

    // For more information, visit:

    "version": "0.2.0",

    "configurations": [

        {

            "name": "g++ build and debug active file",  // 配置名称,将会在启动配置的下拉菜单中显示

            "type": "cppdbg",

            "request": "launch",  // 请求配置类型,可以为launch(启动)或attach(附加)

            "program": "${fileDirname}/main",  //将要进行调试的程序的路径,与 makefile 中的 main 一致

            "args": [],

            "stopAtEntry": true,  // 设为true时程序将暂停在程序入口处

            "cwd": "${workspaceFolder}",

            "environment": [],

            "externalConsole": true, // 调试时是否显示控制台窗口,必须为true显示控制台,才能输入,交互

            "MIMode": "lldb",  // 指定连接的调试器,可以为gdb或lldb。

            "preLaunchTask": "shell"   //调试会话开始前执行的任务,一般为编译程序。与 tasks.json 的 label 一致

        }

    ]

}

点击 VSCode 执行按钮即可断点调试,找到弹出的窗口,即可输入,交互

注意断点打到  std::cout"start"std::endl;  不停留

VSCode调试egg.js项目

首先,在需要调试的地方打好断点

如上图,点击左侧的行数,158行就可以打上断点了

点击 vscode 左侧的debug窗口,如果你之前没有配置过 launch.json 文件,那么现实效果就会如下图一样。

点击左上方,【没有配置】,添加配置

VSCode本身就内置了Node.js的调试工具,如果将来你需要调试别的东西,可以在这里选择添加对应的调试插件工具。

这里我们调试的是Node.js,就选择Node.js,然后VSCode会在 /.vscode 目录中新建一个 launch.json 文件

launch.json 文件新建好后,我们需要进行一些配置操作,这里我们选择的是,附加到进程。

后面我们是先启动egg的调试进程,然后再将vscode附加到进程中的。

这里有一个很关键的节点, program 这个属性写的就是你需要调试的js文件,我这边调试的是刚才打上断点的文件 pledges.js

使用 iterm 进入到工程目录,开启调试模式

在VSCode中选择 Attach to Process ,并且选择egg-cluster这个进程。

等请求进入到刚才打断点的地方,VSCode就会自己跳转到调试点啦,然后就可以尽情调试啦~

BTW,如果你有更好,更简单的调试方式请告诉我...

如何调试nodejs

Node Inspector 是一个可在webkit内核浏览器下进行nodejs调试的工具,其界面基本上跟chrome的调试工具一样,使用非常方便。

首先在全局环境中安装node inspector

[javascript] view plaincopy

npm install -g node-inspector

安装完成之后,以调试模式运行需要调试的node代码,比如

[javascript] view plaincopy

node --debug-brk app.js

这种方式会在代码运行的时候,强制在第一行添加断点

这时,会出现“debugger listening on port 5858”的提示

默认的端口是5858,也可以像这样修改:

node --debug-brk[=3000] app.js

然后,启动node-inspector,

[javascript] view plaincopy

node-inspector 

(因为之前的nodejs代码在运行,所以命令行窗口没办法输入新的命令,所以启动node-inspector需要新打开一个命令行窗口来输入)

根据提示中的地址,打开

就可以看到,一个模拟Chrome调试窗口的页面,加载了node中的所有代码,具体的调试方式,就和Chrome一样了。

还有一种方式是在代码中需要添加断点的地方,加入

[javascript] view plaincopy

debugger;

以下面这种方式运行

[javascript] view plaincopy

node --debug app.js

这样代码会运行到需要debugger的地方暂停。

vscode调试nodejs打断点,vscode断点调试vu

2022-11-23
vscodenodejs调试(vscode调试js代码)

本文目录一览: 1、vscode 怎样在不重启的情况下调试nodejs 2、VScode如何逐步运行调试javaScript? 3、[Node] 如何使用 VSCode 调试 child_proces

2023-12-08
nodejs热调试(nodejs 调试)

本文目录一览: 1、如何使用nodejs搭建开发环境 2、如何在iis上部署node 调试 3、VScode如何逐步运行调试javaScript? 4、nodejs挂在windows IIS运行的,V

2023-12-08
vscode运行不出来,vscode运行不出来

2022-11-22
VSCode打断点没有反应解决方案

2023-05-20
让VSCode Debug更高效的调试技巧

2023-05-17
vscode运行vue项目详细指南

2023-05-23
vscode最新版配置php,vscode配置教程

2023-01-06
VSCode远程调试

2023-05-17
调试js(vscode调试js)

本文目录一览: 1、如何在网页中调试JavaScript 2、JS怎么进行单步调试 3、谷歌浏览器怎么调试js 4、chrome 如何调试js 5、如何使用firefox进行网页js调试 如何在网页中

2023-12-08
ide断点调试php代码(php 断点调试)

2022-11-12
深入了解VSCode Vue模板

2023-05-21
vscode怎么编译运行js代码(vscode如何运行js)

本文目录一览: 1、vscode怎么运行javascript 2、如何在vscode中使用nodejs 3、vscode怎么运行代码 4、Visual Studio Code Mac怎么运行JavaS

2023-12-08
Vscode如何运行HTML文件

2023-05-17
了解VSCode Vue3插件的全面指南

2023-05-21
nodejs命令行调试程序(nodejs远程调试)

本文目录一览: 1、如何调试nodejs 2、如何在iis上部署node 调试 3、webstorm怎么启动nodejs的调试和服务器 4、如何使用DevTools调试Nodejs运行的Javascr

2023-12-08
VSCode-cpptools

2023-05-20
VSCode Golang配置—让你的开发更便利

2023-05-23
nodejs代码怎么打断点(JS打断点)

本文目录一览: 1、WebStorm3.0 调试nodejs 怎么添加断点 2、如何调试nodejs 3、nodejs如何打断点调试程序 4、怎么结束node.js serverside javasc

2023-12-08
mysql上线调试(mysql源码调试)

2022-11-14