Firebug : go to canvas!

100%

Firebug : go to canvas!

✓ Published0🌍 Public

Last edited Jul 7, 2011

Created on Jul 7, 2011

This example shows how to redirect Firebug’s command-line context to Facebook’s canvas iframe, enabling direct JavaScript and jQuery selector access from the console. The code executes a single Firebug API call, `cd($$(".canvas_iframe_util")[0].contentWindow)`, which uses `$$` to select the first iframe with the class `canvas_iframe_util` and then switches the console’s working window to that iframe’s content. It relies on Firebug’s built-in command-line functions rather than external libraries. The snippet is derived from a Stack Overflow answer and also includes a bookmarklet version for one-click activation.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 154614

This example demonstrates how to build a dynamic, animated data visualization using the Firebug debugger service. The code, written in JavaScript, initializes components through the XPCOM interface and uses the jsdIDebuggerService to interact with JavaScript execution. It processes source code by matching patterns with regular expressions to identify functions and URLs. The visualization uses an animation rendering approach, driven by the underlying Firebug runtime environment, to explore and display code structures in a dynamic way. The data source is the JavaScript files being analyzed for function names and location details.

CCaged

59% match

Loading thumbnail…

browsing tools dotjs snippets

This example shows a collection of JavaScript snippets that add keyboard and mouse shortcuts to specific websites, such as Forrst and Dribbble. It demonstrates how jQuery is used to bind click handlers to page elements, triggering navigation to the next paginated page, and how a custom keydown handler detects the Control key to open a Dribbble shot in a new window. The code relies on jQuery selectors and CSS properties to identify active elements, and it uses `document.location` for redirection. The snippets are designed for the dotjs browser extension, which injects user scripts into matching sites.

TTBD

57% match

Loading thumbnail…

A couple of changes to example4.html from this great article by Jos Dirksen (http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound) are sufficient to get it running in Firefox Aurora.

This example visualizes the frequency spectrum of live audio input, displaying animated bars that respond to the sound’s amplitude and frequency. It works by using the Web Audio API’s `AnalyserNode` to capture real-time data, then rendering the waveform with Canvas 2D drawing. The code includes compatibility fixes for Firefox and Chrome, switching from `createJavaScriptNode` to `createScriptProcessor` and from `noteOn` to `start`. The visible rendering loop updates bars based on the analyser’s frequency data, driven by a `requestAnimationFrame`-style callback.

Aamundo

55% match

Loading thumbnail…

Inject a library from a cdn in any website through the console

This example demonstrates a browser console script that injects the jQuery library into any website from a content delivery network. The code creates a new `<script>` element, sets its type to `text/javascript`, assigns the jQuery CDN URL as the source, and appends it to the document’s `<head>`. The snippet relies on the DOM API `document.createElement` and `appendChild` to perform the injection. It shows a manual, console-based method for loading external JavaScript dependencies without a package manager or build step.

FFrozenfire92

55% match

Loading thumbnail…

Browser test 2

The example demonstrates how a D3.js v5 application sets up a full-window canvas rendering environment, showing a simple steel-blue rectangle drawn near the top-left corner. It first creates a chart container that fills the viewport, then appends a canvas element sized to match the container’s CSS dimensions. The code logs those computed width and height values to the console for debugging, then uses the Canvas 2D API to fill a fixed 200×200 pixel rectangle at offset (10,10). The visualization highlights basic canvas setup and coordinate drawing without any data binding or interaction.

EEE2dev

55% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Canvas Force Tutorial

A force-directed network graph displays Facebook user connections from a CSV dataset, rendered on an HTML canvas. D3’s `forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, `forceX`, and `forceY` positions nodes, while each tick redraws circles and links using the Canvas 2D context. The example demonstrates a standard D3 v5 network visualization adapted from a video tutorial.

AAzhar-Shaban

54% match

Loading thumbnail…

FB test

This example shows a Facebook friend-selection interface that queries the Facebook FQL API to find friends whose names contain the letter "a" and who are app users. The code uses the Facebook JavaScript SDK and jQuery, with CoffeeScript handling the asynchronous API call to retrieve user names, profile pictures, online presence, and post permissions. The page embeds a Facebook login button and SDK initialization, then logs the filtered friend results to the browser console. No visual rendering or charting library is used; the output is purely the raw data returned from the FQL query.

Aabernier

54% match

Loading thumbnail…

fullscreen.js, no dependency

This example demonstrates how to add a fullscreen toggle button to any web page, showing a persistent user interface control that enables immersive viewing. The code appends a clickable “Fullscreen” button to the document body, leveraging the native browser fullscreen API through vendor-prefixed methods like `webkitRequestFullScreen` and `mozRequestFullScreen` to handle cross-browser support. On activation or exit, it triggers a redraw of the page after 200 milliseconds to refresh the visualization. The button label changes to a multiplication sign when in fullscreen mode, reflecting the current state via the `fullscreenchange` event listener.

PPhilippe Rivière

54% match