Issue #438 (monitorEvents(), Text Editors, JS Utils, Uncats)12/09/21
If you're working on an app with a bunch of different events taking place on various elements (e.g. click, mouseover, etc.), you might need to log certain events in your browser's console as part of your debugging process.
This can get tedious as you add specific logs for certain cases. A useful feature in Chromium-based browsers is the monitorEvents() method of the Console Utilities API.
To log events on a targeted element, the syntax looks like this:
|
monitorEvents(document, 'click');
|
You would enter this line directly inside your browser's console. It takes two arguments: The object on which you want to monitor events and the event you want to monitor (in quotes as a string).
In the above example I would be logging all click events that take place anywhere on the document object. With that in place, any clicks would produce something like the following in the browser's console:
Notice each of the click events logged is able to be expanded (notice the triangles), which then allows you to fully inspect the event as needed.
This process will continue indefinitely until you reload the page or until you use the unmonitorEvents() method, passing in the same object:
|
unmonitorEvents(document);
|
You can use this feature in the DevTools on any web page, you just have to know which object you want to target and what event. I've set up a small demo page with some basic instructions for a few examples you can try, shown here:
|
monitorEvents(window.btn2, 'mouseover');
monitorEvents(window, 'resize');
monitorEvents(document.body, 'contextmenu');
|
As this demonstrates, you can monitor mouse events, window resize, context menu (i.e. when the user right-clicks), etc.
This won't work in Firefox, only in Chrome, Edge, Brave, and similar – basically any Chromium browsers. There are a few solutions for Firefox discussed in this Stack Overflow thread, but nothing built-in that I know of.
For more info on monitorEvents(), here are a few links:
Now on to this week's tools
|
VS Code Tools, Code Playgrounds, etc.
Retool is the Fast Way to Build Internal Tools
Visually design apps that interface with any database or API. Switch to code to customize how your app looks and works. The result? You can ship the business critical tools you need in days, not months. sponsored
vscode.dev
ICYMI, this is a lightweight version of VS Code running fully in the browser. Open a folder on your local machine and start coding, no install required.
Bookmarks
VS Code extension that lets you create bookmarks to navigate through your codebase using marked positions.
Git Automator
VS Code extension to automate your commit messages with smart auto-prefill and use shortcuts to add, commit, and push.
SQLime
An online SQLite playground for debugging and sharing SQL snippets, like JSFiddle, but for SQL instead of JavaScript.
Git Tree Compare
VS Code extension that helps you compare your working Git tree against a branch, tag, or commit in a natural folder tree structure or a flat list.
Go Playground WASM
A version of play.golang.org (the Go language playground) that runs completely in the browser.
Copilot.vim
A Vim plugin for GitHub Copilot, the recently released AI pair programming tool. Requires Neovim 0.6 or higher.
OpenVSCode Server
Run upstream VS Code on a remote machine with access through a modern web browser from any device, anywhere.
Stepsize
VS Code extension that integrates with Jira, GitHub, BitBucket, Slack, and more, so you can manage technical debt and prioritize refactoring work.
Vandelay
VS Code extension for automating imports in JavaScript and Python. But apparently it can't import potato chips or matches.
|
JavaScript Utilities
Find That Pod
Finding podcasts is hard. Let me help. Subscribe to Find that Pod, a FREE weekly newsletter bringing you 5 awesome, hand-picked podcasts you'll love. sponsored
International Telephone Input
A JavaScript utility for validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder, and provides formatting/validation methods.
Popup Cookie Creator
Online tool to build and customize a cookie consent popup for your website. The resulting code is hosted with the creator, but I suppose you could self host it if you copy the JS/CSS after you build it.
Tiny UI Toggle
A small library to create various types of elements that can be toggled: Accordion, tabs, dropdown, modal, dialog, etc.
ws
A simple to use, blazing fast, and thoroughly tested WebSocket library for Node.js.
memoize-one
A memoization library that only remembers the latest invocation.
PptxGenJS
A library to build PowerPoint presentations with JavaScript and integrates with Node, Angular, React, and Electron. Uses Open Office XML, which is compatible with Apple Keynote and other presentation tools.
VanillaTreeViewer
A minimalist component for displaying an interactive file browser in a blog post, documentation, tutorial, etc.
linq
A JavaScript implementation of the .NET LINQ library that contains all the original .NET methods plus a few additions.
it
A collection of utility modules to make dealing with async iterators easier.
kill-port
Node utility to kill the process running on any given port. Exports a single function that takes a port number as the argument and returns a promise.
next-cookie
A cookie serializer and deserializer library for Next.js.
safety-match
Rust-style pattern matching for TypeScript, JavaScript, and Flow.
|
The Uncategorizables
Discover Amazing Podcasts
Need something new to listen to while you're working on your latest web project? Check out Find That Pod, a weekly newsletter with 5 hand-picked podcasts for your listening pleasure. sponsored
Datree
A CLI tool to prevent Kubernetes misconfigurations from reaching production by ensuring manifests and Helm charts follow best practices and your own policies.
CUE
An open source language, with a rich set of APIs and tooling, for defining, generating, and validating all kinds of data: configuration, APIs, database schemas, code, etc.
Cadhub
A platform to try out and select Code-CAD packages, for those working with CAD technology.
Restic
A modern backup program that can back up your files from Linux, BSD, Mac, and Windows to different storage types, including self-hosted and online services.
Shottr
A screenshot utility for Mac that can create full-browser screenshots, pixelate private info, add annotations, and lots more.
Humor API
An API with access to over 50,000 categorized jokes and over 100,000 memes.
Excalideck
Online app for authoring slide decks that look hand-drawn, based on Excalidraw, the popular whiteboard tool for hand-drawn diagrams.
Framestack
A directory of categorized frameworks and libraries to help you choose what technology to use for a specific type of app.
You
A private search engine that summarizes the web for you, with extensible apps, privacy choices, actionable results, and personalization through preferred sources.
Serverless Examples
A collection of boilerplates and examples of serverless architectures built with the Serverless Framework on AWS Lambda, Microsoft Azure, Google Cloud Functions, and more.
Parca
Open source infrastructure-wide continuous profiling that helps you save money, improve performance, and understand incidents better.
On the Release Radar:
|
Commercial Apps and Classifieds
These are commercial (non-free) tools, paid classifieds, and affiliate links. You can submit a link for consideration or you can buy a classified link (will be marked "ad").
Qodana - JetBrains code quality platform for your favourite CI.
Morning Brew - A daily newsletter to keep you informed & entertained. ad
Rankwatch - Actionable SEO data tools, rank checking, etc.
RocketHub - Get the best lifetime deals on software.
Alternative Assets - World’s largest alternative investment community. ad
Stackprint - Web platform to build REST APIs fast without writing code.
Hybiscus - Build beautiful PDF reports using a simple declarative API.
|
A Tweet for Thought
I appreciate Camila Lenis taking the time to summarize my life.
Send Me Your Tools!
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
If you're knowledgeable on different geographic areas around the world, you'll enjoy Click that 'hood!, an interactive game that tests your expertise on different boroughs and neighbourhoods of cities around the world. I'm terrible at this, because I've only lived in one city in my life and even that city was pretty hard for me. The cool thing is, the names are revealed on hover, so you eventually get them all, they're just difficult if you're not familiar with the area.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
