Ionic 3 PWA 应用程序断点和浏览器中的源代码搞砸了

Question

我无法将断点放在正确的位置，因为它似乎在浏览器中显示了旧版本的源代码。

如何强制它在浏览器中更新源代码？

Answer 1

在开发过程中，最好利用 chrome devtools > application tab > service worker 部分。基本上你可以设置 "bypass" service worker 缓存和其他设置来帮助你使用最新的：

另一种方法是将您的缓存策略从默认策略修改为 "network first":

在你的 service worker 中做：

// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.networkFirst);

// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;

Answer 2

已解决。好像是装饰器占用多行造成的，像这样：

@IonicPage({
    name: 'my-page',
    segment: 'my-page/:id',
    defaultHistory: ['my-other-page']
})
@Component({
    selector: 'my-page',
    templateUrl: 'my-page-cotacao.html',
    providers: [BrMaskerIonic3]
})

解决方案是在一行中设置每个装饰器，如下所示：

@IonicPage({ name: 'my-page', segment: 'my-page/:id',    defaultHistory: ['my-other-page'] })
@Component({ selector: 'my-page', templateUrl: 'my-page.html', providers: [BrMaskerIonic3] })

Ionic 3 PWA 应用程序断点和浏览器中的源代码搞砸了

Ionic 3 PWA app breakpoints and source code in the browser are messed up

browser

breakpoints

source-maps

ionic-framework