web除錯有幾個非常頻繁的剛需:看log、看error、看ajax發包與回包。其他的如timeline和cookie以及localstorage就不是那麼頻繁,但是alloylever都支援。如你所見:
可以通過npm安裝:
npm install alloylever
你的頁面只需要引用乙個js即可!
但是需要注意的是,該js必須引用在其他指令碼之前。至於為什麼,看下面的原理。
window.console = ;
var self = this;
['log', 'error', 'warn', 'debug', 'info'].foreach(function (item)
});
重寫了console方法,並且儲存下window下真正的方法進行執行,並且注入自己的事件。
如上面所示,重寫了xmlhttprequest物件。使用者new的物件全部為重寫後的,返回的是真正的。這樣就可以拿到所有使用者建立的xmlhttprequest物件的例項進行監聽。
其中error包含兩部分,第一部分是js報的錯誤,通過下面的方式截獲:
window.onerror = function (errormsg, url, linenumber, column, errorobj)
這裡執行的時候console已經被重寫了。所以自己的console面板也能看到錯誤。
第二部分是資源載入失敗報的錯,通過遍歷html dom節點拿到所有的 js/css/img,然後再次傳送請求。js和css通過xmlhttprequest發請求,監聽狀態。,img通過new image(),監聽onerror。具體**參見:
timeline通過timing.js獲得所有資訊,timing.js基於window.performance封裝的類庫。cookie和localstorage通過js遍歷得到。
github:
issues: /issues
歡迎試用反饋。
移動端除錯工具weinre
npm install g weinre 先全域性安裝,然後使用的時候通過如下命令啟動 10.2.54.11 是我的本機ip,埠可以自主設定,當然也可以不寫,預設8080。此時電腦端可以直接通過 訪問到weinre的主頁面,這個針對移動裝置除錯比較方便,當然對電腦端訪問的頁面也可以訪問,不過本身瀏覽...
Vue開發與除錯工具
vscode visual studio code windows版本的安裝就很簡單了,傻瓜式安裝,之後去快捷鍵 在當前行中間換行到下一行 ctrl enter 當游標點選到某一行時,預設選中全行,可以直接複製剪下 直接刪除某一行 shift delete或者ctrl shift k 多行游標選擇 ...
除錯工具 之Python除錯工具pycharm
1 pycharm的安裝 pycharm是一款非常好用的python ide,提供專業版和社群版,就像eclipse和myeclipse一樣,專業版是收費的,而社群版是免費的但功能就沒有專業版的功能強大。1.2 安裝 這裡就不必細說,直接next就ok ps 安裝完成後一定要執行 1.3 破解 採用...