登录  /  注册
首页 > 开发工具 > VSCode > 正文

怎么在vscode中调试js代码

王林
发布: 2019-12-14 15:35:54
原创
3509人浏览过

怎么在vscode中调试js代码

在左侧扩展中搜索debugger for chrome并点击安装

e31a528d75381051fcf10b816ad42e9.png

在自己的html工程目录下面点击f5,或者在左侧选择调试按钮

a3bbd756a67caf668f7f566866bb2f7.png

选择下拉按钮,会有一个添加,选择chrome

981602aac868436199a77f60835db70.png

之后会出现laungh.json的配置文件在自己的项目目录下面

e6c69e1c99a53c77770ba25067aa632.png

不过对于不同的代码文件要调试的话,每次都需要修改一下配置文件

{
    "version": "0.2.0",
    "configurations": [{
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/jsTest/test1/test1.html"  #每次需要修改这里的文件地址
        }
    ]
}
登录后复制

到这里就可以进行调试了,在

7900ce3736af4ee8597dbc9da12ad8c.png

中选择 Launch index.html (disable sourcemaps) 调试项,按f5调试,会出现,同时打开goole浏览器,点击

f74a7cd3ce203fb694e13a46565fabe.png

即可进入调试阶段。

相关文章教程推荐:vscode教程

以上就是怎么在vscode中调试js代码的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号