zoukankan      html  css  js  c++  java
  • VSCODE 中下断点调试JS(非常适合后端开发调试前端代码)

    我是一名后端.NET开发人员因业务需求需要开发前端,习惯了下断点F11,F10调试代码的过程,突然让我看JS让我很不适应,因此这里我主要介绍两种下断点调试JS的方法。

    方法一:Chrome内置断点功能调试JS

    命中断点后,再按下URL栏左边的小圆圈即可下断点调试。

     

     方法二:

    VSCode下安装Debugger for Chrome(安装过程不再介绍,网上一堆自行百度)

    这里主要介绍的是launch.json文件的修改(网上很多关于这个文件的修改但是我试过很多都不行。。。这里我献上自己亲自测试通过的修改方法):

    {

        // 使用 IntelliSense 了解相关属性。 

        // 悬停以查看现有属性的描述。

        // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387

        "version": "0.2.0",

        "configurations": [

            {

                "name": "Attach to Chrome",

                "port": 9222,

                "request": "attach",

                "type": "pwa-chrome",

                "webRoot": "${workspaceFolder}"

            },

            {

                "type": "chrome",

                "request": "launch",

                "name": "Launch Chrome against localhost",

                "url": "http://localhost:8080",

                "webRoot": "${workspaceFolder}"

            },

            {

                "name": "使用本机 Chrome 调试",

                "type": "chrome",

                "request": "launch",

             //这里一定要注意!!!网上很多这边写的都不对,后来一个一个试觉得这样是最简单也是最方便的(这里的意思是指运行你当前打开的文件,有些博客写的是写死文件的路径其实没必要)

                "file": "${file}",//${workspaceRoot}

            //  "url": "http://mysite.com/index.html",

            //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html

       //这边大部分人Chrome的路径都不需要修改如果你不是Chrome或者安装在D盘需要自己改一下

                "runtimeExecutable": "C:\Program Files\Google\Chrome\Application\chrome.exe",

                "sourceMaps": true,

                "webRoot": "${workspaceRoot}",

            //  "preLaunchTask":"build",

                "userDataDir":"${tmpdir}",

                "port":5433

            }

        ]

        

    }

    然后!!!

     

    就成功啦!!!

     

  • 相关阅读:
    spring bean 循环依赖问题,在本地环境可以,测试环境报循环依赖问题
    mac 使用
    TCP状态
    Flink 学习 — Flink JobManager 高可用性配置
    Flink 学习 — Flink 写入数据到 Kafka
    Flink 学习 — 上传Flink 项目JAR运行
    Flink 学习 — Flink 写入数据到 ElasticSearch
    Redis持久化原理 — RDB与AOF详细解释
    Flink 学习 — Flink 中几种 Time 详解
    Flink 学习 — Flink中的Stream Windows介绍
  • 原文地址:https://www.cnblogs.com/jyj666/p/13841710.html
Copyright © 2011-2022 走看看