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


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

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

經過我一番折騰,終於找到了下面這樣的方法。在sources下,點擊>>  ,有一個overrides的選項卡,他的功能是覆蓋。把本地的代碼覆蓋線上的代碼,當然只是我們本機測試起作用,並不是真正覆蓋。要求是本地的目錄與線上的目錄完全一致,比如線上的top,域名,層層目錄,文件名,要完全一致。

 

本地新建這些目錄,並且把js也新建好,點擊overrides后選中top目錄,就可以真正的實時映射覆蓋了,我們在本地js里修改代碼,會被激活。

 

 

 

 

 

經過這樣的功能,我就解決了之前那個正則驗證的問題。因為在家辦公,不方便上線js代碼,但是用戶又急着想提交數據,他那條數據不符合正則的規則提交不上去。我就把本地代碼的正則先去掉,幫他提交到后端接口,后端的正則里沒有驗證這條規則。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM