F-Twelve Demo

F-Twelve requires no configuration, just include the JS file and CSS file.

Press Ctrl+F12 to display the icon in the lower left hand corner. Click the icon to view the F-Twelve dev tools.

To launch the tool from any website (as opposed to this demo page) use the bookmarklet: dist/bookmarklet.html

Console

All console output such as calls to console.log will be displayed on the Console tab, just like the regular web browser's console. The input prompt is able to evaluate simple JS expressions (e.g. window.location.href). It will read simple expressions but for security reasons it does not execute arbitrary code.

Open the Console tab in F-Twelve and click Run Console Demo to see examples written out.

Network

XHR requests are captured and displayed on the Network tab. Only XHR requests are supported. Other requests made by the browser such as static assets (JS, CSS, images, HTML, etc.) are not exposed to JS and thus not supported. Support for the fetch API is possible but not currently implemented.

Open the Network tab in F-Twelve and click Load Dog to see the request written out.

API

Optionally control the tool using JS via the API. The API is available on the global fTwelve object.

Show

Attach F-Twelve to the DOM, displaying only an icon at the bottom of the screen. Click the icon to display the actual tool.

fTwelve.show();

Hide

Remove F-Twelve from the DOM. It will still capture console/network data while hidden.

fTwelve.hide();

Disable

Detach from the DOM and completely disable the tool including the keyboard shortcut and show method. It will not capture console nor network data while disabled.

fTwelve.disable();

Enable

Enable the tool, this will also display it unless show is false.

fTwelve.enable({show: true});

On Show

Set a callback when showing the tool. Useful, for example, to use F-Twelve’s "debug hotkey" to enable additional "debug mode" features in the consuming application.

fTwelve.onShow(() => {
    alert("Showing F-Twelve");
});

On Hide

Set a callback when removing from the DOM. Similarly as onShow, this can be used to disable the consuming application’s "debug mode" via keyboard shortcut.

fTwelve.onHide(() => {
    alert("Hiding F-Twelve");
});