Is there a way to call imported functions in the debug console?

Question

I'm debugging some typescript/javascript code on Visual Studio Code and it's been very helpful!

However I cannot call functions that are imported in the code being run. Let's say I have this in the code: variable = getVariable();

I can type variable in the debug console and it returns the variable that was just defined in the code, however if I try to just call the function getVariable() I get the error Uncaught ReferenceError: getVariable is not defined

I'd love to be able to call all the functions that work in the code also in the debug console.

Thanks!

Answer 1

Imported variables get renamed because of the bundling process and to ensure ecmascript compatibility. There exists a webpack plugin (written by me) which will simplify the debugging experience in most cases. It's limitations are

• no full ecma script compatibility (no live bindings)
• imported vars are defined asyncronously (meaning the will not be available during the first code execution)

if that's ok for you you can install the plugin with

npm i debug-import-vars-webpack-plugin

and insert it into you webpack.config.js and after a restart getVariable () should be available.