Skip to content
Render client console output to the DOM for troubleshooting environments that do not have a dev console
JavaScript CSS Dockerfile
Branch: master
Clone or download
Patrick Gross Patrick Gross
Patrick Gross and Patrick Gross Build v1.1.0 release
Latest commit a31945e Nov 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
icon
src
test
.babelrc
.dockerignore
.eslintrc.json
.gitignore
.travis.yml
CONTRIBUTING.md
CONTRIBUTORS.md
Jenkinsfile
LICENSE.txt
NOTICE.txt
README.md
package-lock.json
package.json
webpack.config.js

README.md

F-Twelve

License js-standard-style Framework

Render console output to the DOM and provide an input console for troubleshooting environments that do not have the usual F12 dev console. The tool is designed to be included in Production code. Features include:

  • Written in vanilla JavaScript and minified to add as little overhead as possible.
  • Automatically starts hidden and is attached to the DOM via JS or keyboard shortcut.
  • Provides callbacks for when attaching to the DOM. This could be used, for example, to use F-Twelve's "debug hotkey" to enable additional "debug mode" features in the consuming application.

Usage

npm install f-twelve --save-dev

Include dist/f-twelve.umd.js. and dist/f-twelve.css in your web application. To view the tool, press and hold F+1+2 in that order or call FTwelve.show() . A demo page with examples of the API can be found in demo/index.html. See it live at https://engineering.cerner.com/f-twelve/demo/.

The tool can be enabled via ES6 Import or HTML Tag:

ES6 Import

JS

import "f-twelve";

CSS

import "f-twelve/dist/f-twelve.css";

HTML Tag

JS

<script src="./node_modules/f-twelve/dist/f-twelve.umd.js"></script>

CSS:

<link rel="stylesheet" href="./node_modules/f-twelve/dist/f-twelve.css"/>

Initialization

Once the JS script is included, no further configuration is required. It will be hidden and waiting for the F+1+2 keyboard shortcut. There is also a global FTwelve object available with an API.

See Demo Page for demo and full API.

You can’t perform that action at this time.