标签: source-maps

[编辑]这实际上也发生在新创建的准系统 React+Typescript 模板 ViteJS 应用程序上，零修改。在 App.tsx 中放置断点会使 VS Code 调试器启动速度慢得难以忍受。原帖如下：

我正在尝试 ViteJS（也许不再使用react-create-app）。我使用 React Typescript 模板创建了一个准系统 Vite 应用程序。然后我引入了 DC.js、Mapbox 和其他一些库。

事情进展顺利几个小时，然后突然（我不知道我做了什么）启动 VS Code 调试器（pwa-chrome在我的启动配置中使用）开始花费很长时间。也就是说，它立即打开 Chrome，但它位于空白屏幕上，直到我的 VS Code 调试控制台写完以下警告：

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/chunk-YLBYPMLO.js?v=2e2948d4 took longer than 5679.765125 ms so we continued execution without waiting for all the breakpoints for the script to be set.

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/crossfilter2.js?v=2e2948d4 took longer than 1000.451959 ms so we continued execution without waiting for all the breakpoints for the script to …

我目前正在使用我正在构建的Ruby on Rails应用程序中的less-rails gem.我想通过源地图(https://developers.google.com/chrome-developer-tools/docs/css-preprocessors)在Chrome中调试我的Less css文件的方法有谁知道如何实现这一目标？

我创建了一个Github仓库,其中包含与此问题相关的所有源代码.我可以build/index.html在运行后加载浏览器npm install.但是,当我在Chrome中查看"来源"标签时,我看不到与.tsx文件关联的源地图.

这是我看到的截图:

我已经添加sourceMap: true在我tsconfig.json以及debug: true和devtool: "source-map"我webpack.config.json.对我在这里缺少什么的想法？

编辑:

这可能是一个愚蠢的问题,但你必须使用webpack-dev-server才能看到源图吗？

使用Typescript 1.8,Gulp 3.9.0,gulp-sourcemaps 1.6.0和tsconfig.json文件.

很久以前,这一点工作得很好.最近(我无法确定何时),Chrome和Firefox都不会实际使用源图.

我在Chrome上启用了源图,并认识到有一个源图,告诉我在控制台中:

"检测到源映射.应将相关文件添加到文件树中.您可以将这些已解析的源文件调试为常规JavaScript文件.可通过文件树或Ctrl + P获取关联文件."

但是,源文件无法通过任何一种方法获得.

在本地构建上构建文件结构(仅使用Login作为示例):

build
  |- resources
      |- js
         |- app.js
         |- app.js.map
         |- typescript
              |- app.ts
              |- sections
                    |- login
                         |- LoginService.ts
                         |- LoginDirective.ts
                         |- LoginController.ts

但是,Chrome只在文件树中显示:

build
  |- resources
      |- js
         |- app.js

而已.没有Typescript文件夹,没有文件.Ctrl-P也找不到它们.因此,当我调试时,我只能调试已编译的app.js文件,而不是查看Typescript代码.

我的gulp文件相关部分:

var ts = require( 'gulp-typescript' ); // compiles typescript
var tsProject = ts.createProject( 'tsconfig.json' );

gulp.task( 'compile:typescript', function () {
    var tsResult = tsProject
        .src() // …

我想反向或解包bundle.js.目前我正在浏览器中加载bundle.js(Chrome)Chrome检测到源图,并根据捆绑包向我展示了完整应用程序的一个很好的结构.该应用程序使用webpack进行捆绑,是一种助焊剂反应应用程序.

有没有办法从捆绑包中生成所有这些文件,以便我可以根据应用程序结构轻松浏览捆绑包？

这是一个逆向工程项目,用于从现有捆绑包中获取应用程序源.

所以在chrome中我可以使用devtools源很好地浏览整个应用程序.并查看所有单个文件.但我想在我的本地驱动器上创建完全相同的结构.

我试图像一个工具debundle但我不能找到一种方法,将sourcemap添加到这种转换？

因此,如果符合以下条件,我可以轻松地解开现有的bundle.js:

• 源图是可用的
• Chrome可以轻松向我显示结构和单个文件
• 捆绑没有缩小或扰乱.
• Bundle是使用webpack创建的

当我的 React 17 应用程序出现错误时，Chrome 开发者控制台会显示块文件路径的错误，而不是包含有错误的组件的实际源文件。是否可以显示真实的文件路径而不是块？我已经检查过，所有文件都有为它们生成的源映射。

样本错误

index.js:1 Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted \xe2\x80\x94 the behavior is unsupported and could change in a future version.\n    at tr\n    at http://localhost:3000/static/js/vendors~main.chunk.js:1363:73\n    at TableRow (http://localhost:3000/static/js/vendors~main.chunk.js:42348:84)\n    at thead\n    at http://localhost:3000/static/js/vendors~main.chunk.js:1363:73\n    at TableHead (http://localhost:3000/static/js/vendors~main.chunk.js:41463:84)\n    at HeadTable (http://localhost:3000/static/js/4.chunk.js:504:21)\n    at table\n    ......\n\n

期望结果的样本

index.js:1 Warning: Encountered two children …