标签: source-maps

我正在尝试让TypeScript源代码调试在Chrome中运行,但我遇到了两个特定的,也许是相关的问题.

第一个是由TypeScript/WebEssentials编译器生成的用于标识源映射文件位置的注释如下所示:

//sourceMappingUrl=MySourceFile.js.map

但Chrome不会读取该文件.似乎期望评论看起来像这样:

//@ sourceMappingUrl=MySourceFile.js.map

如果我手动将评论更改为该页面,并刷新我的页面,那么奇怪的是,所有.ts文件的引用都显示为Chrome开发者工具中的来源.

但是,这导致了我的第二个问题,因为文件实际上并没有被加载.Chrome 应该尝试下载的.ts源文件是http://localhost/MySourceFile.ts,但它实际上要下载的是http://localhost/C:/source/web/MySourceFile.ts.这是有道理的,因为MySourceFile.js.map的开放属性如下所示:

{"version":3,"file":"tmp1523.tmp","sources":["C:/source/web/MySourceFile.ts"

但这显然不适用于Chrome,因为它将源映射位置解释为完全相对,而IIS(非常正确)不会提供任何看起来像的URL http://localhost/C:/source/web/MySourceFile.ts.

那么,关于这两个问题,Chrome或TypeScript源映射功能是错误的吗？这样做的推荐方法是什么？

我使用的是Chrome 25.0.1323.1 dev-m,TypeScript 0.8.1和WebEssentials 1.8.5.

我使用了实现客户端异常日志记录window.onerror,在那里我检索当前错误和堆栈跟踪并使用AJAX将其发送到服务器

    window.onerror = function(message, url, line) {

      var stackTrace = printStackTrace(); //get stack trace

      //send message, url, line and stackTrace to the server using an ajax call
    }

printStackTrace这个库提供的功能在哪里:http://stacktracejs.com/

问题是在生产中所有JavaScript文件都缩小了,因此堆栈跟踪和行号并不真正有用,因为所有错误都在文件的第1行报告,这是正常的,因为缩小版本包含一行代码.例如:

Message: Object doesn't support property or method 'indexOf' 
URL: http://[server]/[site]/content/combined/combined.635EE367354E6DF721593CAC56FECF95.min.js
Line: 1

这可以使用源映射进行改进,还是仅在Developer Tools处于活动状态时才有效？

我想要的是,当没有启用开发人员工具激活/源映射的用户发生错误时,使用源映射(或至少是实际行号)获取完整堆栈跟踪.这有可能吗？

您是否知道包含使用grunt编译的应用程序的源地图的工作流程？

我很清楚像uglifyjs这样的插件可以让你简单地生成源地图.但我正在寻找将其纳入更复杂的工作流程,而不仅仅是制作一次性的源地图.

我注意到最受欢迎的Yeoman发电机(我知道)在工作流程中缺少源图.这只是因为源地图的主要插件缺乏支持吗？或者是工作流程中不需要源地图,我只是想不出足够聪明的替代方案？

我遇到过流行的grunt插件的明显问题包括:

uglify没有hacky修复就无法处理最基本的项目结构.

usemin除了最简单的配置之外,它还无法处理源映射,因为它实际上只能支持每个项目一个(但仍需要黑客来纠正它).一个可能的解决方案显然是要停止使用usemin完全,但你失去了所有的它的好处,就像它配对rev,watch和connect.

在我测试我的应用程序时,我认为我的最佳行动方案可能是使用未连接/未缩小的来源进行测试.当然,这不太理想,因为我希望我的测试环境尽可能地反映生产环境.

你在grunt项目中使用源地图吗？你怎么做呢？如果没有,你如何解决他们缺乏支持？

当我从缩小的js生成源映射回源文件时,映射是否包含源文件的文本,还是需要单独托管它们？

在HTML5岩石的描述中提到的sources,列出的源文件的名称键,并说明如何mappings映射缩小的行数和列数到原来的行和列的数字,但暗示"您还需要上传你的原始文件,以便开发者工具可以参考并在必要时显示它们".

Browserify的debug选项生成内联源映射,在dev工具中显示原始文件,而无需单独托管源文件.

当前的源地图规范是否同时支持？

我有一个用 TypeScript 编写的依赖项。依赖项包括 NPM 包中的源映射和原始源。如果我在代码中设置断点，然后单步执行依赖项，它会正确单步执行 TypeScript，而不是编译后的 JavaScript。但是，如果我在 TypeScript 代码中设置断点，然后启动我的应用程序，VSCode 会说

断点被忽略，因为未找到生成的代码（源映射问题？）。

如果我在进入依赖项后设置断点，一切都会正常。

我认为这里的问题是源映射是单向的，所以当我在 TypeScript 源文件中设置断点时，它不知道它在 JavaScript 中的位置（需要通过节点调试器实际设置断点）。一旦 JavaScript 文件打开，VSCode 就能够匹配两个 up and now 断点工作。

所以问题是，如何才能使我的 TS 断点从启动时就起作用，而不必首先单步进入文件？依赖关系是许多文件，并且每次运行都必须重置断点是有问题的，特别是因为我正在调试的特定问题如果花费太长时间（超过几秒）就会遇到套接字连接超时。

我想要的是一种方法来告诉 TypeScript，“在启动调试器时解析这些 JavaScript 文件并同步源映射，以便断点正确匹配”。

我知道一般功能是可用的，因为我可以通过 TypeScript 文件中的断点成功调试依赖项本身（我是依赖项的维护者）。只是当它作为 NPM 模块加载时，似乎丢失了一些信息。

Chrome 不会获取 js 源映射并转储原始缩小源中的错误。源映射显然位于缩小的 js 文件旁边，具有相同的名称，但.map扩展名不同。在缩小的 js 文件的末尾有一个对它的正确引用：

//# sourceMappingURL=main.2635fcfe.js.map

Enable JavaScript source maps还在开发工具中检查设置：

网络上的所有资源都表明它应该可以正常工作。关于为什么它可能不会的任何想法？是否有办法调试源映射包含过程，也许见证 Chrome 正在测试的路径？

TypeScript Compiler API 有多种转换文件的方法：

• 创建一个转译器主机并实现getCustomTransformers. 这有源地图支持
• 使用ts.transform。这似乎没有源映射支持。

由于各种原因，ts.transform()在这种特殊情况下使用起来要容易得多。

使用时如何获取源地图ts.transform()？

是否可以在 HTML 脚本标签中的内联 Javascript 中使用 data-URI 源映射？

我已经尝试了以下 HTML 的一些变体，但当页面在 Chrome 中加载时，它们似乎都无法为嵌入的 JS 生成可用的源映射：

<script type="text/javascript">\n/* source code... */\n\n//# sourceMappingURL=data:application/json;base64,/* base64\'d inline sourcemap */\n</script>\n

我还尝试从生成的源映射中剥离sourcesContent, file, 和sourceRoot，因为我认为这些不适用于这种情况。但这似乎没有帮助。

该规范似乎暗示这是可能的，或者至少是考虑过的，因为src简要提到了没有属性的脚本标签：

\n

如果生成的代码与 script 元素关联，并且该 script 元素没有 \xe2\x80\x9csrc\xe2\x80\x9d 属性，则源原点将为 page\xe2\x80\x99s 原点。

\n\n

— https://sourcemaps.info/spec.html

\n

然而，我很难找到在野外使用这种方法的证据，或者是否有可能。任何人都可以帮助阐明这一点吗？

我最近创建了一个小型 NestJS 项目，试图将 Sentry 集成到其中。我已按照Nest-Raven包自述文件中的说明以及 Sentry 提供的TypeScript 集成说明进行操作。

不幸的是，我似乎无法让 Sentry 显示 TypeScript 源映射，只能显示常规 JS 源映射，如下所示：

main.ts我已按照说明初始化了 Sentry

import { NestFactory } from '@nestjs/core';
import { RewriteFrames } from '@sentry/integrations';
import * as Sentry from '@sentry/node';
import { AppModule } from './app.module';

// This allows TypeScript to detect our global value
declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace NodeJS {
    interface Global {
      __rootdir__: string;
    }
  }
}

global.__rootdir__ = __dirname || process.cwd();

async function bootstrap() …

我想从react-native应用程序中读取crashlytics报告，但它在firebase控制台中根本不可读。Android 的崩溃示例如下所示：

Non-fatal Exception: io.invertase.firebase.crashlytics.UnhandledPromiseRejection
Invalid RegExp pattern: Parenthesized expression not closed
.RegExp ((native):0:0)
.anonymous (address at index.android.bundle:1:2065589)
.ue (address at index.android.bundle:1:2070284)
.ce (address at index.android.bundle:1:2069288)
.Be (address at index.android.bundle:1:2080135)

我启用了 Hermes，并且我的签名构建 apkindex.android.bundle以预编译格式 ( build/generated/assets/react/appName/release/index.android.bundle) 和源映射文件生成build/sourcemaps/react/appName/release/index.android.bundle.map。我尝试使用 npm 包读取这些文件source-map-explorer，但不幸的是它总是产生以下错误：

source-map-explorer index.android.bundle index.android.bundle.map 
index.android.bundle
  Your source map refers to generated column 165922 on line 1, but the source only contains 165920 column(s) on that line.
  Check that you are using the correct source map.

1. 我可以将源映射上传到 …