@madnh/ohmyconsole NPM

Oh My Console

Util script with:

Watch calls to console object
Lock unhandled of error (by listen error event of window object)
Collect info about browser and webpage
Watch events of page
Report source code of page
Dashboard page to:
- Control debug status
- Download logs
- View logs

Dashboard	View logs

Usage

You have 2 way to use this script:

Manually inject this code to your site
Use proxy command to auto inject to target site

Manually setup

1. Install

Download content of __ohmyconsole folder, put it to your site.

2. Load inject script

Load inject script: ./__ohmyconsole/inject.js at very begind of the site.

<html>
  <head>
    <script src="./__ohmyconsole/inject.js"></script>
    .....other contents.....
  </head>
</html>

3. Active script

This script only active its mocks when you active it.

To active, use below ways:

Add query parameter: __ohmyconsole=true
Set localStorage item __ohmyconsole__active to "true"

Use Proxy to auto inject code

This module already setup a simple Proxy server to serve target site, inject code to HTML pages, and serve dashboard page.

Install

npm install -g @madnh/ohmyconsole

Usage

You use ohmyconsole command to create a proxy to a target site, example that target site is https://thanhnien.vn

ohmyconsole https://thanhnien.vn

This command will create a proxy server, you use the link/port of this server to view the site. Examples:

Your local PC: http://localhost:5050
Your LAN IP address: http://192.168.1.x:5050

You can use ngork to publish the development site:

# Start development site, listen at localhost:3000
npm run dev

# Create proxy to development site, listen at localhost:5050
ohmyconsole http://localhost:3000
// or
// ohmyconsole 3000

# Use ngork to publish proxy server, so can share it with the world
ngrok http 5050

Auth

This command have option to protect proxy server with basic authentication.

ohmyconsole --auth user:523512415 http://localhost:3000

Prevent JS

Target pages may has scripts, use this option to disable run of those scripts, by replace it's type attribute to text/template. Script tags will be there but can't run.

ohmyconsole --prevent-js https://thanhnien.vn

Dashboard

Visit dashboard page at __ohmyconsole/ folder (example: http://example.com/__ohmyconsole/). It will load index.html file.

NOTE: this script use localStorage to save data, so you need to visit Dashboard on same origin of the page:

Your local PC: http://localhost:5050 -> http://localhost:5050/__ohmyconsole/index.html
Your LAN IP address: http://192.168.1.x:5050 -> http://192.168.1.x:5050/__ohmyconsole/index.html
Another proxy URL: https://[random-id].ngrok-free.app/ -> https://[random-id].ngrok-free.app/__ohmyconsole/index.html

In Dashboard, you can use buttons to: