前端chrome和webstorm技巧

仙道CM發表於2018-09-28
前端ChromeWebORM

一、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等）
    前端chrome和webstorm技巧
  • 相關快捷鍵，（例如整行復制 command + D，格式化command + shift + L）
  • Favorites收藏夾

相關文章