The filter toolbar has quick toggles for various request types, such as XHR/Fetch, stylesheets, JS scripts, images and more: Using toolbar filters to filter network requests Thankfully, you can very easily filter the requests. Working your way through all those requests can be difficult when you look for something specific. Scrolling through very long list of network requests Sometimes, you work on a page that has a lot of requests. You can copy the element's styles, JS path ( document.querySelector(SELECTOR)) or XPath. This selector might not be specific enough, or too specific for production, but should make your life a little easier when debugging.Īs you can see in the previous gif, the copy context menu hides a few more nifty things you can copy.
JS LIBRARY HTML INSPECTOR AND SELECT LIKE CHROME DEV TOOLS HOW TO
It stores our website DOM tree, it allows us to see the CSS applied to each element, and we can make changes to elements on the fly from it.Ī really cool trick I've found is the ability to copy properties of an element (and not only properties) from the context menu.įor example, you can copy an element's selector: A gif showing how to copy an element's selector The selections are exposed through the $0 - $4 variables: A gif showing usage of the $0 - $4 selector in consoleĪDVERTISEMENT 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. If(id.Chrome Developer Tools are a super powerful suite of tools for developing web applications. Then inside the mousemove we will do some basic checking to prevent selecting the HTML, BODY, selector var id =, tagName = Secondly create a mousemove event on the document (or your container) $(document).mousemove(function(event) ) Here is a version that I have converted from my project for your benefit, it involves jQuery but it is extremely simple to convert to vanilla as only the mousemove & css methods from jQuery are used.įirst create the 5 HTMLElements that are required. I have recently required such a feature for a project I was working on, turned out that I had to use for sides to create a box because otherwise the event.target when you move the mouse would end up being the selector, and if I were to use z-index: -1 it would be a bit fishy when you have a lot of elements that overlap.etc.