DEV Community

wimdenherder
wimdenherder

Posted on

Run npm packages in developers console on any site

If you want to test a npm package directly in the browser, there is a way to do this!

Image description

How?

The tric is to load a javascript file programmatically in the developers console:

const script = document.createElement('script');
script.src = 'localhost:666/bundle.js';
document.body.appendChild(script);
Enter fullscreen mode Exit fullscreen mode

Only what is bundle.js?

That's a bundle that we will create in a minute with browserify.

And what is localhost:666/

That's a local server that you will serve (later in this tutorial), because chrome browser does not allow local files to be loaded.

Let's start building

You can replace cheerio with any npm package you like (but not all of them work in the browser)

  • Open up a new directory
  • npm init -y
  • npm i -D browserify http-server (as dev dependencies)
  • npm i cheerio (or any package you want to use)
  • touch main.js
  • code . (launch visual code studio)
  • in main.js edit the following:
const cheerio = require("cheerio");
window.cheerio = cheerio; // this makes it available in the console later
Enter fullscreen mode Exit fullscreen mode
  • in package.json add the following:
"scripts": {
    "serve": "browserify main.js -o build/bundle.js && http-server -p 666 build/"
  },
Enter fullscreen mode Exit fullscreen mode
  • npm run build
  • open browser
  • check if this loads: localhost:666/bundle.js
  • if so copy paste this to Chrome's developers console (on any page)
const script = document.createElement('script');
script.src = 'localhost:666/bundle.js';
document.body.appendChild(script);
Enter fullscreen mode Exit fullscreen mode
  • Now play around in your developer console with the npm package, in our case:
const $ = cheerio.load(document.body.innerHTML);
$('a');
Enter fullscreen mode Exit fullscreen mode

PS: Not all npm packages work, I tried request but it gave an error in the developer console. But nowadays I would recommend to use the new standard fetch for this.

Github: You can clone this repo also!

Top comments (0)