javascript - 在 Visual Studio 2015 中调试捆绑的 javascript

Question

我使用带有这个简单配置文件的 WebPack 来捆绑我的应用程序。

var path = require('path');

module.exports = {
    debug: true,
    devtool: 'source-map',

    context: path.join(__dirname, 'js'),
    entry: './main.js',
    output: {
        path: path.join(__dirname, 'Built'),
        filename: '[name].bundle.js'
    }
};

这会创建源映射，我可以轻松地使用它在所有流行的浏览器中调试我的原始 javascript 文件。但是，在 Visual Studio 中设置断点并运行项目不起作用，断点被禁用，提示“没有为该文档加载任何符号”。我正在通过 IE11 进行调试，Visual Studio 可以立即在其中调试简单的 javascript，但是在捆绑之后这不再起作用。

有迹象表明源映射有效，因为我在控制台输出中得到 Unsupported format of the sourcemap。上面生成的 using 配置的 sourcemap 看起来像这样

{"version":3,"sources":["webpack:///webpack/bootstrap 2919a5f916c286b8e21a","webpack:///./main.js","webpack:///./structure_editor/content.js","webpack:///./structure_editor/test_bundle.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;ACtCA;AACA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;;;;;;;ACVA,8C;;;;;;ACAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,6B","file":"main.bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 2919a5f916c286b8e21a\n **/","document.write(require(\"./structure_editor/content.js\"));\r\nvar TestBundle = require(\"./structure_editor/test_bundle.js\");\r\n\r\nvar test = new TestBundle();\r\ntest.testMe();\r\n\r\n//var StructureEditor = require(\"./structure_editor/structure_editor.js\");\r\n\r\n//var editor = new StructureEditor(0x00FF00);\r\n\r\n//editor.run();\r\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./main.js\n ** module id = 0\n ** module chunks = 0\n **/","module.exports = \"It works from content.js.\";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./structure_editor/content.js\n ** module id = 1\n ** module chunks = 0\n **/","var TestBundle = function () {\r\n    \r\n}\r\n\r\nTestBundle.prototype.testMe = function() {\r\n    var a = 10;\r\n    var b = 12;\r\n    var c = a + b;\r\n    document.write(c);\r\n};\r\n\r\nmodule.exports = TestBundle;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./structure_editor/test_bundle.js\n ** module id = 2\n ** module chunks = 0\n **/"],"sourceRoot":""}

所以我可以理解这种格式可能因为 webpack://而不受支持(尽管 IE 确实可以理解)。但是，如果我知道 VS 的正确格式是什么样子，我也许可以调整 webpack 以生成这种格式。

我正在寻求任何想法、教程，.. 任何让这个工作正常的东西。

Answer 1

我没有解决问题的完整方法，但我确实缩小了范围。

首先要确保源映射和原始文件的路径对 Visual Studio 可用。我发现其中一些请求正在获取登录页面作为响应。我授予匿名访问 map 和 ts 文件的权限。我确实尝试过为适用于 Visual Studio 的 ts 文件使用绝对文件系统路径，但浏览器似乎对此并不满意。

据我了解，以下是配置 SourceMapDevToolPlugin 插件的快捷方式。直接转到插件将使您能够更好地控制生成的源映射。

devtool: 'source-map'

这意味着用类似下面的内容替换上面的行。

config.plugins.push(new webpack.SourceMapDevToolPlugin({
    filename: '[file].map',
    moduleFilenameTemplate: "[resource-path]",
    fallbackModuleFilenameTemplate: "[resource-path]?[hash]"
}));

请注意 [absolute-resource-path] 宏，它会生成文件系统路径，Visual Studio 可以使用这些路径访问文件，而无需通过网站加载文件。这些在 sources 属性中输出，反斜杠用第二个反斜杠转义(例如 C:\Projects\...)。正如我上面提到的，这会破坏浏览器中的调试。

此外，[resource-path] 宏似乎在调试期间被解析，就好像它与包含源映射的文件夹相关。这对我的设置不正确。我添加了一个前缀并使用了类似于下面的东西来解决这个问题。

"../../app/[resource-path]"

下一个问题是映射属性(在 map 文件中)中某些行的最后一段。这explanation of the source map format在这里非常有帮助，但几乎所有你需要知道的是分号分隔行，每行可以有多个用逗号分隔的段。这些片段可以编码以下信息。

• 生成列
• 出现在的原始文件
• 原始行号
• 原创专栏
• 如果有原名。

我发现如果我从 Visual Studio 可以处理 map 的行尾删除任何短段，我可以在原始文件中设置断点等(Typescript 文件被转换为 javascript 然后在我的案例中被捆绑).

为了删除短片段，我在 Visual Studio 中对每个 map 文件使用了以下手动过程。请注意，我发现在通过右键单击文档正文并从上下文菜单中选择格式文档来格式化文件后，更容易解释这些文件。

• 在启用正则表达式的情况下执行替换操作。在查找字段中使用以下表达式并将 $1 作为要替换的值。

  ,\s*[^\s\";]{1,3}?(;|\")

这将替换行尾仅包含 1、2 或 3 个字符的任何段。

有可能在行尾设置断点会出现问题，但我至今没能断掉。我确实注意到，当调试器中出现导致执行停止的错误时，这些行并不总是匹配 - 可能是这种操作的结果？

我还编写了一个小型控制台应用程序，它将对给定文件夹中的所有 map 文件执行此修改。我在构建结束时自动运行它。

    static void Main(string[] args)
    {
        var sourceMapFolder = new DirectoryInfo(args[0]);

        foreach (var sourceMapFile in sourceMapFolder.EnumerateFiles("*.map"))
        {
            var sourceMapFilePath = sourceMapFile.FullName;

            var regex = new Regex(",\\s*[^\\s\\\";]{1,3}?(;|\\\")");

            var oldContent = File.ReadAllText(sourceMapFilePath);

            var newContent = regex.Replace(oldContent, "$1");

            File.WriteAllText(sourceMapFilePath, newContent);
        }
    }

我不确定是 Webpack 不应生成分段，还是 Visual Studio 应处理分段。

更新:我创建了一个 Bug在涵盖此问题的 Visual Studio Connect 网站上。