Chrome DevTools TipsChrome DevTools Tips

Google Developer Tools, also referred to as Chrome DevTools is a very vital and powerful tool within the browser that every developer should learn to utilize. DevTools allow us as web developers to edit a website through manipulation of code in the browser. With this powerful feature, you can test the viewpoint on a mobile device, measure performance, and interact with and debug CSS, Javascript, and HTML.

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:

1. Quickly search all source code by pressing Command + Option + F and entering your search into the search bar.
2. Easily access any file within the current project via Command + P and search for the name.
3. 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.
4. 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.
5. Use multiple cursors to edit more than one line at the same time via Command + Click.
6. 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.
7. Command + Option + J opens the Console, which allows you to see logged messages or run JavaScript.
8. Command K will clear the console
9. From the Elements panel, you can drag and drop any HTML element and change its position across the page.
10. Use breakpoints to debug Javascript by clicking the line number you want to break at, then hitting Command + R to refresh the page, the page will then run into the breakpoint.

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!