首页
学习
活动
专区
工具
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:高级选项配置

1.9K30
  • 配置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

    45910

    使用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 可无缝调试浏览器了!

    在此之前,你想要在 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

    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

    Hello,Three.js | 快速开始

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

    26920

    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

    使用 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 国际许可协议 进行许可。

    1.9K30

    远程调试利用

    =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 进行桌面程序开发

    42610

    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

    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

    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
    领券