使用 Visual Studio Code 调试和运行 Angular2 Typescript?

2023-12-01

使用 Visual Studio Code 调试和运行 Angular2 Typescript?

我正在尝试使用 VS 代码调试 Angular2 typescript 应用程序https://angular.io/guide/quickstart

谁能分享一下从 VS code 调试和运行的步骤吗?


经过大量研究,我发现了这些步骤-

在开始之前,请确保您拥有最新版本的 VS Code。您可以验证最新版本 - 帮助 > 检查更新或关于。

  1. 安装名为“Chrome 调试器”的扩展。安装完成后,重新启动 VS code。

  2. 转到“调试”窗口,使用 Chrome 打开 launch.json。

  3. 在 Launch.json 配置部分中,使用以下配置

    {
        "name": "Launch localhost with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/Welcome",
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    }
    
  4. 在 tsconfig.json 中,确保有 "sourceMap": true

这样就完成了您的调试环境设置。 现在,在开始调试之前,请确保所有现有的 Chrome.exe 实例均已关闭。从任务管理器验证或使用 DOS 命令“killall chrome”

  1. 使用 npm start 命令和 Chrome 作为默认浏览器运行您的项目。

  2. 应用程序成功运行后,您将收到端口号。从 Chrome 浏览器复制 URL 并粘贴到上面的 url 部分。 (注意:如果您在应用程序中使用路由,则 url 会像上面那样,否则将以 index.html 等结尾)

  3. 现在,在打字稿文件中的任意位置放置断点。

  4. 再次转到 VS Code 中的调试窗口,然后单击“运行”。 连接到调试器的选项卡/实例如下所示。

Chrome Debugging

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Visual Studio Code 调试和运行 Angular2 Typescript? 的相关文章

随机推荐

  • Youtube 请求无法完成,因为您已超出配额 [关闭]

    Closed 这个问题不符合堆栈溢出指南 目前不接受答案 我的应用程序显示 Youtube V3 API 超出配额限制错误 我在 Google 控制台中的每日限制是 0 我无法更改该值 如何解决这个问题 单击旁边的小铅笔图标0并将其增加到1
  • $("#id") 仅选​​择第一个元素,但 $("div#id") 选择两个元素? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 div Hello buddy div div Hel
  • 跳过Delphi中的默认参数

    有没有办法跳过默认参数 假设我的方法声明是这样的 procedure MyProc1 var isAttr1 Boolean FALSE var isAttr2 Boolean FALSE var isAttr3 Boolean FALSE
  • 油漆组件不工作

    这可能是一个愚蠢的问题 但是我如何调用paintComponent 它根本不显示该对象 在其内部 公共类 Ball 扩展了 JPanel 实现了 Runnable public class Balls public static void
  • .htaccess 重定向域别名/停放域

    我有一个与 htaccess 相关的问题 例如 如果我有两个域 a com 和 b com 全部引用一台主机 b com 是 a com 的域别名 我希望访问 a com 的访问者将被引用到带有 www 的 url http www a c
  • Firebase JS API 身份验证 - 具有不同凭据的帐户存在

    我们在尝试解决此问题时遇到了实际问题 因此希望获得一些 Firebase 帮助 那些已经解决了相同问题的人 该应用程序是 React Native 0 43 2 并使用 Firebase JS API 最新 我们提供 Facebook 和
  • 为什么不鼓励 setAnimationDidStopSelector ?

    我在苹果关于 setAnimationDidStopSelector 的文档中看到以下内容 在 iOS 4 0 及更高版本中不鼓励使用此方法 如果您使用基于块的动画方法 则可以将委托的结束代码直接包含在块内 我尝试添加要放入动画块内的动画停
  • 将对象数组转换为单个对象

    例如 我有以下数组 name abc value 1 name xyz value 2 name abc value 3 name abc value 4 name xyz value 5 现在 我想通过分组将该数组减少为单个对象value
  • SPOJ 你能回答这些问题吗?

    我正在尝试解决这个问题SPOJ 我在线段树部分发现了这个问题 所以我很确定可能有一些使用线段树的可能解决方案 但我无法想出应该存储在树节点中的元数据 最大总和可以使用以下公式计算卡丹算法 但是如何使用线段树来计算它 如果我们只存储某个范围的
  • 找不到颤振命令

    这个问题的答案是社区努力 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 显然 所有 Flutter 命令都无法在 Android Studio 的终端中运行 我相信我正在尝试在项目的根目录下运行它 Output bash flutt
  • R:将一个(大)数据帧的坐标匹配到另一个(大)数据帧的网格单元

    我有一个包含 X Y 坐标的大型数据框 约 200 000 行 例如 points lt data frame X c 1 3 2 5 4 Y c 4 3 2 2 1 另一个大型数据框 约 1 000 000 行 包含空间 矩形 网格的角单
  • LINQtoSQL 中的多重继承?

    伙计们 我一直在网上冲浪 寻找一种可以在 LINQ To SQL 中使用多表继承的方法 但看起来它只支持单表继承 这不是在 ORM 框架中实现继承的最佳方式 我了解到这个问题将在下一个 LINQ 和实体框架实现中得到解决 但我们谈论的停留时
  • android中如何过滤Json数据?

    我正在获取数据json形式就像 Users category id 1 user email email protected category id 5 user email email protected category id 1 us
  • 通过 HTML5 Canvas 上的一组坐标移动对象

    我想移动一个物体 在这种情况下画圈 通过坐标数组 例如 300 400 200 300 300 200 400 400 在 HTML5 Canvas 上 我可以将对象移动到一个坐标 如下所示 以下代码在 100 100 处绘制一个圆并将其移
  • 为什么 .ToString() 在空字符串上会导致空错误,而 .ToString() 在具有空值的可空 int 上运行良好?

    selectedItem有两个字段 int cost string serialNumber 在这个例子中 cost and serialNumber of selectedItem均为空 我正在阅读以下领域selectedItem通过它们
  • 使用常用词按行合并两个数据框[重复]

    这个问题在这里已经有答案了 df1 lt data frame freetext c open until monday night one more time to insert your coin numid c 291 312 df2
  • bcrypt-ruby - 您的应用程序中没有安装 bcrypt-ruby

    我是 Ruby on Rails 的初学者 并试图从中学习http ruby railstutorial org 我正在创建sample app 但卡在了第 6 章 我的Ruby版本 ruby 2 0 0p195 2013 05 14 i3
  • Javascript二进制文件读取

    From here shl function a b for b b a a 0x7fffffff 1 0x40000000 0x40000000 a 2 a 0x40000000 2 0x7fffffff 1 return a readB
  • RestSharp 响应未经授权

    我是基于网络的解决方案的新手 我正在使用 RestSharp 库访问休息网址 我的代码如下 var cleint new RestClient http REST URL cleint Authenticator new HttpBasic
  • 使用 Visual Studio Code 调试和运行 Angular2 Typescript?

    使用 Visual Studio Code 调试和运行 Angular2 Typescript 我正在尝试使用 VS 代码调试 Angular2 typescript 应用程序https angular io guide quickstar