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

Demo

A demo is worth a thousand words. See demo

Built With

OutFront is extremely light weight and built with:

• JavaScript

Getting Started

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

Installation

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

• npm

  npm install outfront

• yarn

  yarn add outfront

Usage

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.

Roadmap

See the open issues for the list of known issues.

See the Product board for the list of proposed features

Contributing

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

License

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