为什么Inspector开发人员工具无法反映所有代码？

Question

Following this tutorial , I am trying to include cytoscape.js into a super basic web page. 在学习完本教程之后，我试图将cytoscape.js包含到一个超级基本的网页中。 I downloaded cytoscape via npm install cytoscape , and copied cytoscape/dist/cytoscape.js into my project directory. 我通过npm install cytoscape下载了cytoscape，并将cytoscape/dist/cytoscape.js复制到了我的项目目录中。 The directory looks like: 目录如下：

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

I have basically copied what appears in the tutorial, and index.html looks like: 我基本上已经复制了教程中显示的内容，并且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>

However, when I try to view the file via a web browser (I've tried Chrome, Safari, and Firefox), I see nothing. 但是，当我尝试通过Web浏览器（尝试过Chrome，Safari和Firefox）查看文件时，什么也看不到。 When I view the developer tools in whichever browser, the HTML does not match that of my index.html file. 当我在任何浏览器中查看开发人员工具时，HTML与我的index.html文件都不匹配。 Specifically, the <meta charset = "UTF-8"> does not show up, and the <body> tag is empty. 具体来说， <meta charset = "UTF-8">不出现，并且<body>标记为空。 I am very new to web development and JavaScript, so I am not sure what I am doing wrong here. 我是Web开发和JavaScript的新手，所以不确定在这里做错了什么。 Why doesn't the index.html, when viewed in the browser, match what I have written in my text editor and how can I get this to display the graph? 为什么在浏览器中查看index.html,时，它与我在文本编辑器中编写的内容不匹配，并且如何获取它以显示图形？

Answer 1

Your code seems to be correct. 您的代码似乎是正确的。

Anyway I suggest to use the citoscape cdn: 无论如何，我建议使用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.js

or 要么

https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.14/cytoscape.min.js for the minified version. https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.14/cytoscape.min.js为缩小版。

and it works 它有效

 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>

为什么Inspector开发人员工具无法反映所有代码？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-07-07 10:49:47

为什么Inspector开发人员工具无法反映所有代码？

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-07-07 10:49:47

解决方案1
1 已采纳 2018-07-07 10:49:47