npm package: @madnh/ohmyconsole
Description: Script util to get console of the site on remote device, like mobile phone, QA's devices, etc.
Latest version: 0.0.6

# 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                           |
| ------------------------- | ----------------------------------- |
| ![](./docs/dashboard.jpg) | ![](./docs/dashboard-view-logs.jpg) |

## Usage

You have 2 way to use this script:

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

### Manually setup

#### 1. Install

Download content of [\_\_ohmyconsole](./__ohmyconsole/) folder, put it to your site.

#### 2. Load inject script

Load inject script: [./\_\_ohmyconsole/inject.js](./__ohmyconsole/inject.js) at very begind of the site.

```html
<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:

1. Add query parameter: `__ohmyconsole=true`
2. 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

```sh
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](https://thanhnien.vn)

```sh
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](http://localhost:5050)
- Your LAN IP address: [http://192.168.1.x:5050](http://192.168.1.x:5050)

You can use ngork to publish the development site:

```sh
# 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.

```sh
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.

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

## Dashboard

Visit dashboard page at `__ohmyconsole/` folder (example: `http://example.com/__ohmyconsole/`). It will load [index.html](./__ohmyconsole/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:

- `Start Debug` or `Stop Debug` to control activate status
- `Download Logs` to download logs to file
- `View Logs` to view current logs
- `Clear Logs` to clear curren logs

Download file has format: `<cleanup-host-name>.ohmyconsole.json`. Example:

- `example_com.ohmyconsole.json`
- `localhost_3000.ohmyconsole.json`