Google Dev & Design Tools

Google is much more than its browser. Here we choose a selection of its best design and development tools to help build, create and improve your projects

- Steven Jenkins

Working on the web usually means you will be working with Google in some shape or form. Which browser are streets ahead of the competition? Google Chrome of course. So designers and developers need to think about how their project will work with the browser. How will it look? What technologies does it support, how secure is it and how will it perform? All valuable considerations. Fortunately, Chrome provides tools to ensure any site or app will be at its best. DevTools enable designers and developers to gain insight into a web page: you can manipulate the DOM, check CSS, experiment on designs with live editing, debug JavaScript and check performance.

But Google offers more than just the browser. It has tools and resources to aid nearly every aspect of your design and development life. Want to know how to improve performance? Lighthouse is here to help. Want to build better performing mobile sites? Then say hello to AMP. Are you looking to build beautiful PWAs? Then Flutter, Material Design, and Workbox are ready to step in. You’ll find details of YouTube channels and extensions in this article to help you use these tools.

The beauty of using Google tools, resources, libraries, and frameworks is that you know they will work well with the Chrome browser – the most popular browser on the planet.

CHROME DEVTOOLS

https://developers.google.com/web/tools/chrome-devtools

Every designer and developer knows (or at least should know) that Chrome comes with a set of tools built directly into the browser. These are ideal for inspecting the elements that make up a page, checking CSS, editing pages on the fly and much more.