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

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

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

补充知识点：每次调试时重新编译

按上述的操作已经生成了task.json配置文件

{
	"version": "2.0.0",
	"tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
        "$tsc"
      ],
      "group": "build",
      "label": "tsc: 构建 - tsconfig.json"
    }
  ]
}
复制代码


  • 点击运行 -> 添加配置 -> 选择nodejs




  • 在生成的launch.json文件中，添加preLaunchTask字段，值是tasks.json的label值，一定要相同，注意大小写。该字段的作用是在执行命令前先执行改task任务。




注意，如果编译后的js文件不在相应的位置，通过图中的outFiles字段可以指定ts编译后的js路径。


  • 在index.ts文件中按F5启动调试，可以看到调试前已经生成了编译文件，而后就可以正常调试了。




补充知识点：VsCode的TS版本说明


vscode本身内置了对ts的支持


vscode内置的ts版本(即工作区版本)，仅仅用于IntelliSense(代码提示)，工作区ts版本与用于编译的ts版本无任何关系。


修改工作区ts版本的方法：


  • 在状态栏选择typescript的图标，选择版本切换




  • 选择你需要的版本即可






调试html项目


学会了上述ts的调试后，我们尝试调试html文件，并且html文件中引入ts文件:


  • 创建html，引入ts编译后的js文件


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3>Hello</h3>
  <script src="./out/index.js"></script>
</body>
</html>
复制代码


  • ts源文件如下：


const num: number =  1221;
console.log(num);
function fn(arg: string): void {
  console.log('fn', arg);
}
document.body.append('World')
fn("he");
复制代码




  • 打debug




  • launch.json启动命令配置


{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "file:///E:/demo/vscode/debug/ts/index.html",
      "preLaunchTask": "tsc: 构建 - tsconfig.json",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
复制代码




  • 选择我们的启动命令




  • 按F5可以正常唤起chrome浏览器，并在vscode的ts源码处会有debug效果


调试Vue项目的两种方式


下面介绍两种调试vue2项目的3种方法，其他框架的调试也类似：


不使用vscode插件Debugger for chrome的方法


  • 初始化vue项目，配置vue.config.js，指定要生成sourceMaps资源


module.exports = {
  configureWebpack: {
    // 生成sourceMaps
    devtool: "source-map"
  }
};
复制代码


  • 根目录下创建./vscode/launch.json文件 或者选择运行 -> 添加配置 -> Chrome



						
上一页 1 2 3 4 56 7 8 下一页 阅读全文

						

						
						

					

					

						
						
					

					

						
					

					

					

						
相关文章

						
					

					

						
					

					
					

						
最新评论

						

					

				  

			  

		  
			

				
			  

		  

	  

	  
	 

		
		
		

		
关注微信公众号
 
		
扫一扫