How to debug a bundled (parceljs) JavaScript file (using OpenLayers) properly?

Question

I have:

Django app
with JavaScript
using the OpenLayers library
using Parcel for bundling
(pipenv and yarn for package management)
(PyCharm for development)

Everything works basically, but I ran into a problem with OpenLayers and debugging seems to be complicated. I tried to recreate the cluster example form the OpenLayers page. My JavaScript code is basically a copy of the example. The clusters are not loading. Here is the code:

import 'ol/ol.css';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
import {Cluster, OSM, Vector} from 'ol/source.js';
import {Circle, Fill, Stroke, Style} from 'ol/style.js';

let distance = 50;
let count = 20000;
let features = new Array(count);
let e = 4500000;
for (let i = 0; i < count; ++i) {
    let coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
    features[i] = new Feature(new Point(coordinates));
}
let source = new Vector({
    features: features
});
let clusterSource = new Cluster({
    distance: distance,
    source: source
});
let styleCache = {};
let clusters = new Vector({
    source: clusterSource,
    style: function (feature) {
        let size = feature.get('features').length;
        let style = styleCache[size];
        if (!style) {
            style = new Style({
                image: new Circle({
                    radius: 10,
                    stroke: new Stroke({
                        color: '#fff'
                    }),
                    fill: new Fill({
                        color: '#3399CC'
                    })
                }),
                text: new Text({
                    text: size.toString(),
                    fill: new Fill({
                        color: '#fff'
                    })
                })
            });
            styleCache[size] = style;
        }
        return style;
    }
});

let raster = new TileLayer({
    source: new OSM()
});

let map = new Map({
    target: 'map_canvas',
    layers: [
        raster,
        clusters
    ],
    view: new View({
        center: [0, 0],
        zoom: 2
    })
});

So the cluster layer does not load, but I get this error.

Here are my Questions

If that is the stacktrace, why isn't there my very own code, calling the function?

I guess my code is hidden in self-hosted:1009, but I can't open that code. If I click on that I get to view-source:http://self-hosted/ which shows a "page not found". So what is this self-hosted anonymous code and where can I find it?

Also why does it tries to get a file from http://localhost:37575/? My test-server runs on port 8000. I did not create a second server nor did I started a request on that port. I guess there must be a request somewhere hidden in the OpenLayers library, but I have no idea where I call that.

Also, why can't I just ask for some values in the JavaScript terminal? I get this error, when I enter a variable name:

>>  clusters
ReferenceError: clusters is not defined

So I guess that parcel is making debugging more complicated but a bundler is required by OpenLayers so I am hitting a brick wall.

score 1 · Accepted Answer · answered May 24 '19 at 15:30

You probably can't see your code in the stack trace because that stack trace started from an anonymous function call. These anonymous function calls are usually callback functions from timers/events. However, usually clicking such a line opens up the script in the dev tools; navigating in your browser is strange... perhaps there is a problem with the source maps?

Parcel probably wraps your code in an IIFE to avoid polluting the global namespace. A trick I use to get access to variables like clusters for debugging purposes is:

window.debugClusters = clusters

Now you can access clusters from the dev console as debugClusters.

The unexpected port 37575 might be Parcel's HMR server. HMR is a development feature that automatically reloads HTML/CSS/JS modules for you when file changes are detected. The HMR port can be configured/disabled.

score 0 · Answer 2 · edited Jul 05 '20 at 21:13

Is very easy debug parcel + openlayers

If you use vscode, create .vscode directory
You need read and donwload chrome extension for vscode https://parceljs.org/debugging.html
You must create inside .vscode the following file

[psilvao@localhost .vscode]$ ls
launch.json
[psilvao@localhost .vscode]$ cat launch.json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:1234",
        "webRoot": "${workspaceFolder}",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
          "../*": "${webRoot}/*"
        }
      }
    ]
  }[

You need run parcel with your project

npm run start

Now you can click run Start Debugging in vscode

How to debug a bundled (parceljs) JavaScript file (using OpenLayers) properly?

Here are my Questions

2 Answers2