一直使用chrome中内置的调试器, 感觉世界那么美好, 自从学了react之后,使用visual code作为编辑器, 它提供了很多插件, 其中就包括debugger for chrome, 一款使用内置调试器来调试浏览器中网页的插件。于是打算折腾一下试试。

踩了很多坑, 配置lanuch.json, 运行一直失败, 原因就是因为该项目是由webpack构建, 需要先启动项目, 然后再启动调试器

1. 启动项目

npm start

只有项目启动后, 配置的lanuch.json才有效!!!

2. 配置lanuch.json

{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000", // 因为web-dev-derver默认打开的是此端口, 所以用url来指定调试该端口, 具体的端口和路径由你项目决定
"webRoot": "${workspaceFolder}" // 默认
}
]
}

3. F5启动调试 - 完成

在visual code的debugger for chrome中调试webpack构建的项目的更多相关文章

  1. 在 Chrome 中调试 Android 浏览器

    最近需要使用 Chrome Developer Tools 调试 Android 浏览器,但是官方指南并不是很好使,经过一番折腾,终于调试成功了,在此把经验分享给需要的朋友. Chrome Devel ...

  2. 利用Eclipse中的Maven构建Web项目(三)

    利用Eclipse中的Maven构建Web项目 1.将Maven Project转换成动态Web项目,鼠标右键项目,输入"Project Facets" 2.依据Dynamic W ...

  3. 利用Eclipse中的Maven构建Web项目报错(二)

    利用Eclipse中的Maven构建Web项目 1.错误描述 [INFO] Scanning for projects... [INFO] [INFO] Using the builder org.a ...

  4. 利用Eclipse中的Maven构建Web项目报错(一)

    利用Eclipse中的Maven构建Web项目 1.在进行上述操作时,pom.xml一直报错 <project xmlns="http://maven.apache.org/POM/4 ...

  5. 利用Eclipse中的Maven构建Web项目(二)

    利用Eclipse中的Maven构建Web项目 1.新建源文件夹,Java Resources鼠标右键,"New-->Source Folder" 2.新建src/main/ ...

  6. 利用Eclipse中的Maven构建Web项目(一)

    利用Eclipse中的Maven构建Web项目 1.新建一个Maven Project,"New-->Other..." 2.选择"Maven Project&qu ...

  7. vscode(Visual Studio Code)中安装Debugger for Chrome插件调试页面

    最近换了下编辑器,改用vscode(Visual Studio Code),很喜欢它左边显示的文件路径,轻松新建文件夹和文件,也喜欢它的编码转换功能,gbk和utf-8可以随时切换,因为公司网站有些页 ...

  8. 在 VS Code 和 Chrome 中调试

    先决条件 你必须安装好 Chrome 和 VS Code.同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本. 请通过 Vue CLI,遵循它的 REA ...

  9. 在桌面chrome中调试android设备中的web页面

    准备工作 1, 桌面版chrome 2, Android设备(安装有chrome浏览器) 3, Android-sdk Android-sdk安装及设置 SKD安装 从http://developer ...

随机推荐

  1. CentOS7安装OpenStack(Rocky版)-07.安装horizon服务组件(控制节点dashboard)

    在上一篇文章分享了neutron网络服务的安装配置,本文分享openstack的horizon(dashboard)web界面管理服务,方便在浏览器操作 ---------------------- ...

  2. word2vec 小测试

    Bag-of-words Model Previous state-of-the-art document representations were based on the bag-of-words ...

  3. 定义一组抽象的 Awaiter 的实现接口,你下次写自己的 await 可等待对象时将更加方便

    我在几篇文章中都说到了在 .NET 中自己实现 Awaiter 情况.async / await 写异步代码用起来真的很爽,就像写同步一样.然而实现 Awaiter 没有现成的接口,它需要你按照编译器 ...

  4. 原型设计 Axure8.1 软件注册码

    用户名:Koshy 注册码: wTADPqxn3KChzJxLmUr5jTTitCgsfRkftQQ1yIG9HmK83MYSm7GPxLREGn+Ii6xY

  5. 在VSCode中配置Eslint格式化

    在VSCode中配置Eslint 格式化时使代码保持Eslint语法规范 安装Eslint以及prettier美化插件 在VSCode配置设置项中添加如下代码 { "workbench.co ...

  6. 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 no-loop

    转载至:https://blog.csdn.net/wo541075754/article/details/75201934 no-loop 定义当前的规则是否不允许多次循环执行,默认是 false, ...

  7. 【JVM】jvm的jps命令

    jps -- Java Virtual Machine Process Status Tool 可以列出本机所有java进程的pid jps [ options ] [ hostid ] 选项 -q ...

  8. JNI学习笔记_Java调用C —— Android中使用的方法

    一.笔记 1.JNI(Java Native Interface),就是如何使用java去访问C/C++编写的那些库.若想深入了解JNI可以看官方文档jni.pdf.优秀博文:Android JNI知 ...

  9. Linux elasticsearch 安装 遇到的问题

    备注:我的 Linux 测试机  是2G 内存的 ,估计内存小于 我的内存肯定会出这个问题 .(安装的最新版6.3.2) 1.  下载文件  解压 2 .试着 运行 bin 下面的 elasticse ...

  10. QString和char字符串数组之间的转换 (转)

    做串口通信时,碰到这样的问题,在Qt的界面中,我用QLineEdit对象负责显示发送和接收的文本,对其中的数据进行读取和显示使用的数据类型都是QString:但是,在对串口设备进行读写时,数据使用的形 ...