One of the cool features of DevTools is that while you are manipulating your Web App and seeing direct changes, none of the changes are permanent as they are not saved. This gives a programmer access to try new things out without worrying about making any changes that may affect the code base or in a case of going with the styling or such. All the changes you have made will disappear once you refresh the page.
To access DevTools all you need to do is just download and use Google Chrome.
Here are some helpful tips when using DevTools:
- Quickly search all source code by pressing Command + Option + F and entering your search into the search bar.
- Easily access any file within the current project via Command + P and search for the name.
- Edit HTML and preview the changes by selecting any element, double click the opening tag (the closing tag will be automatically updated for you). Any changes will be displayed in the browser as if the source code has been edited.
- Edit and preview CSS code by selecting the element you want to edit. Under the style panel, you can change any element you want and preview the results in the browser.
- Use multiple cursors to edit more than one line at the same time via Command + Click.
- Enter device mode by selecting the small phone or tablet icon in the left-hand upper corner, or via Command + Shift + M. This allows you to see how the page will render on another device.
- Command K will clear the console
- From the Elements panel, you can drag and drop any HTML element and change its position across the page.
Being someone who is currently learning new programming tricks every single day, I‘ve found the DevTools to be one of the most useful resources when dealing with web-development!