1. 程式人生 > >【譯】你不知道的Chrome除錯工具技巧 第一天:console中的'$'

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

特別宣告

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

正文

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

1. $0

在Chrome的Elements面板中,$0關聯到當前我們選中的html節點。

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

你可以用以上的補充參考來嘗試一些相關的操作(例子: $1.appendChild($0))

2. $$$

在你還沒有在app中定義 $變數的情況下(例如 jQuery),$console中是冗長的函式document.querySelector的一個別名。

但是$$ 能節省更多的時間,因為它不僅僅執行document.QuerySelectorAll並且返回的是一個節點的陣列,而不是一個Node list

從本質上說:Array.from(document.querySelectorAll('div')) === $$('div'),但是$$('div')要簡短太多了!

3. $_

$_變數是關聯上次執行的結果。

4. $i

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

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

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

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

其他系列

其他此係列的文章,馬上就會翻譯出來,到時會貼出對應的連結在此處。 如果你對我的翻譯表示肯定,也可以關注我一波哦~順便求一波star→

看這裡, 美麗的部落格系統

許可記錄