Introspecting ECMAScript 6 module members in a web browser console

Question

I am trying out some third party JavaScript.

Let's say I import an ES6 module in a Chrome dev tools console:

import('https://unpkg.com/web3/dist/web3.js').then(module => console.log(module));

It gives me:

Module {Symbol(Symbol.toStringTag): "Module"}
Symbol(Symbol.toStringTag): "Module"

Is there a way for me to introspect the module contents from the JavaScript console, so that I can see what exports the module offers me to import and use?

I'm pretty sure it did just that. And the https://unpkg.com/web3/dist/web3.js file you loaded is not an ES6 module, so it does *offer none*. — Bergi, Apr 10 '20 at 21:50
Also note, devtools runs vanilla JS, unlike your webpack or other bundlers, so `import` will only make sense with native ES modules. — wOxxOm, Apr 11 '20 at 06:02
@Bergi You are correct. It works for other ES6 modules, so this particular module is not packages for ES6. — Mikko Ohtamaa, Apr 11 '20 at 09:32

score 1 · Answer 1 · edited Apr 11 '20 at 15:32

The syntax is correct

import("https://unpkg.com/es-react").then(module => console.log(module));

However, the loaded module must explicitly support ECMAScript 6 module exports, so that the web browser will find any members.

Module {…}
Children: (...)
Component: (...)
Fragment: (...)
Profiler: (...)
PropTypes: (...)
PureComponent: (...)
React: (...)
ReactDOM: (...)
StrictMode: (...)
Suspense: (...)
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: (...)
cloneElement: (...)
createContext: (...)
createElement: (...)
createFactory: (...)
createRef: (...)
default: (...)
forwardRef: (...)
isValidElement: (...)
lazy: (...)
memo: (...)
useCallback: (...)
useContext: (...)
useDebugValue: (...)
useEffect: (...)
useImperativeHandle: (...)
useLayoutEffect: (...)
useMemo: (...)
useReducer: (...)
useRef: (...)
useState: (...)
version: (...)

Introspecting ECMAScript 6 module members in a web browser console

1 Answers1