-
1.conso.log()
2.debugger
3.恢復腳本執行、跳過下一個函數的執行、進入到下一個函數的執行、跳出函數、單步執行
4.調用的棧、斷點、異步請求的斷點、DOM斷點、global listeners、事件監聽斷點
5.打斷點
6.addend1和addend2都是string類型
查看全部 -
1.console.log? 打印信息
2.console.warn? 告警信息
3.console.error? 打印錯誤信息
4.console.table? 打印json格式的數據信息，表格
5.console.group+console.info+console.grounpEnd? 打印信息組
6.console.log("%c這里展示定時的樣式",styles)? console Custom定制樣式
7.cause 404? ?Network網絡請求錯誤展示
8.console.assert(false,'斷言')? ?斷言類似于try catch語句
9.console.time() +函數名(參數) + console.timeEnd()? 檢測代碼片段執行時間
查看全部 -
ctrl shift p Show Sensors
查看全部 -
?Snippets 注入jquery
查看全部 -
?Snippets 注入jquery
查看全部 -
快捷鍵
查看全部 -
工欲善其事必先利其器
查看全部 -
集成 Vue 插件
1、擴展程序安裝Vue
2、打開開發工具使用Vue
查看全部 -
?集成 React 插件
1、安裝擴展程序react
2、打開開發工具使用react(基于組件開發方便)
查看全部 -
使用 Chrome DevTools 進行 H5 頁面開發
1、菜單簡介:
1??模擬手機外殼2??顯示media queries3??顯示尺寸Px4??設備比例5??添加/移除設備類型(mobile)6??截圖
2、模擬橫、豎或其他情況的設備
1):在?More Tools?菜單下，點擊?Sensors
2)sensors面板設置
3、network網絡狀況
1)在?More Tools?菜單下，點擊?network conditions
2)?network conditions面板
查看全部 -
模擬移動設備
點擊工具:
切換設備模擬:
查看全部 -
?查看與調試 LocalStorage 與 SessionStorage
1、LoalStorage(永久存儲在站點的本地存儲下)
2、SessionStorage(關閉后Session結果不存在)
查看全部 -
查看與調試 Cookie?
查看全部 -
使用 Network Waterfall 分析頁面載入性能
1)頁面請求總覽概況
2)查看單一請求具體Timing時間
查看全部 -
1)功能欄作用:
1??打開/關閉加載監控Network日志 2??清除加載請求 3??頁面加載截圖 4??過濾 5??檢索(功能強大,可以對Response做檢索) 6??展示方式
2)單一請求(調試數據)
3)底部有資源整體情況統計
查看全部 -
Network網絡面板
1、查看網頁資源請求概覽,查看資源分布
2、針對單一請求查看Request/Response或時間消耗等(command+shift+r/contor+shift+r:清除瀏覽器緩存)
3、分析網頁性能優化,使用工具代理頁面請求數據等
查看全部 -
使用DevTools作為Text IDE步驟:
1)添加目錄
2)代碼區修改文件(可修改本地文件)
查看全部
舉報