Chrome Tips #4：在任意頁面運行預定義腳本

Chrome Dev Tools 中有個功能叫做 「Snippets」，即代碼片段的意思，在你做前端調試的時候，可能經常會做相同的事情，而利用這個 「Snippets」 功能，你可以把常用的調試代碼保存下來，然後需要的時候直接去運行就好了，「Snippets」 代碼運行時是可以訪問當前頁面的 DOM 結構，甚至是 JS 對象和方法的，可以說這個小功能的極限就是你的想像力。

下面是是用這個功能的具體步驟：

1. 打開 「Sources」 面板，在左側邊欄選擇 「Snippets」；
2. 在左側邊欄，右鍵新建代碼片段，鍵入片段名稱；
3. 在右側編輯器中輸入你想運行的代碼，輸入完畢之後可以用通用的保存快捷鍵保存；
4. 左側邊欄選中代碼片段名稱，右鍵執行，或者直接在右側編輯器中按 Ctrl/Cmd + Enter；

可能你也看到了：代碼片段編輯器是支持自動縮進和代碼高亮的，如果你嫌字體太小，Mac 下面可以按 Cmd + 「+」 來增大字體，Windows 下面自己探索。

另外需要提醒的是，如果你在代碼片段中使用了 ES6 中的 const 來聲明變數，建議你把代碼段包在 IIFE 中，避免出現變數已定義的問題。

下面是實際操作的動圖：

最後，附上別人寫的 devtools-snippets 倉庫：DevTools Snippets，這裡面有各種各樣的代碼片段，多數都是前端工程師常用的代碼片段。

以上，希望對你有用。

細心的同學可能發現了，這個專欄的所有文章都在標題前面做了分類，比如本文跟 Chrome 有關，就加上了 Chrome Tips #{N}，Vim、Git、CLI、Mac 都類似。

One more thing，部分同學反饋知乎客戶端播放不了動圖，請在 PC 上看就好。

推薦閱讀：