调试 WebPack 生成的代码的方法是什么？

问：

这可能是一个非常幼稚的问题，但我还是会问它。我的背景是，我会在没有 Typescript 和 Webpack 的情况下编写 Chrome 扩展程序。它运行良好，因为我可以将我的确切代码视为背景脚本和内容脚本，因此无论不同上下文之间的通信多么复杂，调试都非常容易。

最近，我看到越来越多的项目使用 Typescript 和 Webpack 来编写 chrome 扩展。在调试这些代码时，我遇到了一个问题，即代码看起来与原始代码有很大不同（当然！），因此，很难实际调试上下文之间发生的任何消息传递。源映射已经启用，我可以在 DevTools 中按名称打开文件，但尽管如此，代码看起来像一堆语句和一些奇怪的外观和函数。我的问题是，你们如何在不发疯的情况下调试此类应用程序？一定有办法，否则人们就不会加入 WebPack 的行列。switch__generator__awaiter

下面是一个示例：

原始代码片段：

  static async getSearchResultsForSavedList(): Promise<Array<ParsedUser>> {
    const source = await waitForPageSource('[class="profile-card-col"]');

    let domProfiles = $(source).find('[class="profile-card-col"]');

    if (!domProfiles?.length) {
      return [];
    }

    const defaultPhoto = browserAPI.getURL('images/user.png');
...

我在 DevTools 中看到的代码：

RecruiterParser.getSearchResultsForSavedList = function () {
        return __awaiter(this, void 0, void 0, function () {
            var source, domProfiles, defaultPhoto;
            var _this = this;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0: return [4 /*yield*/, waitForPageSource('[class="profile-card-col"]')];
                    case 1:
                        source = _a.sent();
                        domProfiles = $(source).find('[class="profile-card-col"]');
                        if (!(domProfiles === null || domProfiles === void 0 ? void 0 : domProfiles.length)) {
                            return [2 /*return*/, []];
                        }
...