我有:


Django应用
使用JavaScript
使用OpenLayers库
使用包裹进行捆绑
(用于包装管理的吸管和纱线)
(发展的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
    })
});


因此,群集层不会加载,但出现此错误。

javascript - 如何正确调试捆绑的(parceljs)JavaScript文件(使用OpenLayers)?-LMLPHP

这是我的问题

如果那是stacktrace,为什么没有我自己的代码调用该函数?

我猜我的代码隐藏在self-hosted:1009中,但是我无法打开该代码。如果单击该按钮,将显示view-source:http://self-hosted/,显示“找不到页面”。那么,这个自托管的匿名代码是什么,我在哪里可以找到它?

另外,为什么它尝试从http://localhost:37575/获取文件?我的测试服务器在端口8000上运行。我没有创建第二台服务器,也没有在该端口上启动请求。我想OpenLayers库中的某个地方肯定有一个请求,但是我不知道该在哪里调用。

另外,为什么我不能只在JavaScript终端中要求一些值?输入变量名称时出现此错误:

>>  clusters
ReferenceError: clusters is not defined


所以我想这个包裹使调试变得更加复杂,但是OpenLayers要求使用捆绑器,所以我遇到了麻烦。

最佳答案

您可能无法在堆栈跟踪中看到您的代码,因为该堆栈跟踪是从匿名函数调用开始的。这些匿名函数调用通常是计时器/事件的回调函数。但是,通常单击这样的行会在开发工具中打开脚本。在浏览器中导航很奇怪...也许源地图有问题?



包裹可能会将您的代码包装在IIFE中,以避免污染全局名称空间。我用于调试等目的访问诸如clusters之类的变量的一个技巧是:

window.debugClusters = clusters


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



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

关于javascript - 如何正确调试捆绑的(parceljs)JavaScript文件(使用OpenLayers)?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56295121/

10-13 08:57