Javascript 为什么Inspector开发工具不能反映所有代码？_Javascript_Html_Cytoscape.js

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

javascript html

Javascript 为什么Inspector开发工具不能反映所有代码？,javascript,html,cytoscape.js,Javascript,Html,Cytoscape.js,接下来，我尝试将cytoscape.js包含到一个超级基本的网页中。我通过npm安装cytoscape下载了cytoscape，并将cytoscape/dist/cytoscape.js复制到我的项目目录中。目录如下所示： Kyles-MBP:Desktop kyleweise$ tree testing-cytoscape/ testing-cytoscape/ ├── cytoscape.js └── index.html <!doctype html> <html&g

接下来，我尝试将cytoscape.js包含到一个超级基本的网页中。我通过

npm安装cytoscape

下载了cytoscape，并将

cytoscape/dist/cytoscape.js

Kyles-MBP:Desktop kyleweise$ tree testing-cytoscape/
testing-cytoscape/
├── cytoscape.js
└── 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>

我基本上复制了教程中出现的内容，

index.html

如下所示：

Kyles-MBP:Desktop kyleweise$ tree testing-cytoscape/
testing-cytoscape/
├── cytoscape.js
└── 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>


教程1：入门
#赛义德{
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：0px；
左：0px；
}
var cy=细胞景观({
容器：document.getElementById（'cy'），
要素：[
{data:{id:'a'}}，
{数据：{id:'b'}}，
{
数据：{
id:'ab'，
资料来源：“a”，
目标：“b”
}
}]
});

但是，当我尝试通过web浏览器查看文件时（我尝试过Chrome、Safari和Firefox），我什么也看不到。当我在任何浏览器中查看开发人员工具时，HTML与我的

index.HTML

文件不匹配。具体来说，

不会显示，并且

标记为空。我对web开发和JavaScript非常陌生，所以我不确定我在这里做错了什么。为什么在浏览器中查看时，index.html，与我在文本编辑器中编写的内容不匹配，如何使其显示图形

您的代码似乎是正确的

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

或

对于缩小版

它是有效的

var cy=cytoscape({
容器：document.getElementById（'cy'），
要素：[
{data:{id:'a'}}，
{数据：{id:'b'}}，
{
数据：{
id:'ab'，
资料来源：“a”，
目标：“b”
}
}]
});
#cy{
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：0px；
左：0px；
}

奇怪的是，这在这里工作，但我更改了
中的
，以查看该URL，但仍然一无所获。这就像浏览器没有识别我修改了文件一样。浏览器中是否启用了javascript？是的，只是转到了Chrome设置，javascript设置为allowed。啊，我知道了。我正在修改一个index.html
文件，并在浏览器中调出另一个版本。非常感谢。