一般情況下線上出現bug我們常用的定位方式就是啟動本地開發環境，在本地調試，但是由于開發環境和線上的環境數據還是有差距，偶爾會遇到本地復現不了的情況。這個時候就比較棘手，我們可以在線上代碼里debug打斷點一步步看變量,一般的簡單的bug用這種方式可以處理。但是想看看復雜的業務狀態下的頁面展示，就沒法滿足，比如我要看的一個狀態是接口給的，但是線上環境又不能隨便改狀態，這時候心里想如果能在線上直接調試代碼修改返回的狀態就好了！現在他來，接下來介紹兩種直接在線上調試方法。

1.chrome tools

谷歌調試工具非常強大，有很多好用的功能等著我們去發現。谷歌瀏覽器中有個功能可以滿足我們本次的直接調試的需求。

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

2.打開需要調試的網站 ，點開 【soucres】 - 【overrides】 - 【select folder for overrides 】- 選擇本地新建的 "top"文件夾

3.點開 【sources】-【 page】找到需要修改的文件，ctrl+s 保存 這個時候 文件的名字前會出現一個紫色的小點，chrome會將js 按照 瀏覽器中的文件路徑，保存在 本地的“top”文件夾中

?

4.直接在瀏覽器中 編輯文件保存，刷新頁面，修改生效

2.fidder 調試

前面數的谷歌瀏覽器調試雖好，但是遇到移動端調試就沒辦法了。這個時候就可以使用我們的fidder來做請求攔截，fidder 也是前端常用的抓包工具，功能也是非常強大。

fidder功能模塊中一個 autoResponder 模塊可以滿足我們本地的需求。

1.打開fidder，打開目標頁面，在左側請求列表中找到需要調試的js，把它拖動到右側的autoResponder面板中。

2.將請求內容保存到本地一份

3.設置下方匹配規則，選擇本地文件

選擇后修改本地文件，刷新頁面，修改生效，這樣就可以快速高效的定位線上的bug了！

總結

以上是生活随笔為你收集整理的线上bug快速定位小技巧 - chrome实时调试线上js代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。