vscode 调试webpack node.js

原创 已于 2023-03-15 09:15:51 修改 · 829 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #node.js #vscode

于 2023-03-14 17:27:45 首次发布
在VSCode中调试Node.js项目需要安装JavaScriptDebugger插件，配置DebugConfigurations，创建launch.json文件来定义启动方式，设置断点以进行代码调试。通过这些步骤，开发者能有效诊断和解决Node.js应用的代码问题。

如何在 VS Code 中调试 Node.js 项目

在开发 Node.js 应用时，代码调试是一个不可或缺的步骤。VS Code 提供了一个使用方便的集成式调试器，可以帮助我们快速诊断代码问题。

准备工作

在开始调试之前，请确保您已经安装并正确配置了以下环境：

Node.js 和 npm
Visual Studio Code

安装调试插件
首先需要安装调试插件 JavaScript Debugger。在 VS Code 中选择 Extensions（扩展）选项卡，搜索并安装该插件。

然后，在 VS Code 的 Debug 栏上方，单击设置按钮，选择“Debug Configurations”，确保选中“Node.js”环境。
在这里插入图片描述
选择需要调试的指令

配置启动文件

在 VS Code 的左侧菜单栏中，选择 Debug 选项卡，再单击界面上的 create a launch.json file 链接。

此时，VS Code 会弹出一个选择框，让你选择运行环境。你需要选择 Node.js 环境，然后点击“创建”。

VS Code 将自动生成一个默认的 launch.json 文件，并打开该文件进行编辑。这个文件用于定义如何启动和调试 Node.js 应用程序。

在这个 json 文件中，可以配置多个不同的 debug 模板，每个模板对应着一种不同的启动方式。

下面是一个示例：


                

                
                
        

    



  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
VScode（二）：ES6 & Nodejs & webpack & babel

				
			

			

				

					流浪中的uncle livin
				

				

					01-03
					
					831
					
				

			

		

		

			
				
目录1 VScode配置安装2 VScode调试ES62.1 扩展插件安装
1 VScode配置安装
自行前往VScode官网下载，并按提示进行安装。

2 VScode调试ES6
2.1 扩展插件安装





			
		

	



                

            
              



	

		

			

				
					
