一般情况下线上出现bug我们常用的定位方式就是启动本地开发环境，在本地调试，但是由于开发环境和线上的环境数据还是有差距，偶尔会遇到本地复现不了的情况。这个时候就比较棘手，我们可以在线上代码里debug打断点一步步看变量,一般的简单的bug用这种方式可以处理。但是想看看复杂的业务状态下的页面展示，就没法满足，比如我要看的一个状态是接口给的，但是线上环境又不能随便改状态，这时候心里想如果能在线上直接调试代码修改返回的状态就好了！现在他来，接下来介绍两种直接在线上调试方法。

谷歌调试工具非常强大，有很多好用的功能等着我们去发现。谷歌浏览器中有个功能可以满足我们本次的直接调试的需求。

1.在本地新建一个名叫 “top” 文件夹 ；

2.打开需要调试的网站 ，点开 【soucres】 - 【overrides】 - 【select folder for overrides 】- 选择本地新建的 "top"文件夹

3.点开 【sources】-【 page】找到需要修改的文件，ctrl+s 保存 这个时候 文件的名字前会出现一个紫色的小点，chrome会将js 按照 浏览器中的文件路径，保存在 本地的“top”文件夹中

4.直接在浏览器中 编辑文件保存，刷新页面，修改生效

前面数的谷歌浏览器调试虽好，但是遇到移动端调试就没办法了。这个时候就可以使用我们的fidder来做请求拦截，fidder 也是前端常用的抓包工具，功能也是非常强大。

fidder功能模块中一个 autoResponder 模块可以满足我们本地的需求。

1.打开fidder，打开目标页面，在左侧请求列表中找到需要调试的js，把它拖动到右侧的autoResponder面板中。

2.将请求内容保存到本地一份

3.设置下方匹配规则，选择本地文件

选择后修改本地文件，刷新页面，修改生效，这样就可以快速高效的定位线上的bug了！