1.4.0 • Public • Published

GitHub license PRs Welcome


OutFront JS 🚀

Console for mobile browsers.
See Demo »

Report Bug · Request Feature · See on NPM


OutFront JS - Console log for mobile browsers. | Product Hunt

About The Project

OutFront provides an onscreen console for mobile browsers 🔥

Intercepts all your console.log, console.warn, console.error and errors and logs them into a popup on screen itself(DOM). This can be useful in scenarios where you don't have access to Chrome, Firefox, Edge etc. inspect panels.

Example scenario to use OutFront JS:

  • You want to debug your webapp in a mobile browser or Webview where access to console is not present. Example: Chinese mobile browsers.
  • You want your tester to see console.logs straight on the screen.

OutFront JS intercepts following console methods currently:

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • Inbuilt Javascript errors


A demo is worth a thousand words. See demo

Built With

OutFront is extremely light weight and built with:

Getting Started

OutFront can be used with any web based projects and frameworks such as React, Angular etc.


OutFront requires Node to be installed in order to use yarn/npm.

  • npm
    npm install outfront
  • yarn
    yarn add outfront


After installation import OutFront to your project and call outfront() function on the very top of project tree(for example index.js):

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import outfront from 'outfront' // import outfront JS

outfront() // Call it on top of project.

ReactDOM.render(<HelloMessage name="Taylor" />, document.getElementById('container'))

Pass config (optional)

Customize Outfront's behaviour by optionally passing config as an object:


const config = {
  defaultOpen: true, // true/false (default = false) - Console will be open by default on page load.
  fullSize: true, // true/false (default = false) - Console will go full-screen (almost).
  opacity: 10 // 1-10 (default = 10) - Console opacity.

outfront(config) // Pass config object to outfront.

Note: Above example shows usage with React but, OutFront is built with vanilla JS and
      can be practically used with any JS framework/library.


See the open issues for the list of known issues.

See the Product board for the list of proposed features


Consider starring this project on Github.

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request


Distributed under the MIT License. See LICENSE for more information.

Icon made by iconixar from www.flaticon.com


npm i outfront

DownloadsWeekly Downloads






Unpacked Size

15.2 kB

Total Files


Last publish


  • paansinghcoder