首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Parcel和Edge铬进行VSCode的正确调试配置

Parcel和Edge铬是什么?

Parcel是一个快速、零配置的Web应用打包工具,它可以自动处理前端开发中的模块化、代码转换、资源引用等问题。使用Parcel可以简化前端开发的配置过程,提高开发效率。

Edge铬是指微软的Edge浏览器,它是一款现代化的浏览器,提供了丰富的开发者工具和调试功能,可以帮助开发人员进行Web应用的调试和测试。

如何在VSCode中正确配置Parcel和Edge铬进行调试?

  1. 首先,确保已经安装了VSCode、Parcel和Edge铬浏览器。
  2. 在VSCode中打开你的项目文件夹。
  3. 安装VSCode的插件"Debugger for Chrome",该插件可以帮助我们与Edge铬浏览器进行调试。
  4. 在项目根目录下创建一个名为".vscode"的文件夹,并在该文件夹下创建一个名为"launch.json"的文件。
  5. 在"launch.json"文件中添加以下配置:
代码语言:txt
复制
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Edge with Parcel",
      "url": "http://localhost:1234",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
  1. 在VSCode的底部状态栏找到调试按钮,点击选择"Launch Edge with Parcel"配置。
  2. 在终端中运行Parcel命令,启动开发服务器:
代码语言:txt
复制
parcel index.html
  1. 在Edge铬浏览器中访问"http://localhost:1234",即可开始调试你的应用程序。

Parcel和Edge铬的优势和应用场景是什么?

Parcel的优势:

  • 零配置:无需复杂的配置即可开始使用。
  • 快速打包:使用多核处理器并行打包,提高打包速度。
  • 自动转换:支持自动转换各种类型的文件,如CSS、JS、HTML等。
  • 资源引用处理:自动处理资源引用路径,无需手动配置。

Parcel的应用场景:

  • 前端开发:Parcel适用于各种规模的前端项目,可以帮助开发人员快速搭建开发环境。
  • 静态网站:对于简单的静态网站,Parcel提供了简单易用的打包工具。
  • 模块化开发:Parcel支持模块化开发,可以自动处理模块之间的依赖关系。

Edge铬的优势:

  • 现代化特性:Edge铬支持最新的Web标准和技术,提供了更好的性能和用户体验。
  • 开发者工具:Edge铬提供了强大的开发者工具,包括调试器、性能分析器等,方便开发人员进行调试和优化。
  • 兼容性:作为微软的官方浏览器,Edge铬与Windows操作系统紧密集成,提供了更好的兼容性和稳定性。

Edge铬的应用场景:

  • Web应用开发:Edge铬适用于各种Web应用的开发和调试。
  • 前端调试:Edge铬提供了强大的调试功能,可以帮助开发人员快速定位和解决问题。
  • 性能优化:Edge铬的性能分析工具可以帮助开发人员分析和优化Web应用的性能。

推荐的腾讯云相关产品和产品介绍链接地址:

腾讯云提供了丰富的云计算产品和服务,以下是一些与Parcel和Edge铬相关的产品和服务:

  1. 云服务器(CVM):提供了可扩展的虚拟服务器,可以用于部署和运行Web应用。产品介绍链接
  2. 云开发(CloudBase):提供了一站式的云端开发平台,可以快速构建和部署Web应用。产品介绍链接
  3. 云存储(COS):提供了可靠、安全的对象存储服务,可以用于存储和管理Web应用的静态资源。产品介绍链接

请注意,以上链接仅供参考,具体的产品选择应根据实际需求进行评估和选择。

