Google DevTools to the Rescue!
Google Developer Tools, also known as Chrome DevTools, are a powerful tool made available to developers within the browser. DevTools allow for editing a website on the fly through manipulation of code in browser, testing the viewpoint on a mobile device, measuring performance, and interacting with/debugging HTML, CSS, and Javascript. What makes DevTools even more powerful is all of this manipulating and changing can be done with no fear because all of the changes are temporary. You can test away with no repercussions, since all of the changes will disappear as soon as you refresh the page. All that is necessary to unlock this powerful tool is download and use Google Chrome.
Three Ways to Access DevTools:
- Right click any element on the web page and select INSPECT from the drop down menu.
- Go to VIEW on the top left hand side of your screen, select DEVELOPER and then DEVELOPER TOOLS.
- Mac: Option + Command + I
- Windows: F12 or Control + Shift + I
- Bonus Tip: you can access the latest version of DevTools by downloading the experimental version of Chrome that is updated daily, Chrome Canary. It is recommended to run Canary alongside a Chrome browser to check for any issues that may come up.
Once you access DevTools, you will be taken to the Elements tab, within the Elements tab you will notice three separate windows.
- Upper window contains all the HTML for the current page. Double click on any element and enter your changes. These changes will be instantly rendered to the page as if you had changed the source code.
- Lower left window shows the CSS styles that have been applied to that page. Like HTML these can also be manipulated by selecting any element and viewing your changes in browser. This allows for visual demonstration and assistance with layout and editing.
- Lower right window will show the CSS box model, this model helps you identify exactly what you are looking at. The model is separated into 4 sections.
- The innermost blue box, is the content on the page where text and images appear.
- The surrounding green box represents padding. Padding clears an area around the content, and is completely transparent.
- Yellow box represents the border that goes around the padding and the content.
- The outermost orange box clears an area outside of the border, this area is also transparent.
10 Tips and Tricks to Make the Most of 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 searching for the name.
- Edit HTML and preview the changes by selecting any element, double click the opening tag (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 browser.
- Use multiple cursers 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 + Option + J opens the Console, which allows you to see logged messages or run JavaScript.
- 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.
- 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.
As a beginner the best way to learn a new skill is to experiment, but as a beginner experimentation can often feel intimidating and terrifying. DevTools provides a stress free scratch pad to attempt and try stylistic and source code changes without the fear of breaking something. Simply refresh or press Control + Z and you are right back where you started.
