ReferenceError: 文档发生了使用外部 js 脚本的尝试答案

【问题标题】：ReferenceError: document occured an atempt to use external js scriptReferenceError: 文档发生了使用外部 js 脚本的尝试
【发布时间】：2018-08-07 11:00:35
【问题描述】：

谁能解释我如何在 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: document is not defined，见截图：http://prntscr.com/kfp60b

我知道我的浏览器没有打开，DOM 还没有存在，但是我如何在外部 js 文件中调试这个方法？如何正常运行？

【问题讨论】：

标签： javascript visual-studio-code visual-studio-debugging

【解决方案1】：

试试

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

另外，请参阅有关在声明脚本时包含类型标记的内容：

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

当您使用 chrome 进行调试时，您应该会看到如下内容：

【讨论】：

尝试使用窗口 - 我得到“ReferenceError: window is not defined”
您是否通过双击并选择“Chrome”作为浏览器来启动您的 index.html 文件？听起来您正在尝试直接启动 javascript 文件，但是如果您这样做，它与您的 index.html 文件没有关联。
在 Chrome 中按 F12 以调出调试器 (Windows)。
是的，我也尝试过这种情况： 1. 在 chrome 浏览器中打开我的 index.html 2. 在 script.js 文件中运行调试并得到相同的错误。我谷歌，发现我需要在每个文件夹中添加一些任务文件来指定一些配置。也许对我有帮助？

【解决方案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

【讨论】：

感谢您在这里分享您的解决方案，您可以接受它作为答案。这可能对阅读此主题的其他社区成员有所帮助。