Browser development tools have evolved from basic consoles to fully integrated development environments. It’s become possible to alter and inspect any aspect of your web application, but few of us venture beyond the basics. In this guide, we’ll explore the features you may not have considered.

Browser Devtool Secrets

Preface

During the past decade, browser development tools (devtools) have evolved from basic JavaScript consoles to fully integrated development and debugging environments. It’s become possible to alter and inspect any aspect of your web application, but few of us venture beyond the basics.

Start-up, Network and Performance

Are you only using browser devtools to view messages generated by console.log() statements in your code? Despite some backlash , we all use console logging for quick and dirty debugging. However, browser devtools and Node.js provide a range of console commands and features you may not have discovered.

The Console

In this section, we’ll explore some of the DOM, CSS and animation options available to developers and designers. Most features are available in all browsers, but once again, Chrome- and Firefox-specific tools will be the focus here.

Community Questions