2020.6.17 今天是每日时报陪伴您的第 350 天

[文章] 前端代码异常监控实战：https://github.com/happylindz/blog/issues/5 (opens new window)

[文章] 深入浅出 Webpack sideEffects 属性：https://github.com/happylindz/blog/issues/15 (opens new window)

[文章] 解读新一代 Web 性能体验和质量指标：https://juejin.im/post/5ecc5521e51d45788e17dcc6 (opens new window)

[类库] TraceKit 可以在所有主流浏览器中捕获异常信息，还兼容 IE：https://github.com/csnover/TraceKit/ (opens new window)

[类库] 生成 Source Map 相信大家已经很了解了；但是如果想在 Web 站点，就能发现 Source Map 的信息，可能需要这个库来解决了：https://github.com/mozilla/source-map (opens new window)

示例 - Source Map

const rawSourceMap = {
  version: 3,
  file: "min.js",
  names: ["bar", "baz", "n"],
  sources: ["one.js", "two.js"],
  sourceRoot: "http://example.com/www/js/",
  mappings:
    "CAAC,IAAI,IAAM,SAAUA,GAClB,OAAOC,IAAID;CCDb,IAAI,IAAM,SAAUE,GAClB,OAAOA"
};

const whatever = await SourceMapConsumer.with(rawSourceMap, null, consumer => {
  console.log(consumer.sources);
  // [ 'http://example.com/www/js/one.js',
  //   'http://example.com/www/js/two.js' ]

  console.log(
    consumer.originalPositionFor({
      line: 2,
      column: 28
    })
  );
  // { source: 'http://example.com/www/js/two.js',
  //   line: 2,
  //   column: 10,
  //   name: 'n' }

  console.log(
    consumer.generatedPositionFor({
      source: "http://example.com/www/js/two.js",
      line: 2,
      column: 10
    })
  );
  // { line: 2, column: 28 }

  consumer.eachMapping(function(m) {
    // ...
  });

  return computeWhatever();
});