相关搜索:如何使用PYTHONPATH和VSCode Python扩展进行调试?如何使用特定的语言配置调试vscode?使用vscode和wsl进行调试时找不到pipeTransport程序如何使CLion使用不同CMake配置进行调试和发布?使用带有调试模式的vscode和python中的多进程安装了自定义PHP7.2的Vagrant和使用火狐的VSCode无法进行调试,VSCode无法进入断点当使用XDebug进行调试时,如何定义PHP对象在VSCode中的显示方式?如何配置vscode live server以正确处理php文件(我使用的是Win10和Chrome)?如何使用不同的配置进行测试和部署?如何在vscode中设置调试器的构建配置(在flutter中使用不同的入口点)?使用visual studio 2019和cmake进行调试中的Yaml_cpp使用typescript、react和graphql以正确方式进行查询的问题在使用Windows 10和MINGW编译器的VS代码上使用gdb调试器进行调试时出错在使用vscode进行调试时,如何执行设置python虚拟环境的shell脚本(我需要对launch.json进行哪些更改)使用HTML表单,如何使用正确的GET/POST数据开始调试操作PHP脚本?(使用PhpStorm和XAMPP)MySQL/MariaDB:无法使用正确的权限和用户进行更改。不是密码问题在使用Gekko进行优化时,使用阶乘和值域函数的正确方式是什么?我如何配置我的angular库来使用正确安装的RxJS llinking来进行本地测试?将Identity Server 3配置为使用SPA进行授权码流的正确方法是什么?如何使用ts-node-dev和正确的行号在Visual Studio代码中调试Typescript代码
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

配置vscodePHP自动补全提示与使用Xdebug进行远程调试debug

默认下载安装完vscode并不能准确提示检测PHP语法错误,需要手动指定一下本机PHP程序路径。按下面的操作配置完后就能在文件保存时候检测语法有无错误。...": false, "php.validate.executablePath":"/usr/bin/php" } 配置PHP自动提示,我们并不能满足只是单纯检测语法,还需要能够自动补全代码类库提示...ext install felixfbecker.php-intellisense 使用vscode进行debug首先要安装xdebug,fpm把传递过来请求转发给本地vscode9000端口 apt-get...install php-xdebug 启用本地脚本调试 /etc/php/7.3/cli/php.ini: [XDebug] xdebug.remote_enable = 1 xdebug.remote_autostart...= 1 远程调试网站: 修改配置执行在线fpm中xdebug,remote_host是本机IP [XDebug] xdebug.remote_enable = 1 xdebug.remote_autostart

1.7K30

Edge 浏览器插件-Markdown Viewer 使用配置

需求 作为一个程序员,很多文档都是Markdown格式进行编辑了。包括各种资料文档都是这个格式。除了本地Markdown编辑软件外Typora (官网下载链接)。,我们还可以通过浏览器阅读。...推荐一个插件:Markdown Viewer 可以在本地浏览器上阅读它 有时候在浏览器上阅读,可能是一种更高需求。 安装 在微软edge插件商店,搜索Markdown Viewer 进行安装。...hl=zh-CN 配置 支持阅读本地md文件 通过设置打开这个配置。...进行配置 样式 THEME:md 文件显示主题 可以下拉选择各种Markdown 样式。决定了页面展示效果等等。...最上面 Markdown html 两种显示样式切换, DEFAULTS:恢复成默认状态。 wide: 宽屏显示, ADVANCED OPTIONS:高级选项配置

