Special statement

This article is a series by Tomek Sułkowski published on Medium. The copyright belongs to the original author. The translator had already communicated with the author before the translation to get permission to translate the whole series. In order not to disturb your reading, the authorized record is placed at the end of this article

The body of the

In the 24 days leading up to the holiday season, I will be publishing a series of short articles on how to make development tools more fun to use. Let’s take a look!

1. $0

In Chrome’s Elements panel, $0 is a reference to the HTML node we currently selected.

Of course, $1 is the reference to the last node we selected, $2 is the reference to the node we selected before that, and so on. All the way to $4

You can try this with other references (e.g. $1.appendChild($0))

2. $ 和 ?

If you haven’t defined the $variable in your App (such as jQuery), it’s the console alias to the long list of document.querySelector functions.

If it is? Is much more severe, but also can save more time, because it not only perform document. QuerySelectorAll and it returns: a Node array, instead of a Node list

Array. The from (document. QuerySelectorAll (‘ div ‘)) = = =?? (‘ div ‘) and (‘ div ‘) which kind of way is more elegant?

3. The $_

$_ is a reference to the result of the last execution.

4. $i

With the help of Chrome plugin :Console Importer, you can quickly introduce and play some NPM libraries in Console.

Just run $I (‘lodash’) or $I (‘moment’) for a few seconds and get the Lodash/Momentjs.

That’s it for today, a short but heartwarming routine: If you learn something new

→ Follow me on Twitter Tomek Sułkowski

Other series

Other articles in this series will be translated soon, with links posted here.

  • Day 1: ‘$’ in the Console
  • Tips you might not know about Chrome debugging tools Day 2: Copying & Saving
  • Chrome debugging tools you didn’t know about
  • The Chrome debugging tool has a few tricks you don’t know about.
  • Day 5: Console log, puzzling case
  • You don’t know the Command menu for Chrome
  • 7. Fun tips you didn’t know about the Chrome Debugging Tool Consle
  • Chrome’s Color picker is a Color picker that you don’t know about.
  • Day 9: Time console
  • Custom Formatters are custom formatters for Chrome.
  • Today: Style Editors continued
  • Tips you don’t know about the Chrome Debug Tool Day 12: Ninja Log Print! (the ninja logs)
  • Chrome debugging Tool tips you didn’t know about
  • Chrome Debugging Tool tips you didn’t know About day 14: Other shortcuts
  • Chrome debugger tips you didn’t know about
  • Tips you don’t know about Chrome debugging Tools 16: Breakpoints
  • Day 17: Farewell to Console
  • What you Didn’t know about Chrome Debug Tools
  • Chrome debug tool tips you don’t know
  • Tips you didn’t know about Chrome debugging tools Day 20: The dark arts of Workspace
  • Tips you Don’t Know about Chrome Debugging Tools Day 21: Snippets
  • Chrome Debugging Tool tips you didn’t know
  • Chrome debug Tool tips you don’t know
  • Day 24: The last day, New Year’s Day, is awesome

If you are sure of my translation, you can also pay attention to me a wave oh ~ incidentally for a wave of star→ see here, beautiful blog system

Authorization records