如何在 VSCode 中调试 Django Javascript？

Posted 2023-02-23

【中文标题】如何在 VSCode 中调试 Django Javascript？

【英文标题】：How to Debug Django Javascript within VSCode?

【发布时间】：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 ^^。

谢谢！！

【问题讨论】：

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

【参考方案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，则不会禁用网络缓存。它被禁用 默认。