解决生产环境js无法调试问题
Posted petewell
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了解决生产环境js无法调试问题相关的知识，希望对你有一定的参考价值。
demo：https://github.com/chenchunyong/source-map-demo.git
背景
前端开发中，开发环境与生产环境的代码往往不一致，生产环境的代码通过构建工具进行合并，混淆，压缩等操作。不过通过构建工具生成的js代码可读性差，不利于维护、排查问题。
解决方案
首先，通过构建工具生成两个生产js文件，如下:
- 所有用户可见js，比如bundle.js
- 特定用户js，排查问题用，此js文件会加入sourcemap引用，比如说bundle.debug.js
然后，根据用户输入的url是否包含sourcemap参数，来判断是否启动sourcemap调试功能。比如如果包含sourcemap参数，则引入bundle.debug.js，否则引入bundle.js。
使用
克隆
1
git clone https://github.com/chenchunyong/source-map-demo.git
进入source-map-demo目录，安装
1
npm install
打包js文件
1
npm run bundle
启动
1
npm start
输入http://localhost:3000 或者http://localhost:3000?sourcemap=true 查看效果。
效果对比
以上是关于解决生产环境js无法调试问题的主要内容，如果未能解决你的问题，请参考以下文章
Python 自动化 - 浏览器chrome打开F12开发者工具自动Paused in debugger调试导致无法查看网站资源问题原因及解决方法，javascript反调试问题处理实例演示(代码片段
使用Idea工具 在本地代码上远程调试 生产或测试环境的代码
使用Idea工具 在本地代码上远程调试 生产或测试环境的代码