【譯】你不知道的Chrome調試工具技巧第一天：console中的 '$'

時間 2019-11-05

標籤不知道 chrome 調試工具技巧第一天 console 欄目 Chrome 简体版

原文原文鏈接

特別聲明

本文是做者 Tomek Sułkowski 發佈在 medium 上的一個系列。
版權歸原做者全部。
譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。
爲了避免影響你們閱讀，得到受權的記錄會放在本文的最後~html

正文

在立刻就要迎來假期的這24天裏，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，讓咱們一塊兒來看看吧！vue

1. $0

在 Chrome 的 Elements 面板中，$0 是當前咱們選中的 html 節點的引用。git

理所固然，$1 就是咱們上一次選擇的節點的引用，$2 是在那以前選擇的節點的引用，等等。一直到 $4github

你能夠經過其餘引用來嘗試相關操做 (例如: $1.appendChild($0))web

2. `$` 和 `$$`

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

若是是 $$ 就更加厲害了，還能節省更多的時間，由於它不只執行 document.QuerySelectorAll 而且它返回的是：一個節點的數組，而不是一個 Node listnpm

Array.from(document.querySelectorAll('div')) === $$('div') 和 $$('div') 哪種方式更加優雅呢？數組

3. `$_`

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

4. `$i`

在 Chrome插件:Console Importer 的幫助之下，你能夠快速的在 console 中引入和把玩一些 npm 庫。異步

直接運行例如 $i('lodash') 或者 $i('moment') 幾秒鐘以後，就能夠獲取到 lodash / momentjs 了。

這就是今天的內容啦，簡短可是暖心~ 慣例：若是你從這裏學到了一些新東西

→ 你能夠點個贊再走嘛~
→ 關注個人Twitter Tomek Sułkowski

其餘系列

其餘此係列的文章，立刻就會翻譯出來，到時會貼出對應的連接在此處。

若是你對個人翻譯表示確定，也能夠關注我一波哦~順便求一波star→ 看這裏, 美麗的博客系統

受權記錄

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

【譯】你不知道的Chrome調試工具技巧 第一天：console中的 '$'