Loading external library in Chrome console

Question

I am using React and Redux. Inside my Reducer I am using lodash library.

debugger; command stops the execution

If I import lodash library

import _ from "../../node_modules/lodash";

or

import _ from "lodash";

It fails. It cannot import the library. There is no loading error when I run my React application. I was wondering how do you load an external library(i.e lodash) in Google Chrome console?

score 1 · Accepted Answer · answered Jul 15 '19 at 03:31

1

Use dynamic import syntax instead, and you'll get back a Promise with what you want. For example, on this page:

https://stackoverflow.com/questions/57032914/loading-external-library-in-chrome-console

using

import('../../foo')

results in

Assuming that on your own site, the link is proper, all you need to do is call .then on the Promise:

import("../../node_modules/lodash")
  .then((_) => {
    // do stuff with _
  });

(of course, this requires that node_modules be a subfolder of the grandparent directory of the current page)

answered Jul 15 '19 at 03:31

CertainPerformance

356,069
52
309
320

Thanks. I tried `import("../../node_modules/lodash").then((_)=>{ _.mapKeys([{"id": 1, "val": 'a'}, {"id": 2, "val": 'b'}],"id")}) ` it only returns a promise. I was wondering how to get the `_.mapkeys()` return value? – learner2017 Jul 15 '19 at 04:00
It's asynchronous - you have to work with the Promise itself, see https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call . A value that's retrieved asynchronously can't be used synchronously. – CertainPerformance Jul 15 '19 at 04:02
Put everything in the `.then` so that it runs after the module has been retrieved. – CertainPerformance Jul 15 '19 at 04:19
Sorry, not clear. I have added all code inside `then()`. Please check my previous code. – learner2017 Jul 15 '19 at 04:27
You aren't doing anything with the return value of `mapKeys`. Eg if you wanted to log it: https://gist.github.com/CertainPerformance/7dc57f836fbc395bcfe9661cbb4314e6 – CertainPerformance Jul 15 '19 at 04:29
Thanks for the code. I have added console.log. but it did not work(only returns promise). `import("../../node_modules/lodash").then( (_)=>{ console.log (_.mapKeys([{"id": 1, "val": 'a'}, {"id": 2, "val": 'b'}],"id")) })` – learner2017 Jul 15 '19 at 04:37
What do you mean, "only returns promise"? `import` *always* returns a Promise, that's what it's supposed to do, right? The log statement should work if the Lodash you're using is being exported properly - eg, to use `_.mapKeys`, you need the module to have `export function mapKeys(...` or something of the sort as part of its code. – CertainPerformance Jul 15 '19 at 04:48

papigee · Answer 2 · 2020-04-16T13:48:56.340

The least complicated way I found is this:

Copy the html below into a file and save it as .html file (example - testLodash.html). It can work for any other library, just get the cdn for the library into the script tag.
Open the file in the browser (in my case Chrome) - It opens a blank page.
Open browser console and start using it. For example _.groupBy([6.1, 4.2, 6.3], Math.floor) . console logs {4: Array(1), 6: Array(2)}

<html>
   <head>
      <meta charset=utf-8 />

   </head>

   <body>
      <script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>

   </body>
</html>

Loading external library in Chrome console

2 Answers2