Web_Dev_Grad

Google Chrome DevTools is a suite of built-in tools that helps you inspect, debug, test, and optimise websites directly in the browser during development. As it's name suggest it is available when using the Google Chrome browser.

It is best to use Google DevTools in incognito mode for 2 key reasons:

1. It is a coding "clean room" so any Chrome extensions you have are disabled and will not be injecting scripts, adding to your DOM or changing your CSS. This lets you debug issues that are present in your code
2. There are no stored cookies, stored local data or cached files; so when you test your performance you will be testing it from the point of a view of a first time visitor to your website

You can open DevTools in several ways:

• Right-click > Inspect
• Keyboard shortcuts:
  • Windows/Linux: Ctrl + Shift + I or F12
  • macOS: Cmd + Option + I
• Chrome menu > More Tools > Developer Tools

DevTools usually opens docked to the right side of the browser, but you can change this layout. Click the three-dot (⋮) menu in DevTools > Dock side, then choose if you'd like it on the right, bottom, left, or in a new window.

The elements panel of DevTools is used to inspect and edit HTML and CSS in real time. When you make changes here you will be able to see them in your webapp. Please note that these do not alter your HTML or CSS files, so if you make a change you like, update your files with these changes to keep them.

The main section is the DOM tree where you can view and edit the page structure in your HTML file. Here you can double-click any element or attribute to change it.

Underneath or to the right (depending on your screen size is the styles pane). These show the styles of your selected element in the DOM tree and you can view and modify the CSS rules applied to this selected element. At the top of this section there is a hand :hov button which you can use to change the state of the element e.g. being focused or hovered. This lets you see and edit your interactive elements. Scrolling to the bottom of the styles pane shows the box model, which is the visual breakdown of margin, border, padding, and content size.

A tip here to see the contrast of your elements is to click the button at the top left that looks like an arrow in a dotted line square. With this you can pick out elements directly from the page instead of the DOM tree. Hovering over these elements, however, will display accessibility information including the contrast.

The console panel is both a logger and an interactive JavaScript environment. You can view errors and warnings generated by your script. This is especially handy when you are clicking some interactive feature and something that should be happening is not happening, so you can see what errors are being thrown up. Additionally you can run JavaScript commands directly and log data from code using console.log(), console.table(), etc.

The Lighthouse panel is where you can create a full audit of your websites performance, accessibility, best practices, SEO and PWA compliance.

You generally want to use the Navigation mode, and select all of the categories unless you are after specific results. Then pick between mobile and desktop. It's best to do both so that you can make sure you provide the best experience for all users.

It will generate a score for each category with specific and actionable tips to improve your score. You will generally want to aim for greens across the board.

I use the Performance panel solely to throttle the network to simulate slower network connections to then run the audit in the Lighthouse panel. This is especially useful if you have a webapp that people will be using on the go on their phones, so you can make sure it works well with spotty mobile internet.