Tag: devtools

The Chrome and Web Developer Relations team is significantly expanding in 2022. Open roles span program management, Chrome extensions, CSS, rendering, DevTools, web performance, the Privacy Sandbox, and web ecosystem. The team is seeking program managers, developer relations engineers, technical writers, and infrastructure specialists to contribute to various initiatives, including Chrome Dev Summit, Google I/O, web.dev, and improving the overall web platform.

This blog post introduces a simple bookmarklet that provides quick access to a webpage's JavaScript console logs, warnings, and errors directly on desktop and mobile devices. It eliminates the need for connecting to Chrome DevTools, especially useful for quick debugging on mobile. The bookmarklet creates a small, expandable element at the bottom of the page that displays console outputs and keeps a running tally. It intercepts calls to console.log, console.warn, and console.error, displaying the messages in the created element while preserving their appearance in actual DevTools. While not a full DevTools replacement, it's a handy tool for quick insights and debugging on the go.

Use onappinstalled to detect when a progressive web app is installed.

A simple bookmarklet that will performance trace the current page and open in an hosted devtools instance

A curl-like utitly that runs JavaScript

I needed to figure out how to monitor events on an element (like when a field is autofilled) and Chrome DevTools has a monitorEvents function, but Firefox doesn't. Since I couldn't find an equivalent in Firefox DevTools, I created my own JavaScript function that iterates through an element's properties, finds event listeners (e.g., "onclick"), extracts the event name (e.g., "click"), and attaches a console logger to each event. The code snippet and a corresponding gist are provided.

TIL: Use eye dropper directly on the web page.