[javascript] 利用chrome的overrides實時調試線上js

chrome的開發者工具，在source選項卡下，能夠看到js的源代碼，有一個斷點調試功能，就是在js的源代碼行號那裏點擊一下，出現一個箭頭，當再次刷新頁面而且進行了相應操做時，就會停在斷點的地方。咱們能夠查看相應的變量值，在右側能夠手動改變變量值，進行調試。

這個地方有一個缺點，就是沒有辦法對代碼表達式等進行手動修改，修改完再去運行調試。若是咱們在編輯窗口更改了js，他並不能真正的做用於線上代碼。你保存了也沒有任何效果，你刷新了頁面，直接就沒有了，沒有辦法像css的調試那樣，能夠徹底實時修改代碼和查看效果。

通過我一番折騰，終於找到了下面這樣的方法。在sources下，點擊>>  ，有一個overrides的選項卡，他的功能是覆蓋。把本地的代碼覆蓋線上的代碼，固然只是咱們本機測試起做用，並非真正覆蓋。要求是本地的目錄與線上的目錄徹底一致，好比線上的top，域名，層層目錄，文件名，要徹底一致。

 

本地新建這些目錄，而且把js也新建好，點擊overrides後選中top目錄，就能夠真正的實時映射覆蓋了，咱們在本地js裏修改代碼，會被激活。

 

 

 

 

 

通過這樣的功能，我就解決了以前那個正則驗證的問題。由於在家辦公，不方便上線js代碼，可是用戶又急着想提交數據，他那條數據不符合正則的規則提交不上去。我就把本地代碼的正則先去掉，幫他提交到後端接口，後端的正則裏沒有驗證這條規則。