脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 软件教程 > 编程开发 > VSCode调试技巧与实践

深入讲解VsCode各场景高级调试与使用技巧 代码编写效率提升2倍

csdn   发布时间：2023-12-22 12:01:52   作者：小明的学习圈子   我要评论
VSCode是一款开源免费的跨平台文本编辑器，它的可扩展性和丰富的功能使得它成为了许多程序员的首选编辑器,在本文中，我将分享一些VSCode的使用技巧，帮助您更高效地使用它

补充知识点：数据面板介绍

  • 数据面板可以查看所有变量

  • 在变量上点击右键，可以设置变量值、复制变量值等操作

  • 聚焦于数据面板时，可以通过键入值来搜索过滤。点击下图所示按钮可以控制是否筛选。

补充知识点：监听面板介绍

可以将变量添加到监听面板，实时观察变量的变化。

  • 在变量面板通过右键选择“添加到监视”将变量添加到监听面板

  • 也可以直接在监听面板选择添加按钮进行变量添加

  • 添加变量后就可以实时监听变量的变化

补充知识点：调试服务器时打开一个URI

开发 Web 程序通常需要在 Web 浏览器中打开特定 URL，以便在调试器中访问服务器代码。VS Code 有一个内置功能“ serverReadyAction ”来自动化这个任务。

  • 一段简单的server代码
{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}
复制代码
  • 配置launch.json，以支持打开URI
{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}
复制代码


pattern是设置匹配的程度端口号，端口号放在小括号内，即作为一个正则的捕获组使用。uriFormat映射为URI，其中%s使用pattern中的第一个捕获组替换。最后使用该URI作为外部程序打开的URI。


  • 按F5调试，会自动打开浏览器，且会在下图所示处中断，当继续执行后，浏览器才能看到输出了server的内容




终局：各场景调试实战 调试NodeJS项目


关于NodeJs项目的调试方法，已经在上述的断点的基本使用部分做了介绍，可以网上滚动翻阅。


调试Typescript项目


  • 调试TS项目前，先创建一个TS项目
  • 先初始化一个ts程序，生成默认的tsconfig.json文件


# 终端运行
tsc --init
复制代码




  • 打开tsconfig.json文件，开启sourceMap选项和指定编译后输出的路径


VS Code 内置了对 Ts 调试的支持。为了支持调试 Ts 与正在执行的 Js 代码相结合，VS Code 依赖于调试器的source map在 Ts 源代码和正在运行的 Js 之间进行映射，所以需要需要开启sourceMap选项。


{
    "sourceMap": true,
    "outDir": "./out"
}
复制代码


  • 新建index.ts文件，写一个基本的ts代码


const num: number = 123;
console.log(num);
function fn(arg: string): void {
  console.log('fn', arg);
}
fn("Hello");
复制代码




  • 手动编译调试TS


在上述的ts基本项目中：


终端执行ts的编译命令tsc




此时可以看到生成了out文件夹，里面包含一个index.js和一个index.js.map文件



						
上一页 1 2 34 5 6 7 8 下一页 阅读全文

						

						
						

					

					

						
						
					

					

						
					

					

					

						
相关文章

						
					

					

						
					

					
					

						
最新评论

						

					

				  

			  

		  
			

				
			  

		  

	  

	  
	 

		
		
		

		
关注微信公众号
 
		
扫一扫