如何在 VSCode 中调试 Django Javascript？答案

【问题标题】：How to Debug Django Javascript within VSCode?如何在 VSCode 中调试 Django Javascript？
【发布时间】：2021-08-03 10:49:36
【问题描述】：

我想知道是否有在 VSCode 中调试 Django Javascript 的解决方案。 VScode Chrome 调试器似乎很受欢迎。是否可以将它与 Django 服务器环境一起使用？直到现在我尝试在我的配置中进行以下设置：

    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/path/to/static/files"
    },

webRoot 与来自settings.py 的STATIC_ROOT 常量的路径相同

有什么想法吗？对我来说，解决方案不一定是 VSChrome-Debugger，我只是不想一直直接在 Chrome 中调试 JS ^^。

谢谢！！

【问题讨论】：

一直在编辑器和浏览器之间切换很烦人。我敢肯定，我不是唯一一个有这种感觉的人，我认为这个问题可能有一个“简单”的解决方案。

标签： django google-chrome visual-studio-code vscode-debugger

【解决方案1】：

此设置适合我：

{
  "name": "Chrome Debugger - launch",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:8000/v2/",
  "webRoot": "${workspaceFolder}/project/djangoprojectname/appname/static/main",
  "disableNetworkCache": true
}

重要的是 webRoot。我的 webRoot 路径指向我的 JS 目录所在的位置。我的 Django HTML 模板从以下来源加载我的 JS：

<script type="module" src="{% static 'main/js/index.js' %}"></script>

作为参考，我的完整路径如下所示：${workspaceFolder}/project/djangoprojectname/appname/static/main/js/index.js

disableNetworkCache 是可选的。

文档：https://github.com/microsoft/vscode-chrome-debug

disableNetworkCache：如果为 false，则不会禁用网络缓存。它被禁用默认。

【讨论】：