For the last 3 years I had stuck using Chrome Developer Tools (DevTools for short). The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization.

In this series of blog posts I am going to share some tips and tricks that will help you improve your workflow with Devtools.

01. Prettify your markup in the Elements panel

Select your HTML and press Shift + Tab

alt text

02. Convert color codes on the fly

Using Shift + Left click you can convert color codes from HEX to RGB and HSL

alt text

03. The best colorpicker you could ever have

The DevTools include a built-in color picker which is displayed when clicking on the colored preview square next to any valid color.

alt text

04. Multiple Selection with the Keyboard

To add the next occurrence of the current word to the selection in the Sources Panel, use Ctrl / Cmd + D

alt text

05. Quick access to stylesheet's selectors or script's methods

Using Ctrl / Cmd + Shift + P in the Sources Panel, shows up a quick access panel revealing up all your file's selectors or methods. It has a filtering field on the top as well as a line reference.

alt text

alt text

06. Add styles to your console log

You can style your console log using simple CSS attributes via %c

e.g

  console.log("%OMG, this is red!", "color: red;");
console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');

alt text

07. Log data using a tabular layout

Using console.table() you can have a nice tabular layout for arrays or objects.

e.g

  var ThisIsSomeData = [];
ThisIsSomeData.push({ foo:"bar", morefoo:"morebar", bar:"foo"  });
ThisIsSomeData.push({ foo:"bar0",  bar:"foo0"  });
console.table(ThisIsSomeData);

alt text

08. Use multiple cursors & selections in the Sources panel

Multiple cursors & selections could be used in the Sources panel just by pressing Ctrl / Cmd + Click

alt text

09. Prettiffy JavaScript or CSS in the Sources panel

The DevTools support prettifying of minified JavaScript to a more readable form. you just have to press the "Pretty print" button {} (marked with curly braces) from the bottom of the DevTools window. Keep in mind that Devtools creates a new instance of your files labeled :formatted

alt text

10. Reveal console selection in the Elements Panel

You can right click on any element output to the console and click 'Reveal in Elements Panel' to find it in the DOM.

alt text