代码之家  ›  专栏  ›  技术社区  ›  Mark Rabjohn

Chrome源代码未显示从Typescript生成的文件,并且具有源代码映射

  •  1
  • Mark Rabjohn  · 技术社区  · 6 年前

    我有一个由sapui5作为控制器动态加载的文件。我修改了代码,以便利用Typescript进行智能感知和故障检测。

    我的JS文件已成功创建,并在Chrome中正确运行。“开发工具/源/网络”窗口未列出我的“最终类”。控制器。js’文件,也没有列出类似名称的‘FinalAssembly’。控制器。ts的文件。

    我发现,如果从文件底部删除“//#sourceMapURL=”行,Chrome最终会列出我的JS文件。

    我曾读到,使用文件顶部的“//#sourceURL=”行会导致文件被列出,但事实并非如此。此外,我还读到,使用此指令应该允许我更改源列表中显示的名称,但事实并非如此。Chrome似乎忽略了此指令。

    截至今天,Chrome显示其版本为66,为最新版本。在过去的4个小时里,我阅读了很多文章和Github问题,这些文章表明源地图往往有问题,在某些Chrome版本中可能会失败。

    地图文件本身在Internet Explorer中工作,但我真的看不到自己在使用它进行开发。

    有人用Chrome 66中的源代码映射调试过JS吗?谁能建议我如何在Chrome中调试地图文件的使用?

    我在我的网站上放置了一个通过VSCode(tsc.exe)创建的非常简单的测试: http://www.ia.uk.com/TypescriptTest/default.htm -在我的Chrome 66上,这一个似乎根本没有下载地图文件(Fiddler没有看到任何这样的请求)。不显示代码的任何TS视图。根据我最初的问题,这不是一个动态加载的库,但确实表明存在问题。

    3 回复  |  直到 6 年前
        1
  •  6
  •   Mark Rabjohn    6 年前

    事实证明,DevTools有自己的设置集。“首选项”选项卡有一个“启用Javascript源映射”,在“我的副本”中已关闭该选项。我不记得曾经出现在那个屏幕上,但很明显这个框没有被选中。

    对于我的小示例中的普通JS文件,将同时显示JS和TS文件。当文件为动态文件时,仅显示TS文件。这意味着如果禁用了贴图,您将一无所获(因为不会显示JS文件)。

        2
  •  3
  •   4b0 Agit    5 年前

    只需打开devTools并重置浏览器。

    enter image description here

        3
  •  0
  •   kaya3 Amit Bera    5 年前

    确保你的Angular应用程序已启动。

    如果Angular应用程序未启动,则无法看到 .ts 文件在Chrome中。所以你需要先运行Angular应用程序。