调试-优化-错误定位之-sourceMap的小小认识

Yogic
739 阅读2分钟

背景： 线上js和css代码是压缩混淆的，对于优化和调试错位定位比较困难，sourcemap就是解决这一问题的一种方案

你所要了解的一些细节：

  • 关于 sourceMap的详细说明：www.ruanyifeng.com/blog/2013/0…
  • 两个场景（开发时调试源码，生产时定位错误的源码位置）下会用到 sourcemap ===>>> 开发时会使用 sourcemap 来调试，但是生产可不会【出于安全考虑，线上环境是不携带sourcemap文件的】，但是线上报错的时候确实也需要定位到源码，这种情况一般都是单独上传 sourcemap 到错误收集平台【比如sentry】

1、浏览器sourceMap选项如何开启和关闭？

  • 点击开发者工具面板的设置图标

image.png

  • 勾选或者去掉勾选Enable Javascript source maps、 css source maps

image.png

2、chrome调试关联本地sourceMap文件，如何导入如何使用？

  1. 打开Chrome - dev-tool - Sources
  2. 选中被混淆的代码，或者通过控制台的链接打开被混淆的代码

image.png 3. 右键 - Add source map

image.png 4. 填入地址（把map文件存入到本地，然后通过Add按钮添加上去）

image.png 5. 添加后Sources左侧栏出现源码

image.png

  1. 回到控制台发现已经映射到源码了

image.png

3、本地sourceMap文件的如何使用？

  1. 安装 npm install source-map
  2. 新建 sourcemap.js 文件
const { SourceMapConsumer } = require('source-map')
   const fs = require('fs')
 
   // map文件地址【打包后能拿到】
   const rawSourceMap = fs.readFileSync('./dist/js/app.dde017e5.js.map', 'utf-8')
 
 
   // 填入错误信息【浏览器里报错的信息里截取】
   originalPositionFor('app.dde017e5.js:1:11871')
 
 
   function originalPositionFor(errInfo) {
     const [budleName, line, column] = errInfo.split(':')
 
 
     SourceMapConsumer.with(rawSourceMap, null, (consumer) => {
       const originalPosition = consumer.originalPositionFor({
         line: parseInt(line),
         column: parseInt(column),
       })
 
 
       console.log('bundle name = ', budleName)
       console.log('original position = ', originalPosition)
     })
  1. 执行 【node sourcemap.js 】，效果如下

image.png

image.png

4、使用场景

  1. 某些情况下生产环境的代码会做变量名替换，这就导致当我们打断点的时候无法拿到对应的变量的值；有时候压缩和混合后的代码，在浏览器直接定位错位点的时候，已经失真，定位也是比较困难的，那怎么办呢？
    • 这个时候我们可以试着关闭SourceMap，这样我们看到的是替换后的变量名，这时候就可以看到运行时的变量的值了。同时呢，通过压缩后的文件里的出错处的某些特殊字符，有时候也能协助我们快速找到错误源码的位置
    • 当时我们利用报错的行列号信息，在本地利用工具配合sourcemap文件，也是能快速定位源码中的错误位置
    • 有时候我们甚至可以，将sourcemap文件上传到浏览器，直接在浏览器中定位错误位置【出于安全考虑，线上环境是不携带sourcemap文件的，同时我们要我们应该减少使用将sourcemap文件传递到浏览器的行为】
avatar
文章
阅读
粉丝