首页 学海无涯 开发工具 Visual Studio Code中调试JavaScript
Visual Studio Code中调试JavaScript
摘要 本文介绍如何在VSCode中启动静态页面以及断点调试JavaScript。

一、安装Debugger for Chrome扩展插件 


二、配置运行环境

最左侧菜单找到调试(一个虫子样图标),点击下图中红色标注或者直接按F5


然后出现下图所示:


选择Chrome,会生成Launch.json文件:

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "运行 Chrome 打开 localhost",
            "url": "http://localhost:8080/src",
            "webRoot": "${workspaceFolder}"
        },//访问localhost:8080/src
        {
            "name": "运行 Chrome 打开 index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceFolder}/html/index.html"
        }//访问静态文件index.html
    ]
}

上面两种配置分别是访问url和文件。

注意:VSCode不会提供Web服务器的环境,需要我们用其他Web服务器(IIS、Nginx等)部署到localhost才能访问对应的url。

如果不需要部署到localhost,可以使用第二种配置,直接访问静态页面。

三、选择运行环境


四、按F5运行程序,在VS Code设置断点并调试


版权声明:本文由不落阁原创出品,转载请注明出处!

本文链接:http://www.leo96.com/article/detail/50

来说两句吧

该文章已禁止评论

最新评论

暂无评论,大侠不妨来一发?