@madnh/ohmyconsole
v0.0.6
Published
Script util to get console of the site on remote device, like mobile phone, QA's devices, etc.
Downloads
6
Readme
Oh My Console
Util script with:
- Watch calls to
console
object - Lock unhandled of error (by listen
error
event ofwindow
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:
Start Debug
orStop Debug
to control activate statusDownload Logs
to download logs to fileView Logs
to view current logsClear Logs
to clear curren logs
Download file has format: <cleanup-host-name>.ohmyconsole.json
. Example:
example_com.ohmyconsole.json
localhost_3000.ohmyconsole.json