vscode 调试 node.js的方法步骤

				
			

			

				

					10-14
				

			

		

		

			
				
 "debug": "node --max_old_space_size=12288 --inspect-brk node_modules/webpack/bin/webpack.js --config build/webpack.dev.js --watch" } ```  这里，`--inspect-brk` 参数使得 Node.js 在启动时暂停，等待调试...

			
		

	



              


  
              

                


	

		

			

				
					
在vscode中调试webpack

				
			

			

				

					maomaolaoshi的博客
				

				

					05-15
					
					1446
					
				

			

		

		

			
				
前言
接手了公司的新项目，但是由于对整个运作流程不了解，想要一步步进行调试加深对项目印象，所以搜索了相关资料，结合自己实际情况进行调试。

调试的两个关键文件
package.json
正常的package.json
{
  "name": "my-web",
  "version": "0.0.1",
  "scripts": {
    "dev": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "n

			
		

	





	

		

			

				
					
vscode调试webpack项目的方法

				
			

			

				

					jiaohuizhuang6019的博客
				

				

					09-24
					
					1414
					
				

			

		

		

			
				
vscode调试webpack项目的方法

			
		

	



		

			
		



	

		

			

				
					
vscode nodemon打断点

				
			

			

				

					smz8023的博客
				

				

					10-14
					
					518
					
				

			

		

		

			
				
1，修改package.json

"scripts": {  
 "debug": "nodemon server.js"  
},  
2，修改.vscode/launch.json
{  
 "version": "0.2.0",  
 "configurations": [  
        {  
            "name": "随意",  
            "type": "node",  
            "request": "launch",  
       

			
		

	





	

		

			

				
					
vscode 调试 webpack

				
			

			

				

					北筏的博客
				

				

					01-19
					
					652
					
				

			

		

		

			
				
在vscode生成的launch.json配置文件:
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "启动一个独立的 Chrome",
      "url": "http://localhost:7777",
      "webRoot": "${workspaceRoot}"
    },
    {
      "

			
		

	





	

		

			

				
					
如何在VSCode中调试Node.js和前端代码？

					
最新发布

				
			

			

				

					12-24
				

			

		

		

			
				
 引用[1]提到Node.js是一个基于Chrome V8引擎的JavaScript运行环境，引用[2]和[3]则提到了VSCode调试Node.js的配置方法。   在VSCode中调试Node.js和前端代码（HTML/JavaScript）的方法有所不同，下面分别说明：   ...

			
		

	





	

		

			

				
					
VSCode下使用TypeScript和Webpack的Node.js调试教程

				
			

			

				

					
				

			

		

		

			
				
开发者可以使用VSCode作为调试环境，对使用TypeScript编写的Node.js程序进行调试，同时借助Webpack进行模块打包，并通过生成的源码映射文件，在调试过程中定位到TypeScript源代码而非编译后的JavaScript代码，从而...

			
		

	





	

		

			

				
					
vscode调试webpack-dev-server项目

				
			

			

				

					前端劝退工程师
				

				

					08-10
					
					2786
					
				

			

		

		

			
				
先上结果

vscode下载debugger for chrome 插件

创建launch.json

添加的时候选择Chrome: Launch会自动生成chrome调试模板，主要是要加上
"preLaunchTask": "debug"

在开始debug之前添加一个叫做’debug‘的任务
新建debug任务
此时我们调试是找不到debug任务的

所以直接点配置任务
会在项目根目录下创建task.json,配置如下
{
    "version": "2.0.0",
    "command": 

			
		

	





	

		

			

				
					
goland 远程调试go_[译] 使用 VSCode 调试 Golang

				
			

			

				

					weixin_39945915的博客
				

				

					11-21
					
					604
					
				

			

		

		

			
				
本文字数：2100字阅读时间：10分钟安装 Delve有两种安装 Delve 的方式:支持命令Go: Install/Update Tools选择dlv, 安装/更新 delve或者手动安装 delve, 参考安装说明(注: 文章中提到的执行命令, 并不是在终端中执行,而是在VS Code 命令面板中执行, 打开方式:查看->命令面板)调试器配置说明调试器会使用要以下这些配置,...

			
		

	





	

		

			

				
					
vscode安装swift插件_使用 Webpack 优化 VS Code 插件加载性能

				
			

			

				

					weixin_39661780的博客
				

				

					11-20
					
					313
					
				

			

		

		

			
				
Webpack 这一 JS 模块打包神器相信大家都不陌生了。由于 VS Code 插件大部分也都是 JS/TS 代码 + 依赖库的形式，因此也可以使用 Webpack 打包，优化性能。经过实测，经过 Webpack 打包优化后的插件，其加载耗时可缩短几倍甚至数十倍之多，先来看下效果：Webpack 优化效果我们以 Java Test Runner 这一插件为例： 在使用 Webpack 后，安装包...

			
		

	





	

		

			

				
					
vscode调试webpack的启动和打包部署过程，nodejs调试

				
			

			

				

					双眸
				

				

					10-01
					
					1096
					
				

			

		

		

			
				
launch.json
{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
...

			
		

	





	

		

			

				
					
vscode中配置webpack

				
			

			

				

					Coralpapy的博客
				

				

					08-03
					
					850
					
				

			

		

		

			
				
1.管理员身份运行vscode,避免无权限执行脚本的冲突问题

2.执行命令

(1)npm init

(2)npm install webpack webpack-cli -g

(3)npm install webpack webpack-cli -D


PS D:\Webpack> cd 01webpack
PS D:\Webpack\01webpack> npm init
This utility will walk you through creating a package.js

			
		

	





	

		

			

				
					
使用 vscode 完成 webpack 操作。项目完成后使用 webpack 打包

				
			

			

				

					eeeee1o的博客
				

				

					03-15
					
					1454
					
				

			

		

		

			
				
可能因为没有安装某些 loader 报错，通过 npm install ***，来安装对应的 loader 文件。例如 "scripts" 中原本就有 "build"， 此时，如果你添加了一个重复的。这是一个最简单的 Webpack 配置文件，它定义了入口文件。文件中，你需要将这个新添加的打包脚本命令改为不同的名称。文件就会被加载并运行，你的应用程序也会随之启动。打包生成的文件在 webpack 配置中设置的。来运行新添加的webpack打包脚本。5. 如果你想在浏览器中运行打包好的。字段中，键不能重复。

			
		

	





	

		

			

				
					
VSCode如何调试Nodejs

				
			

			

				

					lemon今天学习了吗？的博客
				

				

					07-24
					
					8236
					
				

			

		

		

			
				
调试的重要性不言而喻，方法也是五花八门，这里只介绍一种vscode上的简单又直观的方法。方法二通过添加配置文件launch.json来调试；1.切换到debugge模式，直接断点调试；

			
		

	





	

		

			

				
					
【webpack 插件开发】如何在vscode调试webpack源码

				
			

			

				

					qq_34998786的博客
				

				

					03-24
					
					707
					
				

			

		

		

			
				
前言❝最近打算深入学习下webpack原理，打算翻翻源码，借此更新webpack系列的知识点，平时学习的底稿也挺多的，也该整理出来了❞暂定会更新以下知识点如何实现一个webpack loa...

			
		

	





	

		

			

				
					
vscode使用技巧——webpack项目的断点调试

				
			

			

				

					sayUonly的博客
				

				

					10-12
					
					2127
					
				

			

		

		

			
				
为了方便调试，我研究了一下如何使用vscode进行断点调试。本次尝试已在html-template项目中测试通过。
安装插件
在vscode的插件商店安装必要的插件“Debugger for Chrome”。

调整webpack配置
在webpack.dev.config.js文件中，增加source map的配置。
module.exports = webpackMerge.merge(webpackBase, {
  devtool: 'eval-source-map'
});

配置启动项
点击“菜

			
		

	





	

		

			

				
					
VSCode配置JavaScript基于Node.js的调试环境

					
热门推荐

				
			

			

				

					Luminary的技术烟火
				

				

					04-02
					
					2万+
					
				

			

		

		

			
				
一、安装VSCode和Node.js
       前言：做科研之后确实很少会总结积累，可能是科研中出现的问题的解决方法比较多样灵活，别说了其实就是偷懒哈哈哈哈哈。这不又要做前端才又开始写博客记录环境配置了。行了不说废话了赶紧开始正文。
       再啰嗦一句，本文配置的环境主要针对单独JS文件的断点调试，主要是为了调试LeetCode里面的代码。
本人环境：

Vi

			
		

	





	

		

			

				
					
VS Code安装Node.js、webpack、vue-cli

				
			

			

				

					yhj198927的博客
				

				

					09-29
					
					217
					
				

			

		

		

			
				
下载node.js，进行安装；内置npm，可不用再次安装npm

完成后，全局安装webpack，命令为 npm install webpack -g

如需安装vue，全局安装vue，命令为 npm install vue-cli


			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值