Iconsole developer kit1/13/2024 The selections are exposed through the $0 - $4 variables: A gif showing usage of the $0 - $4 selector in console Copying an element's properties The console goes even further, allowing us to access not only the last selection, but the last 5, in order. If you pick an element in the Elements tab you can retrieve it with the $0 variable in the console: A gif showing usage of the $0 selector in console Sometimes, a selector might be too complicated to write by heart, or you just don't know a selector specific enough. There are a few more tricks up the $ sleeve. Similarly, $$ is an alias to document.querySelectorAll(): Using the $$ selector to print class names Under the hood, $ is an alias to document.querySelector().įor example, if you want to simulate a click on an element you can do: Using the $ selector to click a button The Chrome dev tools console allows you to make use of that $ selector, and more. The most popular API jQuery provides is the $, used for selecting DOM elements. That's crazy for a library dating all the way back to 2006. It has ruled the web for over a decade, and some statistics state that more than 70% of the most popular web pages in the world run some version of jQuery. Features that might save you a click or two – and isn't that what we're all about here? jQuery style DOM queries in the console They can do so much, from very basic operations like traversing the DOM, to checking out network requests or even profiling your application's performance.Īmong the big, everyday features they enable, there are quite a lot of gems to be found if you look deep enough. ![]() ![]() ![]() Chrome Developer Tools are a super powerful suite of tools for developing web applications.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |