为什么 Inspector 开发者工具不能反映所有代码?
Why does Inspector developer tool not reflect all code?
在 this tutorial 之后,我正在尝试将 cytoscape.js 包含到一个超级基本的网页中。我通过 npm install cytoscape
下载了 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)查看文件时,我什么也没看到。当我在任何浏览器中查看开发人员工具时,HTML 与我的 index.html
文件不匹配。具体来说,<meta charset = "UTF-8">
没有出现,<body>
标签是空的。我对网络开发和 JavaScript 非常陌生,所以我不确定我在这里做错了什么。为什么在浏览器中查看时 index.html,
与我在文本编辑器中编写的内容不匹配,我怎样才能让它显示图形?
您的代码似乎是正确的。
无论如何我建议使用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>
在 this tutorial 之后,我正在尝试将 cytoscape.js 包含到一个超级基本的网页中。我通过 npm install cytoscape
下载了 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)查看文件时,我什么也没看到。当我在任何浏览器中查看开发人员工具时,HTML 与我的 index.html
文件不匹配。具体来说,<meta charset = "UTF-8">
没有出现,<body>
标签是空的。我对网络开发和 JavaScript 非常陌生,所以我不确定我在这里做错了什么。为什么在浏览器中查看时 index.html,
与我在文本编辑器中编写的内容不匹配,我怎样才能让它显示图形?
您的代码似乎是正确的。
无论如何我建议使用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>