How to get at the result of a promise in chrome dev tools console when "debugger" is used?

Question

Something like this leads to the promise pending in the debugger console. If you remove the debugger or wait until the second console.log, you get a result that you can click-open in the log.

<script>
import { Table } from 'apache-arrow';

async function loadData(dataUrl){
  const response = await fetch(dataUrl);
  return await response.arrayBuffer();
}

      console.log('loading data')
      let dataUrl = "https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/chicago-crimes-2017.arrow"
      let crimes = loadData(dataUrl).then(buffer => {return Table.from(new Uint8Array(buffer))})
      console.log(crimes)
      debugger
      console.log(crimes)
</script>

How can I resolve the future in the debugger and get a hold of the data in the REPL/console?

Answer 1

You cannot resolve the future, but you can get a hold of the data as soon as it is generated:

import { Table } from 'apache-arrow';

async function loadData(dataUrl) {
    const response = await fetch(dataUrl);
    return await response.arrayBuffer();
}

console.log('loading data');
let dataUrl =
    'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/chicago-crimes-2017.arrow';
let crimes = loadData(dataUrl)
    .then((buffer) => {
        return Table.from(new Uint8Array(buffer));
    })
    .then((tab) => {
        console.log(tab);
        return tab;
    });
</script>

The advantage of this approach is that you can get rid of the console message by removing the second then.