Question

有人可以解释我如何在Visual Studio Code的外部.js文件中使用文档方法吗？

我做什么：我有一个index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>
</head>
<body>
    <table>
        <tbody id="tbody"></tbody>
    </table>
    <script src="script.js"></script>
</body>
</html>

和script.js文件：

var tbody =  document.getElementById("tbody");

对于运行，我选择script.js文件并开始调试（fn + F5）我收到ReferenceError：文档未定义，请参见屏幕截图：http://prntscr.com/kfp60b

我了解我的浏览器尚未打开且DOM还不存在，但是如何在外部js文件中调试此方法？如何正常运行？

Answer 1

尝试

var tbody =  window.document.getElementById("tbody");

此外，在声明脚本时，请参阅有关包含type标签的信息：

Which is better: <script type="text/javascript">...</script> or <script>...</script>

使用chrome调试时，您应该会看到类似以下内容：

Answer 2

我发现必须使用一些插件来运行浏览器，例如Debugger for Chrome如果要在我开始调试.js文件时调用浏览器-您需要将此插件安装到vs代码并创建launch.json文件配置：

{
"version": "0.1.0",
"configurations": [
    {
        "name": "Launch index.html",
        "type": "chrome",
        "request": "launch",
        "file": "${workspaceFolder}/sample/index.html"
    },
]

}

在调试时-vs代码将向您显示消息启动index.html-在确认chrome浏览器打开相应的file.html后

ReferenceError：文档发生尝试使用外部js脚本的情况

2 个答案: