Here are some of my favorite lesser-know features of DevTools.
Awesome CSS Editing
1. Add Custom CSS Rules
The + sign in the upper right will allow you to add a style for any selector.
2. View Your Margin, Border, and Padding
The picture at the bottom lets you know how big a selected DOM element is as well as how many pixels its padding, border, and margin each occupy.
3. Emulate Mobile Devices
You can view your page in compatibility mode for several different mobile devices. Enable this feature in the bottom console pane on the “Emulation” tab
4. Disable Your Browser’s Caching
You can disable your browser’s caching when dev tools is open. This is handy for making sure your browser is using the lastest and greatest version of your files every time. To do this, click on the gear in the upper right corner and check “disable cache when DevTools is open.
5. Use DevTools as Your Editor
Those are the less obvious features of DevTools that I find myself using over and over. What are your favorite features?