搭建JavaScript和TypeScript开发调试环境

15天掌握前后端开发 专栏收录该内容
5 篇文章 2 订阅

一、安装Visual Studio Code

Visual Studio Code(简称VSCode)是由微软开发的一个开源的、跨平台的代码编辑器。Visual Studio Code的优势就是有丰富的扩展包,大多数功能都可以通过安装扩展包的方式来实现。

打开Visual Studio Code官网https://code.visualstudio.com/,根据系统选择对应的版本进行安装:
在这里插入图片描述

安装选项可以根据个人喜欢来指定,没有强制的要求。但建议勾选如下4项:
在这里插入图片描述

二、配置Visual Studio Code

2.1 将默认语言设置为中文

安装完Visual Studio Code之后,其界面的默认语言是英文,我们只需要安装“简体中文的语言包”就可以将语言修改为中文:
在这里插入图片描述
点击左侧“扩展”图标,打开扩展工具栏,输入“Chinese”搜索简体中文语言扩展包,安装完重启Visual Studio Code即可。

三、调试环境选择

启动Visual Studio Code,按下快捷键F5,可以看到Visual Studio Code已经内置了几种调试环境的配置:
内置调试环境配置
但我们需要使用这些配置还需要安装对应的运行时环境如Node.js、Chrome。

Visual Studio Code也可以调试C++,C#,Python,Go,C++等语言,但需要在launch.json中进行适当的配置,后面在讲解使用Node.js调试TypeScript的时候会介绍如何配置launch.json。

因为Node.js可以直接运行Javascript脚本文件,所以这里我们选择使用Node.js来调试JavaScript。

在开始调试前,我们还需要安装Node.js运行时环境,打开Node.js中文官网https://nodejs.org/zh-cn/,选择长期支持版,下载安装即可(安装完成之后可能需要重启Visual Studio Code):
在这里插入图片描述

四、调试JavaScript

打开Visual Studio Code,新建一个JavaScript文件,输入任意JavaScript代码并保存,如:
在这里插入图片描述
点击左侧工具栏的“运行”图标(快捷键Ctrl+Shift+D)并选择“运行和调试”(或者按F5快捷键),在弹出的调试环境下拉框中中选择“Node.js”,此时就会使用Node.js来运行当前脚本。
在这里插入图片描述

此时是看不到console.log的输出,因为其输出到了"调试控制台",我们需要在“查看”菜单中打开“调试控制台”,再次使用上面步骤运行JavaScript文件即可在“调试控制台”看到运行的输出了。
在这里插入图片描述

4.1 断点

设置/取消断点:用鼠标点击行号左侧区域(即下图画绿框的区域)即可设置断点,再次点击便是取消断点;也可以使用快捷键F9来设置/取消断点.
在这里插入图片描述
设置断点后,F5开始调试代码,代码运行到断点处便会暂停,此时我们可以在左侧区域查看当前上下文涉及的"局部变量"和"全局变量"、“调用堆栈”、以及"断点列表"。

4.2 调试快捷键

  • F5 开始调试或在代码暂停后继续执行到下一处断点
  • F10 单步执行
  • F11 单步步入,F10遇到函数不会调试进入函数内部,而F11却可以步入到函数内部
  • Shift+F11 单步跳出
  • Shift+F5 停止调试

五、调试TypeScript

Node.js是不能直接运行TypeScript脚本的,我们使用Node.js运行TypeScript脚本一般采用如下方法:
使用TypeScript官方提供的tcs工具将TypeScript脚本转化为JavaScript,然后再使用Node.js运行js脚本,大致流程如下:

tcs --outFile index.js index.ts
node index.js

而Node.js的扩展模块ts-node可以简化上述操作(其内部也是使用的tcs和node),将上面二步操作合二为一:

ts-node index.ts

所以,我们这里采用ts-node模块来作为TypeScript脚本的运行时环境。

由于我们采用了ts-node工具来运行TypeScript脚本,Visual Studio Code没有内置该工具的调试配置,所以我们需要在luanch.json中自定义一个适用于ts-node的调试环境配置。

注意:如果需要自定义配置,那么工程文件必须在一个单独的目录中,并使用Visual Studio Code打开这个目录(对着目录点右键选择使用Visual Studio Code打开即可)

大致步骤如下:

  1. 新建项目目录(假设叫TSDemo

  2. 使用Visual Studio Code打开该目录,并在“查看”菜单中选择打开“终端”(之所以在Visual Studio Code中打开终端,纯属是为了方便,因为在Visual Studio Code中打开终端,终端会自动切换到项目当前目录,且不用多个窗口之间切换)。

  3. 在终端中依此执行如下命令:

    # 生成package.json文件
    npm init -y
    
    # 安装typescript
    npm install typescript -S
    
     # 安装ts-node
     npm install ts-node -S
    
  4. luanch.json的路径为项目目录\.vscode\luanch.json,按照下图依此点击左侧工具栏“运行”->“创建launch.json文件”:
    在这里插入图片描述

  5. 打开自动生成的luanch.json文件,在configurations节添加如下配置:

    {
        "version": "0.2.0",
        "configurations": [
            {
                "name": "Current TS File",
                "type": "node",
                "request": "launch",
                "program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js",
                "args": [
                    "${relativeFile}"
                ],
                "cwd": "${workspaceRoot}",
                "protocol": "inspector"
            }
        ]
    }
    
  6. 打开需要调试的TypeScript文件,快捷键F5开始调试。

因为ts-node既可以执行TypeScript,也可以执行JavaScript,所以这种方式也可以用来调试JavaScript脚本。

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<span style="font-size:14px;color:#666666;background-color:#FFFFFF;">本套课程大喵将从零带着大家搭建 <span style="color:#FF0000;">Node+Express+Typescript</span>(开发、生产、构建)环境,首先大喵会带着大家在三种系统(windows、mac、linux)搭建node.js环境,并且会详细讲解 typescript 所有指令<span style="color:#FF0000;">tsconfig.json</span>中所有的配置选项的功能作用,以及每个配置项之间的关联,深入学习掌握了解 <span style="color:#FF0000;">Typescript(tsc)</span>命令行工具,为学习typescript,解决vue+typescript以及react+typescript项目异常报错,代码规范处理,提供夯实的基础知识。</span><br /><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">课程目录及大纲:</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">01. Node+Tpyescript 课程介绍</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">02. 三种系统下安装Node.js</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">03. windows 安装node.js</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">04. mac node.js 安装</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">05. linux下node及npm安装</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">06. Typescript基础介绍</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">07. TSC常用命令介绍</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">08. tsconfig.json介绍</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">09. tsconfig.json基础配置</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">10. tsconfig.json严格类型检测配置</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">11. tsconfig.json 附加检测配置</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">12. tsconfig.json 模块解析配置</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">13. tsconfig.json Source Map配置</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">14. tsconfig.json 实验高级配置</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">15. 项目目录结构创建</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">16. npm模块包安装</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">17. npm scripts 命令创建</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">18. 基础后台服务创建</span><br /><span style="font-size:14px;color:#666666;background-color:#FFFFFF;">19. Express+Typescript 后台服务创建</span>
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值