附上資料
- https://developers.google.cn/web/tools/chrome-devtools/ 谷歌官方開發者工具文檔
- https://developer.mozilla.org/zh-CN/docs/Tools 火狐官方開發者工具文檔
- https://developer.mozilla.org/zh-CN/ 火狐開發者文檔庫
- https://developers.google.cn/web/ 谷歌開發者文檔庫
- https://developer.mozilla.org/zh-CN/docs/Web/Performance MDN 文檔-WEB性能優化
- https://developers.google.cn/web/tools/chrome-devtools/network/understanding-resource-timing 谷歌文檔-Network 資源耗時分析
- 簡單講解版 https://www.cnblogs.com/charliechu/archive/2016/10.html
推薦先看文章
Ps. 控制台鍵入 location.reload(true) 可以把修改后的JS環境重新加載。比如在控制台/Sources 界面修改了什么，這時候重新加載一下，這些修改就有效了
推薦使用 Firefox 開發者版，專為開發者打造，工具更好用：https://www.mozilla.org/en-US/firefox/developer/
如何打開
- F12
- (Firefox)菜單->Web開發者->切換工具箱
- (Chrome)菜單->更多工具->開發者工具
如何使用
調整開發者工具窗口位置：點該窗口右上角的 ··· ，然后就選擇停靠於下側（Dock to bottom）
查看並調試 JavaScript 代碼
調試器(Debugger)
雖然點開一個js，
格式化代碼：然后點下面的{}美化源代碼（Pretty Print）
斷點：右擊代碼行號，添加斷點(Add Breakpoint)
網絡抓包
Firefox 點“網絡(NetWork)”，點擊“啟用性能分析(Start Performance Analysis)”，然后F5刷新就開始記錄了
Chrome 點“網絡(NetWork)”，點擊"Record network log "，按F5刷新開始記錄
然后隨便點一個文件，可以看到 Request/Response 等信息
性能分析
Performance -> Start profiling and refresh the page(Ctrl+Shift+E)
查看報文頭(Firefox 開發者版本)
點擊 Edit and Resend 按鈕后的效果
Ps. 強大的 Edge dev版用的是 Chromium 內核，內存占用低而且流暢，建議日常使用
教你如何刪除瀏覽器事件（破解粘貼限制）
選中輸入框元素，然后在事件偵聽器界面刪除 paste 事件即可。
舊版 讓谷歌瀏覽器（chrome）保存調試代碼workspace
新版 點擊Override(替換)，添加本地替換文件夾（作為本地工作區使用）。右擊網頁的js文件添加到替換文件夾（Save for Override）