2K30
  • 配置VScode server 进行pythonCC++语言远程分析开发

    配置好之后左边会出现显示器小标志,名称为我们自定义腾讯云,当然你也可以叫chen's Lab,接着鼠标放到这会有个向右箭头,点击后进行远程连接 输入密码后,就可以通过VScode连接到linux服务器进行...python/C/C++程序设计开发 当然我们还需要安装插件,配置配置文件 2C/C++: 在拓展搜索以下插件并安装到服务器上 然后配置tasks.jsonlaunch.json文件,这个网上有详细教程...a.exe, -I/usr/include是添加包含文件目录, -lz是是告诉编译器链接 zlib 库(我之前调试应该是链接器找不到zlib库,就额外加了这个参数) launch.json:用于配置调试启动参数调试环境...这里有个很抽象事,我们使用这里编译运行时,明显可以看到gcc命令参数和我们前面配置.json文件不符。...(这个.json文件是我在另一台电脑上同样使用root账号登陆配置,这个问题我暂时还没找到解决办法) 幸好有个替代方案,使用调试界面的生成调试活动文件 3python: 在服务器安装code runner

    46810

    使用VSCode进行Go项目的调试以及Call Stack中Disassembly View解析

    作为一名Go开发工程师,我们可能已经熟悉了Go语言基本结构功能,但是有时候,当我们在深度调试一个问题,或者想要深入理解我们代码在执行时究竟发生了什么时,我们可能会需要使用调试工具,并查看Disassembly...本文将向你展示如何使用Visual Studio Code(VSCode)进行Go项目的调试,并深入理解Call Stack中Disassembly View。...Go项目的VSCode调试 要开始使用VSCode进行Go项目的调试,你需要确保你环境中已经安装了以下软件扩展: Go语言 Visual Studio Code Go扩展(由Google提供) 如果你已经准备好了这些...,那么我们就可以开始配置VSCode进行Go项目的调试了。...总结 通过以上步骤,我们已经学会了如何在VSCode配置Go项目的调试环境,以及如何使用Disassembly View。

    2.2K20

    VS Code 调试完全攻略(6):调试由 TypeScript 开发 React

    说到前端,我现在选择武器是 React、TypeScript Parcel trinity。这是一个简单、可靠而且高效设置,只需最少配置。...像往常一样,这个文件夹中代码保持尽可能简单,以便使我们把注意力集中在调试器上。在用于生产应用程序中,我们将会使用人性化文件夹结构。...程序在启动时获取文章列表,然后在单击标题时从服务器获取所选文章正文。 配置调试器 我们希望在调试时能够在 VS Code 中设置断点、启动调试浏览器、以及逐步调试获取初始列表后续远程请求。...launch.json 让我们打开 .vscode/launch.json 并关注 React + TS Parcel 部分: { "type": "chrome", "request...breakpoint bound 如果遇到 "Breakpoint set but not yet bound" 问题,请检查你 pathMapping 你可以在调试浏览器中找到正确路径。

    4.8K20

    VsCode插件之Live Serve探秘.(上)

    liveServer.settings.root注意:要在工作空间文件夹结构之间更改服务器根目录,请使用/来自工作空间绝对路径。 范例:/sub_folder1/sub_folder2。... chrome:私人模式 火狐 firefox:私人模式 微软边缘 大盘 默认值为 null [字符串,不是null]。(它将打开系统默认浏览器。)...如果值为true,请启动Live Server并从“调试窗口”中选择“附加到Chrome”以开始调试。Debugger for Chrome扩展程序将调试功能注入到浏览器窗口运行实例中。...默认: null 您可以使用“命令面板ctrl+shift+p”进行更改并输入Live Server: Change Live Server workspace 提示:您不需要设置此设置,Live Server...足够聪明,它将通过询问任何HTML文件来自动询问正确工作空间或自动设置正确工作空间。

    3.9K51

    史诗级更新,VSCODE 可无缝调试浏览器了!

    在此之前,你想要在 vscode调试 chrome 或者 edge 需要借助于 Chrome Debugger 或者 the Microsoft Edge Debugger extension 这两款...这是个什么功能 更新之后,我们可以直接在 vscode 中 open link in chrome or edge,并且「直接在 vscode 内完成诸如查看 element,network 等几乎所有的常见调试需要用到功能...(edge devtools) ? (debug console) 如何使用 使用方式非常简单,大家只需要在前端项目中按 F5 触发调试进行简单配置即可。...这里给大家贴一份 lauch.json 配置,有了它就可以直接开启调试浏览器了。...浏览器会根据收到 JSON 数据进行一些操作,从效果上来看「用户直接在手动在浏览器中操作并无二致。」

    1.9K40

    史诗级更新,VSCODE 可无缝调试浏览器了!

    在此之前,你想要在 vscode调试 chrome 或者 edge 需要借助于 Chrome Debugger 或者 the Microsoft Edge Debugger extension 这两款...这是个什么功能 更新之后,我们可以直接在 vscode 中 open link in chrome or edge,并且「直接在 vscode 内完成诸如查看 element,network 等几乎所有的常见调试需要用到功能...效果截图: (edge devtools) (debug console) 如何使用 使用方式非常简单,大家只需要在前端项目中按 F5 触发调试进行简单配置即可。...这里给大家贴一份 lauch.json 配置,有了它就可以直接开启调试浏览器了。...浏览器会根据收到 JSON 数据进行一些操作,从效果上来看「用户直接在手动在浏览器中操作并无二致。」

    1.4K20

    JS基础 | Cocos Creator 开发环境搭建

    一、 软件准备 Chrome:浏览器,用于预览、调试我们游戏 VSCode:代码编辑器,用于编写 JavaScript 代码 Nodejs:JavaScript 运行环境,主要用于我们学习 JavaScript...使用浏览器浏览网页,相信大家都不陌生,使用浏览器调试游戏代码,我们以后介绍,下面简单介绍一下 Node.js 与 Cocos Creator 这两个软件安装启动。...三、Cocos Creator Cocos Creator 是厦门雅基软件开发跨平台游戏引擎,支持在 Windows Mac 下进行游戏开发,下载地址: https://www.cocos.com...范例集合中有大量案例,演示了 Cocos Creator 引擎编辑器 API 使用,是我们学习 Cocos Creator API 接口极佳教材,建议初学者先将范例合集启动起来,将所有功能点都浏览一遍...合金;铬黄;谷歌浏览器; Node.js:Node.js 是一个基于 Chrome V8 引擎 JavaScript 运行环境。

    2.5K30

    Hello,Three.js | 快速开始

    仅代表个人推荐使用 VSCode 作为代码编辑器。如果你对VSCode不熟悉并希望安装使用它,请自行百度,如果有坑,请骂他垃圾~如果你有喜好代码编辑器。...但别人建议你切换到VSCode,请回复他:另外,为了方便地运行测试Web3D项目,还需要配置一个本地静态服务器,当然也可以不配置,你喜欢就好。...作为有经验且优秀有追求前端工程师,通常会告诉大家,在正式Web项目开发中,通常会使用Webpack、Vite等工具配置开发环境。但是,如果仅仅是为了学习Three.js,这样配置显然过于繁琐。...例如,可以安装名为 “Live Server” 插件,它可以轻松地启动一个本地静态服务器,供预览调试Three.js项目。 到此为止,以上这些都是废话。 以下均未干货!!!...✔️ 请确保你 NPM 配置中设置了正确代理设置。

    27120

    使用 dotnet 命令行配合 vscode 完成一个完整 .NET 解决方案编写调试

    在这个空文件夹中打开 VSCode,然后打开 VSCode 终端。...开始调试最简单程序 理论上,你按下 F5,选择 .NET Core 后就能自动生成调试所需 launch.json tasks.json 文件: 让你 VSCode 具备调试 C# 语言 .NET...Core 程序能力 如果不能生成所需文件,你可以使用以下博客中方法,手动添加这两个文件: 手工编辑 tasks.json launch.json,让你 VSCode 具备调试 .NET Core...可以考虑删除 bin obj 文件夹,然后输入以下命令自行编译: 1 > dotnet build 这个命令会还原 NuGet 包,然后使用 .NET Core 版本 MSBuild 编译你解决方案...本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。

    2K30

    远程调试利用

    =9222 Edge 进行远程调试 edge://inspect/ 如果用 Chrome 或其他浏览器调试,修改为对应语法 由于我们使用了默认 9222 进行远程监听,所以默认直接就识别出来了,...中 Chrome 中进行调试 chrome://inspect 虽然虚拟机中 Edge 浏览器调试端口是默认 9222 ,但是由于监听 Host 不在本地,默认不会在列表中,我们需要进行配置...Edge 调试 Edge —— 失败 使用 Chrome 调试 Chrome —— 失败 使用 Edge 调试 Chrome —— 失败 使用 Chromium 进行调试 —— 失败 使用虚拟机调试物理机...ws://0.0.0.0:9222 ,但是从系统监听端口可以看出,还是成功了 2) 远程调试 配置远程调试 host 端口信息 3) 配置 PoC 使用 MSF 生成 PoC msfconsole...Nodejs Chromium 结合起来开发桌面程序技术,其中 Nodejs 负责系统相关功能, Chromium 负责前端渲染,开发者可以直接使用前端三件套 html+css+js 进行桌面程序开发

    47310

    Linux下使用ip netns命令进行网口隔离配置ip地址

    有多个网口时,可以将两对网口直连,配置同网段ip,执行ping操作,验证隔离网口ip配置是否成功: ping -I eth2 192.168.1.2 知识点扩展:Linux查看ip命令详解 在Linux...ifconfig Linux查看IP地址命令--ifconfig ifconfig命令用于查看更改网络接口地址参数 $ifconfig -a lo0: flags=849 mtu 8232...,接口状态(up or down), 接口IP地址掩码等信息 更改网络接口IP地址: #ifconfig hme0 down #ifconfig hme0 211.101.149.233...netmask 255.255.255.0 up 首先,使用down命令参数把网络接口hme0服务暂时停止,然后再用Linux查看ipifconfig命令给接口分配新IP地址掩码,并启动网络接口服务也可以通过改变文件...下使用ip netns命令进行网口隔离配置ip地址,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家

    6.3K31

    Parcel Vs Webpack

    ,而不是所有组件都打包进去; 项目使用了Lodash库,用于检查构建是否有剔除无用代码能力(TreeShaking); 构建需要支持模块热替换功能,以提高开发效率; 支持SourceMap,以方便调试...让人眼前一亮 在用了很久Webpack后用Parcel感觉就像用了很久Android机后用iPhone,不用再去操心细节配置,大多数时候Parcel刚刚够用而且用很舒服。...Parcel还需要时间去打磨 通过以上项目实践,发现Parcel目前有如下明显缺点: 不支持SourceMap:在开发模式下,Parcel也不会输出SourceMap,目前只能去调试可读性极低代码;...; Parcel使用场景受限 目前Parcel只能用来构建用于运行在浏览器中网页,这也是他出发点专注点。...在软件行业不可能存在即使用简单又可以适应各种场景方案,就算所谓的人工智能也许能解决这个问题,但人工智能不能保证100%正确性。

    2.1K22

    懒人Parcel

    :性能配置经验,作者开始研究 Parcel 简介 Parcel 是一个Web应用程序 打包器(bundler) ,与以往开发人员使用打包器有所不同。...它利用多核处理提供极快性能,并且你不需要进行任何配置。 快速,零配置Web应用程序打包器。 特性 ? 非常快打包时间 - 多核编译,以及文件系统缓存,这样即使在重新启动后也能快速重建。 ?...脚本,样式,媒体其他 HTML 文件 URL 被提取编译,如上所述。引用被重写到 HTML 中,以便它们链接到正确输出文件。...这也意味着您不需要手动配置转换来包含排除某些文件,或者知道第三方代码是如何构建,以便在你应用程序中使用它。...在软件行业不可能存在即使用简单又可以适应各种场景方案,就算所谓的人工智能也许能解决这个问题,但人工智能不能保证 100% 正确性。

    2K10

    0544-CDSW1.5新功能

    6.安装升级 新配置参数 - 1.5包括三个新配置参数,可用于指定正在运行分发版类型,已安装软件包/parcel目录以及安装Anaconda路径(仅适用于HDP)。...检查DNS正向反向查找是否适用于所提供CDSW域Master IP地址。 cdsw statuscdsw validate命令错误信息显示会更友好,以便于调试。...根据你部署,使用以下方法之一配置此属性: CSD部署:如果你使用是默认parcel目录/opt/cloudera/parcels,则无需执行任何操作。...如果要自定义parcel目录,需要在Cloudera Manager中进行配置,具体参考CM相关文档。...如果要自定义parcel目录,需要在masterworker节点cdsw.conf文件中配置DISTRO_DIR属性。更改后运行cdsw restart。

    1.2K30

    07·灵魂前端工程师养成-HTML重难点

    MacBook-Pro:html-demo-2 driverzeng$ yarn global add parcel 写一个a标签,设置超链接,此时会直接在当前窗口打开新页面。...标签 查看 在VScode中,输入p{$}*30就可以瞬间出现1-30数字,竖着排列在页面上,我们来测试下面功能... 如果我们再点开博客就会在百度所在那个窗口中,打开博客  此时,我们打开网页调试,在console中输入window.name就可以看见当前窗口名字  ---- 将窗口开在iframe...表格及单元格宽度取决于其包含内容。 说白了,就是根据字数自动调整宽度,根据内容来调整。 fixed 表格宽度通过表格宽度来设置,某一列宽度仅由该列首行单元格决定。...,图片都会自动调整大小   form 标签 ---- 作用 作用img差不多,发送get或者post请求,然后刷新页面 ---- 属性 1.action action后面填写是,需要请求页面

    1.4K30
    领券