时间戳

首页 > 解决方案 > 为什么 Inspector 开发者工具不能反映所有代码？

javascript - 为什么 Inspector 开发者工具不能反映所有代码？

问题描述

按照本教程，我正在尝试将 cytoscape.js 包含到一个超级基本的网页中。我通过 cytoscape 下载npm install cytoscape，并复制cytoscape/dist/cytoscape.js到我的项目目录中。该目录如下所示：

Kyles-MBP:Desktop kyleweise$ tree testing-cytoscape/
testing-cytoscape/
├── cytoscape.js
└── index.html

我基本上复制了教程中出现的内容，index.html看起来像：

<!doctype html>

<html>

<head>
  <meta charset="UTF-8"/>
  <title>Tutorial 1: Getting Started</title>
  <script src="cytoscape.js"></script>
</head>

<style>
    #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>

<body>
    <div id="cy"></div>
    <script>
      var cy = cytoscape({
        container: document.getElementById('cy'),
        elements: [
          { data: { id: 'a' } },
          { data: { id: 'b' } },
          {
            data: {
              id: 'ab',
              source: 'a',
              target: 'b'
            }
          }]
      });
    </script>
</body>
</html>

但是，当我尝试通过网络浏览器（我尝试过 Chrome、Safari 和 Firefox）查看文件时，我什么也看不到。index.html当我在任何浏览器中查看开发人员工具时，HTML 与我的文件不匹配。具体来说，<meta charset = "UTF-8">没有出现，并且<body>标签是空的。我对 Web 开发和 JavaScript 非常陌生，所以我不确定我在这里做错了什么。为什么index.html,在浏览器中查看时与我在文本编辑器中编写的内容不匹配，我怎样才能让它显示图表？

标签： javascripthtmlcytoscape.js

解决方案

您的代码似乎是正确的。

无论如何，我建议使用 citoscape cdn：

https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.14/cytoscape.js

或者

https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.14/cytoscape.min.js用于缩小版本。

它有效

var cy = cytoscape({
        container: document.getElementById('cy'),
        elements: [
          { data: { id: 'a' } },
          { data: { id: 'b' } },
          {
            data: {
              id: 'ab',
              source: 'a',
              target: 'b'
            }
          }]
      });
    #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.14/cytoscape.min.js"></script>
<div id="cy"></div>

推荐阅读