标签: source-maps

我正在操纵（这可能是一个动词吗？）一个使用 webpack 构建的应用程序，page.on('error')我收到如下错误：

TypeError: __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_promise___default.a.map is not a function
    at _default.<anonymous> (....../app.js:23858:89)
    at Generator.next (<anonymous>)
    at step (....../app.js:35041:30)
    at ....../app.js:35052:13

有没有办法，如果有的话我怎样才能正确地对这些错误进行源映射？

（我确信我正在生成源映射）

我用的是角度6。

我想在 PROD 中调试应用程序，我需要源映射。当我创建带有源映射的构建时，它会在缩小文件的末尾注入 URL，如下所示

//# sourceMappingURL=app.min.js.map

这使得浏览器调用源映射并且代码在产品中可见。

问题是如何制作源映射但不包含 URL？

我可以使用 gulp 和其他工具作为后期构建来做到这一点，但是有没有任何开箱即用/简单的方法？

我Laravel 5.4与 一起使用Vue.js 2.6。我在控制台中查看*.vue组件文件的 sourceMap 时遇到问题。我使用以下脚本配置 Laravel mix：

let mix = require('laravel-mix');

mix.webpackConfig({
    devtool: 'eval-source-map'
});

mix.js([
        'resources/assets/js/app.js'
    ], 'public/js')
    .sourceMaps()
    .version();

例如我有这样的 vue 组件：

<template>
    <div class="Example" @click="add()">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data(){
            return {
                name: 'John'
            }
        },
        methods:{
            add(){
                console.log('example click')
            }
        }
    };
</script>

但是当 Laravel mix 编译它时，我在 chrome 的源选项卡中看到这样的内容：

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c …

我在学习Vue。最近我发现有一个错误，Visual Studio可以有效阻止调试器在客户端脚本的断点处停止（https://developercommunity.visualstudio.com/content/problem/520247/vue-app-in-vs-2019-cannot -debug-javascript-code.html）。

我发现，正如我在这里写的：在 Visual Studio 2017 中调试 Vue.js 应用程序，按照https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli中的配方，可以克服这个问题是Visual Studio Code通过覆盖Source Map路径来解决的。

让我们考虑以下项目结构：

为了正确解决Source Maps调试问题，我需要以下launch.json文件Visual Studio Code：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Node",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\source\\server\\server.js",
            "preLaunchTask": "build"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/source/client/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*", …

我正在尝试BarbaJS为我的 GitHub 托管网站安装 JS 捆绑程序。使用 CDN，我包含了一行安装 BarbaJS 的代码，但是当我打开网站时，出现源映射错误：

源映射错误：错误：请求失败，状态为 404 资源 URL：https://cdn.jsdelivr.net/npm/@barba/core@2.9.7 源映射 URL：barba.umd.js.map

他们的文档似乎没有提到这个错误。

这是我安装该库的脚本标签：

<script src="https://cdn.jsdelivr.net/npm/@barba/core@2.9.7"></script>

我知道可以使用 chrome、httrack、wget 等下载网站的源代码以及所有资源（css、html、JavaScript...）...

可以用同样的方式下载一个react网站，我想知道是否可以将react webpack源映射转换为jsx。React 开发者工具能够向您展示源代码以及组件状态和上下文。

我有一个来自generator-express-no-stress-typescript模板的Yeoman脚手架项目。我需要对其进行调试，就像使用 Visual Studio Code 进行“逐步执行打字稿代码”一样（不，这对我来说还不够）。console.log()

根据文档我只需要发出

npm run dev:debug

然后附上VSCode。问题是：如果我这样做，VSCode 将无法绑定断点。如果我让调试器在第一个执行行 ( "stopOnEntry": true) 上停止，它将停止在生成的 JavaScript 代码中，而不是源 TypeScript 代码中，并且/但选项卡标题中的文件名以斜体显示“index.ts”（不是 .js） 。

这是dev:debugpackage.json 中的脚本目标：

"dev:debug": "nodemon --exec \"node -r ts-node/register --inspect-brk\" server/index.ts | pino-pretty",

这是我的“附加”配置launch.json：

    {
        "name": "Debug (Attach)",
        "port": 9229,
        "request": "attach",
        "cwd": "${workspaceFolder}",
        "sourceMaps": true,
        "skipFiles": ["<node_internals>/**"],
        "type": "node",
        // "outFiles": ["${workspaceFolder}/dist/**/*.js"],
    },

