【譯】你不知道的Chrome除錯工具技巧 第一天:console中的 '$'

dendoink發表於2018-12-06

特別宣告

本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。
版權歸原作者所有。
譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀,獲得授權的記錄會放在本文的最後~

正文

在馬上就要迎來假期的這24天裡,我將會發布一系列短篇的文章,關於如何更加有意思的使用開發工具,讓我們一起來看看吧!

1. $0

ChromeElements 皮膚中,$0 是當前我們選中的 html 節點的引用。

理所當然,$1 就是我們上一次選擇的節點的引用,$2 是在那之前選擇的節點的引用,等等。一直到 $4

你可以通過其他引用來嘗試相關操作 (例如: $1.appendChild($0))

【譯】你不知道的Chrome除錯工具技巧 第一天:console中的 '$'

2. $$$

如果你沒有在 App 中定義過 $ 變數 (例如 jQuery )的話,它在 console 中就是對這一大串函式 document.querySelector 的別名。

如果是 $$ 就更加厲害了,還能節省更多的時間,因為它不僅執行 document.QuerySelectorAll 並且它返回的是:一個節點的 陣列 ,而不是一個 Node list

Array.from(document.querySelectorAll('div')) === $$('div')$$('div') 哪一種方式更加優雅呢?

3. $_

$_ 是對上次執行的結果的引用。

【譯】你不知道的Chrome除錯工具技巧 第一天:console中的 '$'

4. $i

Chrome外掛:Console Importer 的幫助之下,你可以快速的在 console 中引入和把玩一些 npm 庫。

直接執行例如 $i('lodash') 或者 $i('moment') 幾秒鐘之後,就可以獲取到 lodash / momentjs 了。

【譯】你不知道的Chrome除錯工具技巧 第一天:console中的 '$'

這就是今天的內容啦,簡短但是暖心~ 慣例: 如果你從這裡學到了一些新東西

→ 你可以點個贊再走嘛~
→ 關注我的Twitter Tomek Sułkowski

其他系列

其他此係列的文章,馬上就會翻譯出來,到時會貼出對應的連結在此處。

如果你對我的翻譯表示肯定,也可以關注我一波哦~順便求一波star→ 看這裡, 美麗的部落格系統

授權記錄

【譯】你不知道的Chrome除錯工具技巧 第一天:console中的 '$'

相關文章