Passing on knowledge about software development and other related technologies.
Need to find that class or variable? Use Dev Tool's built-in search! To search in all files loaded on the page for a specific string, press [Ctrl] + [Shift] + F. This method of searching supports Regular expressions as well.
The DevTools console supports some handy magic variables and functions selecting DOM elements:
- $() - Short for document.querySelector(). Returns the first element, matching a CSS selector ( e.g. $('div') will return the first div element in the page).
- $$() - Short for document.querySelectorAll(). Returns an array of elements that match the given CSS selector.
- $0 - $4 - A history of the five most recent DOM elements that you've selected in the elements panel, $0 being the latest.
To learn more Console commands read the Command Line API.
Chrome's Developer Tools has a built-in code beautifier that will help you return minimized code to its humanly readable format. The Pretty Print button is located in the bottom left of your currently opened file in the Sources tab. Give it a try!
You can press [Ctrl] + D while editing files in the Sources Tab, the next occurrence of the current word (or selected word) will be selected as well, helping you edit them simultaneously.