• TypeScript游戏程序JsTankGame不是本人写的,是从CSDN下载的。

  • JsTankGame是用Visual Studio开发的,因此在Visual Studio下调试非常顺畅。本人尝试用Visual Studio Code看看能否调试这个用TypeScript写的游戏程序。

  • 首先解压JsTankGame到JsTankGameforVSCode文件夹下,启动Visual Studio Code,打开JsTankGameforVSCode文件夹,如下图:。

  • 需要配置settings.json如下:

  • {

  •   "typescript.tsdk": "node_modules/typescript/lib"
  • }

  • 浏览器也不正常:

  • 配置好settings.json后,按F5进入调试运行,但出现2个错误提示:“[debugger-for-chrome] Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222”和“未指向有效的 tsserver 安装。将禁用 TypeScript 语言功能”,如下图:



  • 如上的提示告诉我们运行TypeScript程序启动Web 服务器,因此,需要先安装Web 服务器(live-server)。

  • 下载并安装Web 服务器:

  • 1、下载Web 服务器,在cmd命令下输入:npm install -g live-server

  • 2、启动Web 服务器,在cmd命令下输入:live-server

  • 启动Web 服务器(live-server)后再按F5进入调试:

  • JsTankGame终于在Visual Studio Code中调试成功了!!!

参考资料

使用VS Code调试TypeScript游戏程序JsTankGame成功!!!的更多相关文章

  1. 使用Visual Studio Code开发(编译、调试)C++程序

    总体安装步骤 安装VSC(Visual Studio Code). 安装C/C++编译器(如MinGW-w64),然后配置好环境变量.//完成这步即可在VSC的终端(命令行)下编译.运行.cpp程序了 ...

  2. VS Code 调试 Angular 和 TypeScript 的配置

    一.安装插件 在 Visual Studio Code 中打开扩展面板(快捷键 Ctrl+Shift+X),搜索安装 Debugger for chrome 插件). 二.配置启动参数 在 Visua ...

  3. 使用Visual Studio Code搭建TypeScript开发环境

    使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...

  4. VS Code 运行 TypeScript 操作指南

    总结一下TypeScript开发环境用到的各种工具: Node——通过npm安装TypeScript及大量依赖包.从https://nodejs.org/下载并安装它:如果安装各种包不方便,可以将安装 ...

  5. electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

  6. VS Code开发TypeScript

    TypeScript是JaveScript的超集,为JavaScript增加了很多特性,它可以编译成纯JavaScript在浏览器上运行.TypeScript已经成为各种流行框架和前端应用开发的首选. ...

  7. chrome浏览器调试typescript

    在chrome的开发人员工具的配置项中,有一个sourcemap的选项,用来配置javascript源码和生成代码的关系. 如果能在浏览器中直接调试typescript代码,才能让我们真正体会到typ ...

  8. 在Chrome+Visual Studio中调试asp.net程序很慢的问题(Firefox也有类似问题)

    在Chrome+Visual Studio中调试asp.net程序很慢的问题(Firefox也有类似问题) 今天开始起在Chrome中调试,发现问题主要出在菜单栏(layout文件)中,google了 ...

  9. Eclipse+CDT+GDB调试android NDK程序(转)

    Eclipse+CDT+gdb调试android ndk程序 先介绍一下开发环境,在这个环境下,up主保证是没有问题的. ubuntu 11.10 eclipse 3.7(indego) for ja ...

随机推荐

  1. MySQL索引和锁

    索引和锁可以让查询锁定更少的行.如果你的查询从不访问那些不需要访问的行,那么就会锁定更少的行,从两个方面来看这对性能都有好处.首先,虽然innodb的行锁效率很高,内存使用也很少,但是锁定行的时候仍然 ...

  2. redis常见命令

    一.介绍 1.Redis是什么 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统.Redis提供了一些丰富 ...

  3. python 装饰器简介

    24.装饰器     1.@ + 函数名:#1自动执行outer函数并且将下面的函数名f1当做参数传递                   #2将outer函数的返回值,重新赋值给f1. def ou ...

  4. R: for installing package 'RODBC'

    Today, i try to install a package in R named 'DOBDC', while i meet a message: > install.packages( ...

  5. Hive是什么!

    Hive是什么! 一直想抽个时间整理下最近的所学,断断续续接触hive也有半个多月了,大体上了解了很多Hive相关的知识.那么,一般对陌生事物的认知都会经历下面几个阶段: 为什么会出现?解决了什么问题 ...

  6. Android 自定义View 画圆 画线

    自定义一个DrawCircle继承View 实现构造方法: public DrawCircle(Context context) { super(context); this.mContext = c ...

  7. ural 1353. Milliard Vasya's Function

    http://acm.timus.ru/problem.aspx?space=1&num=1353 #include <cstdio> #include <cstring&g ...

  8. ural 1020 Rope

    #include <cstdio> #include <cstring> #include <cmath> #include <algorithm> # ...

  9. Oracle 判断 并 手动收集 统计信息 脚本

    CREATE OR REPLACE PROCEDURE SchameB.PRC_GATHER_STATS AUTHID CURRENT_USER IS BEGIN SYS.DBMS_STATS.GAT ...

  10. 在ubuntu上编译chrome

    在ubuntu上编译chrome 在ubuntu上编译chrome 红心地瓜 1.获取代码 1)下载tarball,http://chromium-browser-source.commondatas ...