-
使用Snippets來輔助Debuggin步驟:
1)添加文件
2)添加代碼JQ庫
3)運行
4)切換Networ
5)到Source添加代碼
查看全部 -
Sources源代碼資源面板:
page:所有頁面相關靜態資源
展示代碼面板:{}格式化代碼
查看全部 -
斷點調試代碼Debugging
傳統的console.log()或alert()打印運行時信息調試
需要在源代碼和執行頁面中切換執行.步驟繁瑣不方便
JS斷點調試
1)代碼加 debugger:內置斷點語句
1??恢復腳本執行2??跳過下一個函數的執行3??進入下一個函數的執行4??跳出函數5??單步執行
2)1??調用的棧2??斷點3??異步請求斷點4??DOM斷點5??事件監聽斷點
? ? ? ? ? ?
3)代碼行數點擊斷點
Scope:展示當前作用域下的值:
運行時變量調試,修改源代碼臨時保存調試
直接在源代碼區域中編輯代碼,保存
查看全部 -
在Console中調試log信息:
?console.log:打印普通log日志信息;
console.warn:打印警告信息
console.error:打印錯誤信息
console.table:打印表格信息
console.qroup+console.info+console.grounpEnd:打印信息組
console.log("%c這里展示定時的樣式",styles)console Custom定制樣式
cause 404:Network網絡請求錯誤展示
console.assert(false,'斷言'):斷言類似于try catch語句
console.time():+console.函數名(參數)+console.timeEnd() :檢測代碼片段執行時間
查看全部 -
使用Console調試JsvaScript:
1、運行JavaScript代碼,交互式編程(Shift+回車不會執行,繼續寫代碼)
document.cookie:查詢cookie信息
document.querySelectorAll('img'):查詢元素信息
運行JS測試等
2、查看程序中打印的log日志
3、斷點調試代碼Debugging
查看全部 -
實時編輯CSS(3)以及動畫效果
推薦網站:animation.com
查看全部 -
在DOM中斷點調試:
屬性修改時打斷點:break on -> attribute modifications
節點刪除時打斷點:break on -> node removal
子樹修改時打斷點:break on -> subtree modifications
查看全部 -
在Console中訪問節點:
使用document.querySelectAll訪問
使用$0快速訪問選中的元素
拷貝 -> JS Path
查看全部 -
實時編輯HTMl和DOM節點:
編輯內容
編輯屬性Attributes
修改元素類型
調整DOM節點順序
像編輯器一樣編輯HTML代碼
隱藏/刪除/增加/拷貝節點
查看全部 -
打開工具:
查看全部 -
9大功能面板:
1、Elements元素面板:檢查和調整頁面,調試DOM,調試CSS
2、Network網絡面板:調試請求,了解頁面靜態資源分布,頁面性能檢測
3、Console控制臺面板:調試javascript,查看console log日志,交互式代碼調試
4、Sources源代碼資源面板:調試javascript頁面源代碼,進行斷點調試代碼(利于解決Bug)
5、Application應用面板:查看&調試客戶端存儲,如cookie,localStorage,sessionStroage等
6、Performmance性能面板:查看網頁性能細節,細粒度對網頁載入進行性能優化(高階)
7、Memory內存面板:javascript CPU分析器,內存堆分析器(高階)
8、Security安全面板:查看也嗎安全及證書問題
9、Audits面板:使用Google Lighthouse輔助性能分析,給出優化建議(高階)
查看全部 -
Chrome DecTools開發人員工具
查看全部 -
頁面加載性能
network-waterfall網頁性能分析
JS壓縮混淆
圖片使用懶加載
查看全部 -
前端
后端響應等待時間
網頁性能優化，使用工具代理頁面請求數據
查看全部 -
動畫效果網站：
Animate.css
查看全部
舉報