chrome devtools tip(2)--自定義代碼片斷，構建你的工具箱

日常開發中，有些代碼片斷經常用到的，好比，獲取 url 參數，rgb轉16進制，打印下當前頁面的性能數據，給全部的 span 加個樣式， 防抖節流，fetch接口，相似 jquery這樣的順手 選擇 dom 節點的庫，等等，還有不少不少咱們日常會用到的 utils 工具代碼

不少人是每次用到了就去 google 下，下次要用再去找，這樣每次都要找，重複又耽擱時間，哪有沒有什麼辦法能把這些代碼 存到瀏覽器的某個地方，要用的時候直接拿出來用，那今天就要講講 chrome devtools 的 snippets 功能

如 上面的 GIF 顯示，再 sources 面板下面有個 snippets 選項，在左側創建須要的目錄，而後開始寫代碼就行了

代碼寫完，右下腳有個 顯示 Ctrl+Enter 的鍵，點擊運行，或者使用快捷鍵，就能夠運行代碼了，是否是很方便呀

這裏的代碼 保存下來，下次打開瀏覽器，代碼仍是存在的，這樣這裏就能夠成爲你保存各類工具代碼的好地方

好比，你如今想看看，當前網站的性能，假設你這裏有保存獲取性能數據的代碼，你就很快的能獲取到了，我本身就有保存下來

這裏也能夠成爲你看 github，有好的想法的時候，嘗試寫段代碼的好地方，不用打開編輯器，F12 就能開始幹活，方便簡單，用 console 面板寫代碼比較雞肋，換行就執行了，很是不方便，這個就比較方便了

這麼好用的的功能還不心動麼，趕忙打開 chrome 試試吧

推薦閱讀：

devtools tips: 調試僞類

devtools tips: 執行保存代碼片斷

Webpack 誕生記

Babel學習系列4-polyfill和transform-runtime的差異

若是你喜歡也能夠關注個人 公衆號 「chromedev」,專一於 chrome 相關信息