VScode如何逐步运行调试javaScript？

Posted 2023-04-23

例如使用VBA的时候，按F8是逐步运行，按F5是整体运行。
请问VScode如何逐步一行一行的运行，有没有什么快捷键？
如果VScode不能使用快捷键逐行调试javascript，请问有没有其它的写Javascript的程序可以使用快捷键逐行调试？

参考技术A nodejs 直接F5选择nodejs启动调试，网页的js直接使用Chrome自带的开发者工具（快捷键F12）调试。
调试期间F5整体运行（浏览器F8），F10单步调试，F11逐步调试（进方法内部）

如何在 VSCode 中调试 Django Javascript？

【中文标题】如何在 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，则不会禁用网络缓存。它被禁用 默认。