Как правильно отладить пакетный (parceljs) файл JavaScript (используя OpenLayers)? - PullRequest
1 голос
/ 24 мая 2019

у меня есть:

  • Приложение Django
  • с JavaScript
  • с использованием библиотеки OpenLayers
  • с использованием Parcel для комплектации
  • (pipenv и пряжа для управления пакетами)
  • (PyCharm для разработки)

Все работает в принципе, но я столкнулся с проблемой с OpenLayers, и отладка кажется сложной. Я попытался воссоздать пример кластера со страницы OpenLayers . Мой код 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
    })
});

Итак, слой кластера не загружается, но я получаю эту ошибку.

Screenshot of Firfox Debug Panel

Вот мои вопросы

Если это трассировка стека, почему нет моего собственного кода, вызывающего функцию?

Полагаю, мой код скрыт в self-hosted:1009, но я не могу открыть этот код. Если я нажму на это, я получу view-source:http://self-hosted/, который показывает «страница не найдена». Так что же это за анонимный код, размещенный самостоятельно, и где я могу его найти?

Кроме того, почему он пытается получить файл из http://localhost:37575/? Мой тест-сервер работает на порту 8000. Я не создал второй сервер и не запустил запрос на этот порт. Я предполагаю, что где-то в библиотеке OpenLayers должен быть скрытый запрос, но я не знаю, где я это называю.

Кроме того, почему я не могу просто запросить некоторые значения в терминале JavaScript? Я получаю эту ошибку при вводе имени переменной:

>>  clusters
ReferenceError: clusters is not defined

Так что я думаю, что посылка усложняет отладку, но OpenLayers требует связующего, поэтому я бью кирпичную стену.

1 Ответ

1 голос
/ 24 мая 2019

Вы, вероятно, не видите свой код в трассировке стека, потому что эта трассировка стека началась с вызова анонимной функции. Эти анонимные вызовы функций обычно являются функциями обратного вызова из таймеров / событий. Тем не менее, обычно нажатие на такую ​​строку открывает скрипт в инструментах разработки; навигация в вашем браузере странная ... возможно, есть проблема с исходными картами?


Parcel, вероятно, упаковывает ваш код в IIFE , чтобы избежать загрязнения глобального пространства имен. Уловка, которую я использую, чтобы получить доступ к переменным типа clusters для целей отладки:

window.debugClusters = clusters

Теперь вы можете получить доступ к clusters из консоли разработчика как debugClusters.


Неожиданный порт 37575 может быть HMR-сервер Parcel . HMR - это функция разработки, которая автоматически перезагружает модули HTML / CSS / JS для вас при обнаружении изменений файла. Порт HMR можно настроить / отключить.

...