The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Out Front Js

    Console for mobile browsers and webviews.
    Filed under 

    • 🔾18%Overall
    • 96
    • 16.8 days
    • 🕩3
    • 👥2

    Awesome Badges GitHub license PRs Welcome made-with-javascript Maintenance JavaScript Open Source? Yes!


    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
    • 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
    Show All