一、chrome方向
1)自帶內容
Element
edit hide delete... 拖拽
scroll Into View 定位不在視口的dom結構
style(調色盤),computed(樣式問題)
breack on dom斷點功能
Console
debugger hover的時候
debugger
處理頁面中hover或者mouseover的dom
console部分:
console.log;console.error;console.warn;console.Info
- console.assert斷言
console.assert('學敏'==='浩宇');
斷言的表示式為false的時候,向控制檯列印你的內容 - console.count()//傳遞同樣引數,顯示count()次數;傳遞不同引數,預設引數是default
//函式被呼叫次數
console.count('學敏')
console.count('浩宇')
console.count('學敏')
複製程式碼
- console.time()--console.timeEnd()
// 立即啟動計時器
console.time()
for (let i = 0; i < 10000; i++) { // 某些操作 }
// 立即結束計時器,並輸出計時結果
console.timeEnd()
複製程式碼
- console.dir,如果是非dom和log一樣,dom結果是列印所有屬性和事件
- console.group()+console.groupEnd()將控制檯輸出的內容進行分組
- console.profile()+console.profileEnd()
var arr = new Array(10000000).fill(1);
function fun1 () { for (let i = 0, len = arr.length; i < len; i++) {} }
function fun2 () { for (let i = arr.length; i --; ) {} }
function fun3 () { for (let i = 0, item; item = arr[i++]; ) {} }
function fun () { fun1(); fun2(); fun3(); }
// 立即開始一個效能分析器
console.profile('測試for迴圈');
fun();
console.profileEnd('測試for迴圈');
複製程式碼
$0~$4
//點選dom倒序順序 ;$_
//控制檯最後輸出值
Sources
- {} 格式化壓縮後的程式碼
- Blackboxing script 新增除錯debug檔案到黑名單(debug跳過) 刪除 在setting中
Network
- copy as fetch //拷貝成fecth請求
- block request domain;block request url //攔截某個請求
- online //設定瀏覽器訪問網速限制
more tools
- coverage 分析頁面 js和css 佔用比
其他
- 工作管理員 分析chrome各個視窗和外掛效能
- 截圖 command + shift + p 搜尋screen
- 谷歌搜尋
設定語言啊和安全策略,翻牆後搜尋的內容別有洞天
2)外掛方向
react,redux,vuex,移動端eruda和vConsole,谷歌翻譯,手勢外掛(crxmouse)...
二、webstorm編輯器方向
- 函式集合structure
- todo
- 快捷操作(///註釋 cl等)
- 相關快捷鍵,(例如整行復制 command + D,格式化command + shift + L)
- Favorites收藏夾