webpack无法断点

在webpack中，如果你无法在源代码中设置断点，可能是因为你的devtool选项设置不正确。可以尝试使用source-map选项来生成一个完整的source map文件，以便在源代码中设置断点。另外，还可以尝试使用cheap-module-eval-source-map选项来生成一个更小的source map文件，以加快打包速度。如果这些选项都无法解决问题，可能需要检查你的代码是否有语法错误或其他问题导致无法设置断点。

相关问题

vue断点调试debugger

您可以使用Vue官方提供的两种方式进行Vue断点调试：

方式一是使用Vue Dev＊＊＊助您调试Vue应用。您可以在浏览器的开发者工具中找到Vue Devtools插件。安装后，您可以在开发者工具中查看Vue组件的状态和数据，并进行调试。

方式二是在VS Code中安装Debugger for Chrome插件进行调试。以下是Debugger for Chrome插件的安装和使用方式：

1. 打开VS Code，并点击左侧的扩展插件按钮，搜索并安装Debugger for Chrome插件。
2. 按住键盘上的Ctrl+Shift+D快捷键，选择创建一个Chrome类型的launch.json文件。
3. 打开launch.json文件，并输入以下代码:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

解释一下其中的字段：
- type：调试类型，这里我们使用Chrome浏览器调试。
- name：调试名称，您可以随意起名。
- url：调试的地址，一般是http://localhost:8080。
- webRoot：项目的根目录，一般是src文件夹。
- breakOnLoad：是否在加载时打断点。
- sourceMapPathOverrides：用于解决源映射路径的问题。

4. 使用npm run dev命令来运行Vue项目。
5. 运行好项目后回到VS Code页面，按下F5键，这时浏览器将自动打开一个新的网页，地址就是刚刚输入的url地址。
6. 在需要设置断点的位置，点击一下鼠标左键，即可看到一个小圆圈，表示断点设置成功。
7. 在页面上进行相应的操作，即可看到页面已经进入断点状态。

通过以上步骤，您可以使用Vue Devtools插件或Debugger for Chrome插件进行Vue断点调试。希望对您有帮助！

S Code 中使用edge浏览器进行 TypeScript 项目的断点调试

如果你想在 VS Code 中使用 Edge 浏览器进行 TypeScript 项目的断点调试，可以使用 Edge 调试扩展。以下是具体步骤：

1. 确保已经安装了 TypeScript、VS Code 和 Edge 浏览器。

2. 在 VS Code 中打开 TypeScript 项目。

3. 在 Edge 浏览器中安装 `Microsoft Edge Debugger` 扩展。可以通过打开 Edge 扩展商店，搜索 `Microsoft Edge Debugger` 并安装。

4. 在项目根目录下创建一个 `launch.json` 文件。可以通过点击 VS Code 左侧的调试按钮，然后在弹出的面板中点击齿轮图标（打开“launch.json”）创建该文件。

5. 在 `launch.json` 文件中添加一个配置项，如下所示：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug with Edge",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/src/*"
            }
        }
    ]
}

其中，`name` 是该配置项的名称，`type` 是调试的类型，`request` 是调试请求类型，`url` 是指定要调试的 URL 地址，`webRoot` 是指定项目根目录，`sourceMaps` 是指定是否使用源映射，`sourceMapPathOverrides` 是指定源映射路径覆盖。

6. 在 VS Code 中按 `F5` 或点击调试按钮，选择 `Debug with Edge` 配置项开始调试。

7. 在 Edge 浏览器中打开调试器（快捷键 F12），就可以在 VS Code 中设置的断点位置进行调试了。

以上就是在 VS Code 中使用 Edge 浏览器进行 TypeScript 项目的断点调试的步骤。