由于这不起作用，我尝试了其他一些教程，其中一个（我不记得是哪一个）让我将以下配置添加到我的 launch.json 中：

   {
       "name": "Run and debug",
       "program": "${workspaceFolder}/server/index.ts",
       "request": "launch",
       "skipFiles": [
           "<node_internals>/**" …

我正在尝试使用babel进行ESOC和JSX转换以进行mocha测试.

假设我们test.jsx喜欢这样:

var React = require("react");
React.createClass({
  render: function(){
    return (<div>Hello World</div>);
  }
});

Running babel test.jsx给我们提供有效的转换代码.没问题.

我希望如果我创建这样的test.js文件:

require("babel/register");
require("./test.jsx");

然后运行node test.js,它会为我排队我的jsx,但我得到一个错误:

c:\Users\user\dev\app\node_modules\babel\node_modules\babel-core\lib\babel\t
ransformation\file\index.js:628
      throw err;
            ^
Error: c:/Users/user/dev/app/test.jsx: Invalid mapping: {"generated":{"line"
:6,"column":11},"source":"c:/Users/user/dev/app/test.jsx","name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (c:/Users/user/dev/app/node_modules\babel\node_modules\source-map\lib\source-map\source-map-
generator.js:275:15)
    at SourceMapGenerator_addMapping [as addMapping] (c:/Users/user/dev/app/
node_modules\babel\node_modules\source-map\lib\source-map\source-map-generator.j
s:105:14)
    at SourceMap.mark (c:/Users/user/dev/app/node_modules\babel\node_modules
\babel-core\lib\babel\generation\source-map.js:65:9)
    at CodeGenerator.print (c:/Users/user/dev/app/node_modules\babel\node_mo
dules\babel-core\lib\babel\generation\index.js:236:16)
    at NodePrinter.plain (c:/Users/user/dev/app/node_modules\babel\node_modu
les\babel-core\lib\babel\generation\node\printer.js:16:27)
    at CodeGenerator.ReturnStatement (c:/Users/user/dev/app/node_modules\bab
el\node_modules\babel-core\lib\babel\generation\generators\statements.js:120:13)

    at CodeGenerator.print c:/Users/user/dev/app/node_modules\babel\node_mo
dules\babel-core\lib\babel\generation\index.js:238:22)
    at NodePrinter.plain (c:/Users/user/dev/app/node_modules\babel\node_modu
les\babel-core\lib\babel\generation\node\printer.js:16:27)
    at CodeGenerator.printJoin (c:/Users/user/dev/app/node_modules\babel\nod …

我在我的应用程序中使用es6模块,并且在我的chrome检查器中调试时遇到问题.当我在我的代码中执行以下操作时:

import 'widget' from './widget'

class SomeClass {
  componentDidMount(){
    debugger; // widget is not defined here according to chrome console!
    widget.doSomething();
  }
}

查看浏览器正在阅读的已编译源文件,我看到应用于原始js文件的babelify转换已将'widget'变量重命名为'_widget_Js'.但是,我已经编译了JS以及源映射,因此chrome检查器显示原始的JS文件,但是当我引用原始的'widget'变量时它不能识别它(它确实看到'_widget_Js'变量,但是我当然我不想每次调试时都要查找已编译的翻译变量!).

有关如何让chrome识别原始导入名称的任何建议？如果它有帮助,我可以提供有关我的设置的更多信息(gulp + browserify + babelify).谢谢!

出于某种原因,当我尝试使用webpack进行压缩时,我的webdriverio无法找到/ protocol和/ command目录.

它给了我这个错误:

Uncaught Error: ENOENT: no such file or directory, scandir '/protocol'
    at Object.fs.readdirSync (fs.js:871:18)
    at getImplementedCommands (chrome-extension://chldbooigfagkknimlieldoieoahlncn/vendor.npm.js:119349:39)
    at Object.<anonymous> (chrome-extension://chldbooigfagkknimlieldoieoahlncn/vendor.npm.js:80520:66)
    at __webpack_require__ (chrome-extension://chldbooigfagkknimlieldoieoahlncn/manifest.js:51:30)
    at Object.618 (chrome-extension://chldbooigfagkknimlieldoieoahlncn/index.js:1445:20)
    at __webpack_require__ (chrome-extension://chldbooigfagkknimlieldoieoahlncn/manifest.js:51:30)
    at Object.617 (chrome-extension://chldbooigfagkknimlieldoieoahlncn/index.js:1409:16)
    at __webpack_require__ (chrome-extension://chldbooigfagkknimlieldoieoahlncn/manifest.js:51:30)
    at Object.616 (chrome-extension://chldbooigfagkknimlieldoieoahlncn/index.js:1329:14)
    at __webpack_require__ (chrome-extension://chldbooigfagkknimlieldoieoahlncn/manifest.js:51:30)

有问题的代码是:

        var dir = _path2.default.join(__dirname, '..', commandType);
        var files = _fs2.default.readdirSync(dir);

Webpack有两个名为命令和协议的目录,压缩时无法找到它们.

这是我的webpack配置:

module.exports = {
    // common options
    // the grunt-webpack merges the "options" objects with each task config (nested)
    options: {
        stats: {
            timings: …