JavaScript Proxy Playground - Online Observe Object
Apply a Proxy to an object and see the get/set traps log fired in real time. Understand metaprogramming. Local.
UD5 Toolkit
Inspect, visualize & interact with JavaScript Promise states in real-time
resolve() or reject() are silently ignored. This guarantees that .then() and .catch() handlers are invoked at most once, making Promise behavior predictable and race-condition-free.
Promise.race() with a special sentinel value, or maintain a wrapper that tracks the state manually (as this tool does). In production, consider using state machines or libraries like p-state for explicit state inspection.
resolve(). However, if resolve() is called with another Promise, the original Promise follows that inner Promise â it hasn't fulfilled yet. So a Promise can be resolved but still pending if it's waiting for another Promise to settle.
async/await is syntactic sugar over Promises, making asynchronous code look synchronous and easier to read. Use Promises directly when you need fine-grained control (e.g., Promise.all, Promise.race, custom promise chains). Use async/await for cleaner sequential logic. They are fully interoperable â an async function always returns a Promise.
.catch() or use try/catch with await..then() chains â breaks the chain.new Promise().Promise.all() â use Promise.allSettled() instead.resolve(promiseB) is called inside promiseA, promiseA adopts the state of promiseB. It remains pending until promiseB settles, then fulfills or rejects with the same value or reason. This is called promise assimilation or unwrapping, and it's a core mechanism enabling Promise chaining.
Apply a Proxy to an object and see the get/set traps log fired in real time. Understand metaprogramming. Local.
Paste GeoJSON and instantly see it drawn on a draggable map. Supports points, lines, and polygons. Local fetch of tiles.
List cached responses for your domain. View headers, content, and delete individual entries. Understand your PWA's cache.
Display used/total/limit JS heap size using performance.memory. Take snapshots and see growth. Simple memory leak detection.
See the View Transitions API in action. Crossâfade and morph between two states. Copy the JavaScript starter code.
Write JavaScript using element.animate() and see the result in a live preview. Compare with CSS keyframes. Debugger included.
Check if your site has a visible and functional skip navigation link. Key for keyboardâonly users.
Apply contentâvisibility: auto to offâscreen sections and see the rendering cost drop. Demos for infinite scroll optimization.
Paste any JavaScript expression and see its evaluated type and value. Understand JS coercion and type quirks. Educational.
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
Render 1000 styled elements using inline styles vs. CSS classes and compare time. Understand CSSâinâJS tradeâoffs.
See exact dimensions of your current browser inner/outer window, screen resolution, and pixel ratio. Developer debug.
Split text into a JavaScript or JSON string array. Wrap in quotes, add commas. Ready to paste into code.
Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.
Compress text with Brotli at different quality levels. See size reduction and time. Find the sweet spot for your static assets.
Schedule tasks with userâvisible, userâblocking, or background priority. See execution order and delays. Modern web perf.
Calculate large Fibonacci numbers in a Web Worker. See the UI remain responsive. Copy the pattern for your app.
Run a CPUâheavy calculation (e.g., prime numbers) in a Web Worker and see the UI stay responsive. Code snippet provided.
Paste HTML/CSS and render it to a canvas image. Download as PNG. For creating dynamic social share images.
Select a caching strategy and see a flow diagram of how requests are handled. Learn PWA patterns.
Create an animation that advances with scroll using animationâtimeline: scroll(). See the visual timeline editor. Modern CSS.
Toggle contentâvisibility: auto on long blocks and see the rendering time difference. Understand this powerful property.
Type any character and see how it renders in different font stacks. Detect missing glyphs and fallback behavior.
Write a generator function and step through it with next(). See values and done state. Understand iterators.
Pixelate selected areas of an image to hide faces or sensitive data. Adjust block size. Download the censored result.
Pick a random icebreaker question or activity for remote meetings. Never start a meeting awkwardly again.
Enter income, pay frequency, and expected deductions to estimate your tax refund or balance due. Simplified model.
Write or paste HTML, CSS, and JavaScript and instantly see the rendered output in a sandboxed iframe. A handy frontend prototyping tool.
Learn how to register your PWA to handle custom URL protocols. See the manifest entry and test.