Home > Development Tools > VSCode > How to use vscode for breakpoint debugging

How to use vscode for breakpoint debugging

王林
Release: 2020-01-04 17:57:43
Original
14587 people have browsed it

How to use vscode for breakpoint debugging

目的:

在VSCode里,直接F5打开html页面,并且可以在编辑器里,进行断点调试js代码。

准备工作:

1、VSCode 软件

2、js项目

3、VSCode 上装一个插件:Debugger for Chrome

How to use vscode for breakpoint debugging

配置文件更改:

1、用VSCode装载项目

How to use vscode for breakpoint debugging

2、然后按F5,出现这个框,选择 Chrome

How to use vscode for breakpoint debugging

3、然后出现个配置的提示,并打开了launch.json这个文件

How to use vscode for breakpoint debugging

添加如下信息:

       {
            "name": "使用本机 Chrome 调试",
            "type": "chrome",
            "request": "launch",
             "file": "${workspaceRoot}/index.html",
        //  "url": "http://mysite.com/index.html", 
        //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
            "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", 
            // 改成您的 Chrome 安装路径
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
        //  "preLaunchTask":"build",
            "userDataDir":"${tmpdir}",
            "port":5433
        }
Copy after login

结果如图:

How to use vscode for breakpoint debugging

4、更改调试方式

如图:选择左边的圆形按钮,然后出来这个调试配置管理界面,选择“使用本机 Chrome 调试”

How to use vscode for breakpoint debugging

5、最后在项目的 js 处设置好断点,按 F5,就可以进行断点调试了。

How to use vscode for breakpoint debugging

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

The above is the detailed content of How to use vscode for breakpoint debugging. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template