前端线上调试

记得要微笑

1、fiddler

Fiddler是一款HTTP协议调试代理工具,它能够抓取记录本机所有HTTP(S)请求,通过设置断点等方法我们可以任意修改进出Fiddler的数据(cookie,html,js,css)完成测试。其原理如下图,我们仅需要修改Proxy中收到的数据就可以模拟客户端和服务器的交互,完成一系列Mock测试。

当我们需要测试线上产品时,我们可以用本地文件替代请求返回数据。例如:当http://127.0.0.1:8080返回index.html文件数据,Fiddler会对http://127.0.0.1:8080进行拦截,然后用本地index.html替换response。之后就可以在控制台替换文件上打断点进行调试了。

Snipaste_2020-03-29_15-25-08.png

image.png

原始页面
image.png

替换后的页面
image.png

但是,当前端项目经过webpack或者gulp等打包工具编译后,代码被合并压缩了,无法使用上述方式准确替换response。当然,解决办法还是有的,请继续往下看。。。

参考:
https://juejin.im/entry/586b3...

2、source-map

线上产品代码一般是编译过的,前端的编译处理过程包括不限于

  • 转译器/Transpilers (Babel, Traceur)
  • 编译器/Compilers (Closure Compiler, TypeScript, CoffeeScript, Dart)
  • 压缩/Minifiers (UglifyJS)

这里提及的都是可生成Source Map的操作。

经过这一系列骚气的操作后,发布到线上的代码已经面目全非,对带宽友好了,但对开发者调试并不友好。于是就有了Source Map。顾名思义,他是源码的映射,可以将压缩后的代码再对应回未压缩的源码。使得我们在调试线上产品时,就好像在调试开发环境的代码。

2.1、开启chrome浏览器支持source map配置

image.png

image.png

2.2、webpack生成source map

devtool: 'source-map' //增加映射文件,可以帮我们调试代码
devtool: 'eval-source-map', //不会产生新的文件
devtool: 'cheap-module-source-map', //不会产生列,但是是一个单独的映射  
devtool: 'cheap-module-eval-source-map' //不会产生新的文件,集成在打包后的文件里

没有生成source map是这样子的
image.png

生成source map
image.png

虽然source map这一功能方便我们线上调试,但是问题也就出来了,生成source map的项目部署到线上后用户也能看到源文件,这样肯定是不行的,难道每次线上调试完没问题了就关闭webpack source map再打包部署一版吗?是不是很麻烦?

参考:
https://juejin.im/entry/5bbff...
https://www.jianshu.com/p/2fd...

阅读 5k
avatar
记得要微笑
前端工程师

求上而得中,求中而得下,求下而不得

1.6k 声望
4.4k 粉丝
0 条评论
avatar
记得要微笑
前端工程师

求上而得中,求中而得下,求下而不得

1.6k 声望
4.4k 粉丝
文章目录
宣传栏