Opening Up Chrome Dev Tools (Inspector)
- Chrome inspector can be opened up multiple ways
- Using the toolbar: View > Developer > Developer Tools
- Right Click on Webpage or Element & Click Inspect
- Shortcuts : Option+Command+I (Mac) | Control+Alt+I (Windows)
Search & Find (source code & files)
- To search in all files loaded on the page for a specific string, hit Ctrl + Shift + F (Cmd + Opt + F). This method of searching supports Regular expressions as well.
- To search in the webpage’s source code, hit Cmd + F when you have Elements tab open.
Use multiple carets & selections
- While editing a file you can set multiple carets by holding Ctrl (Cmd for Mac) and clicking where you want them to be, thus allowing you to write in many places at once.
Pretty Print (CleanCSS)
- 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.
Device mode
- Use Device Mode to approximate how your page looks and performs on a mobile device.
Color Picker
- When selecting a color in the Styles editor you can click on the color preview and a picker will pop up. While the color picker is opened, if you hover over your page, your mouse pointer will transform into a magnifying glass for selecting colors with pixel accuracy.
Force element state
- DevTools has a feature that simulates CSS states like :hover and :focus on elements, making it easy to style them. It is available from the CSS editor.
Visualize the shadow DOM
- This Is very useful for showing shadow DOM elements in the Inspect code, such as Placeholders
Edit HTML & CSS
- Right right click the HTML element in the inspect source code and click ‘Edit as HTML’.
- Simply select the element you want to edit and under the styles panel you can add/change any CSS property you want.
