Question

我有：

Django应用
使用JavaScript
使用OpenLayers库
使用包裹进行捆绑
（用于包装管理的吸管和纱线）
（用于发展的PyCharm）

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

<?define MyProductVersion = "31.00.0000" ?>
<?define MyProductCode = "PUT-GUID-HERE" ?>
<?define MyUpgradeCode = "PUT-GUID-HERE" ?>

<Wix xmlns="http://schemas.microsoft.com/wix/2006/wi">

  <Product Id="$(var.MyProductCode)" Codepage="1252" Language="1033" Manufacturer="Corp"
           Name="Bla" UpgradeCode="$(var.MyUpgradeCode)" Version="$(var.MyProductVersion)">

   <...>

   <!-- Major upgrade -->
    <Upgrade Id="$(var.MyUpgradeCode)">

      <!-- Downgrade Protection -->
      <UpgradeVersion Minimum="$(var.MyProductVersion)" OnlyDetect="yes" 
                      IncludeMinimum="yes" Property="DOWNGRADE_DETECTED"  />

      <!-- Major Upgrade Configuration -->
      <UpgradeVersion IncludeMinimum="no" Maximum="$(var.MyProductVersion)" 
                      IncludeMaximum="no" MigrateFeatures="yes" Property="UPGRADE_DETECTED" />
    </Upgrade>

</Wix>

因此群集层无法加载，但出现此错误。

这是我的问题

如果这是stacktrace，为什么没有我自己的代码调用该函数？

我猜我的代码隐藏在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/获取文件？我的测试服务器在端口8000上运行。我没有创建第二台服务器，也没有在该端口上启动请求。我猜想OpenLayers库中一定有一个隐藏的请求，但是我不知道该在哪里调用。

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

http://localhost:37575/

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

Answer 1

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

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

window.debugClusters = clusters

现在，您可以像clusters那样从开发控制台访问debugClusters。

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

Answer 2

调试包裹+ openlayers非常容易

如果使用vscode，请创建.vscode目录
您需要阅读并下载Chrome代码https://parceljs.org/debugging.html的Chrome扩展名
您必须在.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）？

这是我的问题

2 个答案: