时间戳

首页 > 解决方案 > Visual Studio Code - 使用 Chrome 进行调试 - 断点在开始时运行，而不是在遇到时

debugging - Visual Studio Code - 使用 Chrome 进行调试 - 断点在开始时运行，而不是在遇到时

问题描述

编辑：我找到了解决方案。由于其他人可能会犯同样的错误，我将答案放在底部。

我正在使用 Visual Studio 代码。我是新手。

我安装了 Debugger For Chrome 和 Debugger For Edge。

我已经安装了 Live Server。

我有launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://127.0.0.1:5500/a.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

我有我的基本 html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="myfunc()">Click</button>
</body>
<script>
    function myfunc(){
        alert("clicked");
    }
</script>
</html>

我的断点就行了alert("clicked");。

我单击蜘蛛左侧的调试图标，然后单击绿色按钮启动。

现在奇怪的一点：

alert即使没有按下按钮，程序也会立即启动并在线中断。

我继续。

但是当我单击按钮并期望遇到断点时。它不是。警报在没有中断的情况下发生。

有人知道我在做什么错吗？

解决方案：

它不喜欢<script>身体的外部。如果您将 html 文件更改为包含<script>正文，则它可以正常工作。

像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="myfunc()">Click</button>

    <script>
        function myfunc(){
            alert("clicked");
        }
    </script>
</body>
</html>

标签： debuggingvisual-studio-code

解决方案

我发现出了什么问题。

它不喜欢身体的外部。如果您将 html 文件更改为包含正文，则它可以正常工作。

像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="myfunc()">Click</button>

    <script>
        function myfunc(){
            alert("clicked");
        }
    </script>
</body>
</html>

推荐阅读