前端如何在本地修改线上代码
前言
公司所用框架为laravel,所以以下方案主要针对前后端不分离的场景
但也能用在vue中解决线上bug（主要没有那么的无缝衔接）
在工作中遇到这样一个场景，由于公司人少，测试以及正式环境共用一个数据库。
在开发新项目后，为了减少部署成本依然使用正式数据库。
本地的代码也统一通过ftp发送到服务器的方式来进行开发。
这样就导致每次修改文件都要确保文件已上传完毕后再刷新页面才能看到效果。
虽然比较难受但一个人的时候也勉强能用。但在多人开发的情况下又会有一个新问题，上传文件就可能出现相互覆盖的情况（真让人头大）
为了提高开发速度（为了代码写的爽一些）我开始研究一些方案
为了方便大家能够直接使用，就直接上方案了
方案
1. 打开chrome 开发者工具
2. 选择 sources 之后选择overflow页签
3. 右键选择add folder to workspace选择css所在的文件夹
这里主要是存放本地css文件的地方，为了配合后续功能，最好选择在当前项目的public目录下
4. 切换到network 找到对应的css文件请求
5. 右键选择save for overrides
接下来之前选择的文件夹下就会生成名称为当前域名的目录，并在请求地址对应的目录下生成css文件。至此只需要修改该文件夹下的css文件就会立马生效在当前页面上。
6. 接下来的方法就是如何将项目下的scss文件和生成的css文件关联起来。
7.使用sass编译命令： sass -I resources/sass --watch resources/sass:public/v2/static/[你的网站域名]/v2/static/css
这个命令的目的就是监听资源文件夹下的scss文件并且编译到指定目录下（编译后保留目录结构）
这里的 -I 参数作用是指定import时文件的根目录,例如：
@import 'mixin.scss';是不能直接识别的。它存在于resources/sass目录下
这种方案也同样适用于在本地没有开发环境的情况下调试线上css代码
虽然没有测试，但js+babel应该也可以用这种方式调试
后记
在使用vue的时候又碰到了一个线上问题。大体功能就是一个vue组件中嵌套了一个iframe，当iframe中的swiper翻页时vue组件中的一个数据要一起变动。
由于跨域的原因，这个功能只能在线上调试。但当我加上console.log编译到线上后，打印却没出来（em...后来我反应过来是因为build的webpack配置会去除掉console.log）
机智（zhi zhang）的我马上想到可以在本地修改线上代码，果断加了一段代码(主要是为了在代码搜索的时候能很快找到我要修改的地方)
setTimeOut(() => { parseInt('1106') }, 1234)然后我就在开发者工具的network里搜索哪段js中有
1234和1106再使用上面提到的本地编译线上代码的方法对js进行调试
最终定位发现webpack对我的代码作出了如下修改
原代码
const pagenum = e.prenext.swiper.realIndex + 1 + '/' + e.prenext.pagesData.length; console.log('pagenum=' , pagenum)编译后代码
e.prenext.swiper.realIndex, e.prenext.pagesData.length因为线上使用的是我本地的js代码，于是只要本地js代码能跑通，直接复制到vue组件里就搞定的这个bug
