如何正确调试捆绑的 (parceljs) JavaScript 文件（使用 OpenLayers）？

Question

我有：

Django 应用
和JavaScript
使用 OpenLayers 库
使用 Parcel 进行捆绑
（用于包管理的 pipenv 和 yarn）
（PyCharm 用于开发）

基本上一切正常，但我运行遇到了 OpenLayers 的问题，调试似乎很复杂。我试图重新创建 cluster example form the OpenLayers page。我的 JavaScript 代码基本上是示例的副本。集群未加载。这是代码：

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
    })
});

所以集群层没有加载，但我得到这个错误。

这是我的问题

如果那是堆栈跟踪，为什么没有我自己的代码调用函数？

我想我的代码隐藏在 self-hosted:1009 中，但我无法打开该代码。如果我点击它，我会看到 view-source:http://self-hosted/，其中显示 "page not found"。那么这个自托管匿名代码是什么，我在哪里可以找到它？

还有为什么它会尝试从 http://localhost:37575/ 获取文件？我的测试服务器在端口 8000 上运行。我没有创建第二个服务器，也没有在该端口上启动请求。我想一定有一个隐藏在 OpenLayers 库中某处的请求，但我不知道我在哪里调用它。

此外，为什么我不能只在 JavaScript 终端中请求一些值？当我输入变量名时出现此错误：

>>  clusters
ReferenceError: clusters is not defined

所以我猜 parcel 使调试变得更加复杂，但 OpenLayers 需要一个捆绑器，所以我碰壁了。

Answer 1

您可能无法在堆栈跟踪中看到您的代码，因为该堆栈跟踪是从匿名函数调用开始的。这些匿名函数调用通常是来自 timers/events 的回调函数。但是，通常单击这样的行会在开发工具中打开脚本；在您的浏览器中导航很奇怪...也许源映射有问题？

Parcel 可能会将您的代码包装在 IIFE 中以避免污染全局命名空间。为了调试目的，我用来访问像 clusters 这样的变量的一个技巧是：

window.debugClusters = clusters

现在您可以从开发控制台以 debugClusters 的身份访问 clusters。

意外的端口 37575 可能是 Parcel's HMR server。 HMR 是一项开发功能，可在检测到文件更改时自动为您重新加载 HTML/CSS/JS 模块。 HMR端口可以是configured/disabled.

Answer 2

非常容易调试parcel + openlayers

如果使用vscode，创建.vscode目录
您需要阅读并下载 chrome vscode 扩展 https://parceljs.org/debugging.html
您必须在 .vscode 中创建以下文件

[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}/*"
        }
      }
    ]
  }[

您的项目需要运行包裹

npm run start

现在您可以在vscode

开始调试

如何正确调试捆绑的 (parceljs) JavaScript 文件（使用 OpenLayers）？

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

javascript

openlayers

parceljs

这是我的问题