Open Web Developer Advocate at Google • Tools, Performance, Animation, UX
Modern browsers make it easy to customize certain components, like icons, the address bar color, and even add things like custom tiles. These simple tweaks can increase engagement and bring users back to your site.
Learn how to set up CSS & JS preprocessors to help you code more efficiently.
Chrome DevTools' Device Mode lets you mimic how your development site will look in production on a range of devices.
Console logging is a powerful way to inspect what your page or application does. Let's start with console.log() and explore other advanced usage.
By executing code one line or one function at a time, you can observe changes in the data and in the page to understand exactly what is happening.
Touch screens, GPS chips, and accelerometers can be difficult to test since most desktops don't have them. The Chrome DevTools sensor emulators reduce the overhead of testing by emulating common mobile device sensors.
Use virtual devices in Chrome's Device Mode to build mobile-first websites.
Compare similar data objects using the table() method.
Take advantage of the Console API to measure execution times and count statement executions.
Keep your client-side code readable and debuggable even after you've combined, minified or compiled it.
Your job doesn't end with ensuring your site runs great across Chrome and Android. Even though Device Mode can simulate a range of other devices like iPhones, we encourage you to check out other browsers solutions for emulation.
We've moved into a shiny new home at developer.google.com/web have great new tutorials and tips for you.