npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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

5

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

madnhmadnh

Keywords

proxydebugremoteconsole

Readme

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:

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

  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

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:

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 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