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

如何在chrome浏览器上用vs代码调试webpack?

在Chrome浏览器上使用VS Code调试Webpack,可以按照以下步骤进行操作:

  1. 确保已经安装了Chrome浏览器和VS Code编辑器,并且在VS Code中安装了Debugger for Chrome插件。
  2. 在VS Code中打开你的Webpack项目,并在项目根目录下创建一个名为.vscode的文件夹。
  3. .vscode文件夹中创建一个名为launch.json的文件,并在其中添加以下配置:
代码语言:txt
复制
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

上述配置中,url字段指定了Webpack项目运行的URL地址,webRoot字段指定了项目的根目录。

  1. 启动Webpack项目,并确保它运行在http://localhost:8080地址上。
  2. 在VS Code中按下F5键,选择Launch Chrome against localhost配置,然后点击调试按钮开始调试。
  3. Chrome浏览器将会自动打开,并且VS Code的调试工具栏会出现在顶部。你可以在VS Code中设置断点、单步调试等操作。

这样,你就可以在Chrome浏览器上使用VS Code调试Webpack了。

对于以上提到的技术和工具,以下是一些相关的概念和推荐的腾讯云产品:

  • Webpack:一个现代的JavaScript应用程序静态模块打包工具,用于构建复杂的前端项目。了解更多:Webpack官网
  • Chrome浏览器:由Google开发的一款流行的网络浏览器。了解更多:Chrome浏览器官网
  • VS Code:一款由Microsoft开发的免费开源的跨平台代码编辑器。了解更多:VS Code官网
  • Debugger for Chrome插件:VS Code的一个插件,用于在Chrome浏览器中进行调试。了解更多:Debugger for Chrome插件
  • 腾讯云产品:腾讯云提供了丰富的云计算产品和服务,包括云服务器、云数据库、云存储等。了解更多:腾讯云官网

请注意,以上答案仅供参考,具体的配置和推荐产品可能因个人需求和环境而异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

本文将向你展示如何在 VS Code 中创建匹配的调试器。 ? VS Code 调试完全攻略系列目录 ?...像往常一样,这个文件夹中的代码保持尽可能的简单,以便使我们把注意力集中在调试。在用于生产的应用程序中,我们将会使用人性化的文件夹结构。...Parcel 你可能想知道 Webpack 或 Babel 配置文件在哪里。好吧,没有!由于 Parcel 是一个零配置的打包程序,因此我们可以直接告诉它去编译代码,并且始终有效。...配置调试器 我们希望在调试时能够在 VS Code 中设置断点、启动调试浏览器、以及逐步调试获取初始列表和后续的远程请求。 为了使它尽可能简单和好用,我们将利用 launch.json 文件的优势。...type 和 request 参数告诉 VS Code 在新的 Chrome 窗口中开始调试。 第一次运行后,启动器的 name 将显示在调试工具栏和 IDE 的状态栏中: ?

4.5K20

ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在Webpack 开发中间件模块热拔插(HMR)

Webpack中间件集成:在开发期间,你不需要一直重新编译你的客户端项目,或者你可以一个watcher工具在后台帮你做这些事。...快速构建:对于开发来说,你不需要再等待再每次更改之后,webpack去重新解析第三方代码,因为第三方类库将会独立到另外的一个bundle中,另外,超快速的构建包含了所有的map文件便于调试,再发布版本的文件中却将直接输出压缩版本...服务器端预加载的意义何在? 意义并不在于让支持哪些不运行javascript的浏览器,它只是一种极端情况而已(如果为了这种极端情况,那还为什么要建立一个SPA应用呢?)...如果你的项目运行在VS默认开发模式下,webpack会在后台监控你每一个到http://yoursite/dist的请求,它处理每一个请求并且返回一个编译过的代码文件。...你可以通过打开控制才来观测它的工作,当VS开始调试浏览器控制台将会显示以下内容: ? 看到[HMR] Connected的字眼了吗?它代表已经准备好接收新的文件了,尝试更改一个源文件。

3.3K60

前端开发工具:助力创造精彩Web体验

代码编辑器 Visual Studio Code Visual Studio Code(简称VS Code)是一款免费、开源且功能强大的代码编辑器,由微软开发和维护。...VS Code提供了强大的代码自动完成、调试工具和集成的终端,是许多前端开发人员的首选编辑器。 2....浏览器开发工具 Google Chrome DevTools Google Chrome DevTools是一个内置在Google Chrome浏览器中的开发工具集,用于调试和分析网页。...npm还提供了许多有用的命令,构建、测试和发布代码。 5....构建工具 webpack webpack是一个强大的JavaScript模块打包工具,用于将多个模块、资源和依赖项打包成一个或多个最终的输出文件。它具有许多功能,代码分割、模块热替换和优化。

21950

Vue笔记:使用 VS Code 断点调试

直接在 Chrome调试窗口中调试 Vue 代码有诸多不便, 好在 Visual Studio Code 中提供了 Debugger for Chrome 插件,能够通过配置直接在 VS Code...断点调试代码, 并且在 VS Code 的调试窗口看到 Chrome 中 console 相同的值,这篇文章就来介绍一下这个配置过程。...1.开启 Chrome 远程调试端口 首先我们需要在远程调试打开的状态下启动 Chrome, 这样 VS Code 才能 attach 到 Chrome 。...3.创建 Debug 配置文件 点击 Visual Studio Code 左侧边栏的 调试 按钮, 在弹出的调试配置窗口中点击 设置 小齿轮, 然后选择 chrome, VS Code 将会在工作区根目录生成...点击 VS Code 左侧边栏的调试按钮,选择 Attach to Chrome 并点击绿色开始按钮,正常情况下就会出现调试控制条。 现在就可以在 vue 文件的 js 代码中打断点进行调试了。

2.8K20

调试】258- 前端调试各种收集-断点篇

只要找到源码,在脚本代码显示区域左边的数字添加断点即可,之后只要代码运行到断点处,开发工具就会进入调试状态。 注意:有的数字行是灰色的,就是不可断点。...在ChromeVS Code中调试Vue.js:此方法出处。这种方式使用VSCode的“Debugger for Chrome”扩展,推荐。...感觉就是上面的第一种方式,只不过将源码映射到本地源码,并在编辑器显示。简单介绍下步骤: 1.webpack配置:webpack配置添加devtool:'source-map'开启源码映射。...远程调试Chrome 附加浏览器的方式,不同于一种,修改代码后要刷新页面才能重新断点调试 待更新 断点方式四 这种方式归为调试nodejs,可以调试webpack配置,或者后端运行的node实例。...如果谷歌浏览器的开发工具做调试器,可以尝试插件nim,启动node或自动打开标签页。

2.3K30

关于vscode断点调试

很多人习惯在 Chrome调试窗口中调试 Vue 代码, 或者直接使用 console.log 来观察变量值, 这是非常痛苦的一件事,需要同时打开至少 3 个窗体。个人还是更加习惯于断点调试。...这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且在VS Code的调试窗口看到Chrome中console相同的值。...设置 Chrome 远程调试端口 首先我们需要在远程调试打开的状态下启动 Chrome, 这样 VS Code 才能 attach 到 Chrome : Windows 右键点击 Chrome 的快捷方式图标...设置 小齿轮, 然后选择 chrome, VS Code 将会在工作区根目录生成.vscode 目录,里面会有一个 lanch.json 文件并会自动打开 下面的配置文件覆盖自动生成的 lanch.json...现在就可以在.vue文件的js代码中打断点进行调试了。

1.8K20

设计和实现一个 Chrome 插件提升登录效率

前言 在我们的工作过程中,每当需要排查问题、跑冒烟例、看测试环境的效果时,经常需要在浏览器环境中切换登录账号,另外,在开发的过程中,也需要在编辑器 VS Code 里切换代理登录的账号。...本文将讲述一下如何在浏览器环境,扩展 Chrome 浏览器原有的“记住密码”功能,实现快捷登录、隔离账号信息以及备注标签等方便使用的功能,同时分享给测试、后端、产品等其他的伙伴,提高大家的效率,希望这次探索能给更多的人带来启发...它们在单独的沙盒执行环境中运行,并与 Chrome 浏览器交互。 扩展允许您通过使用 API 修改浏览器行为和访问 Web 内容来“扩展”浏览器。...美观的 UI 选型 由于原政采云登录页面是内部基于 AntD 开发的组件库,为了保持视觉风格的统一,我选择了继续使用我们内部的组件库,每个团队也可以根据自己情况选择自己的组件库,或者开源的组件库,...访问 chrome://extensions/,打开 开发者模式,点击 加载已解压的扩展程序,就可以选中我们本地的文件了,Edge 等浏览器也可以

1.5K10

从 Bundleless 看前端构建

为什么过去需要打包 这一问题在社区也有非常多的总结,概况来讲,主要包括以下理由: HTTP/1.1 各浏览器有并行连接限制 浏览器不支持模块系统( CommonJS 包不能直接在浏览器运行) 代码依赖关系与顺序管理...: 通过打包来减少网络请求数量从而提高性能的优化手段理论在 HTTP/2.0 下会变得不再必要; ESM 标准的推广和各大浏览器的支持: 让模块代码可以直接在浏览器中运行 原生的解决了代码依赖和复用的问题...img Snowpack vs Webpack 我们不妨将其与 Webpack 进行一个对比。 ?...至于调试体验,因为 Webpack 需要打包,因此在调试的时候我们依赖 SourceMap 来帮助我们看到源码。...但对于 Snowpack 而言(实际 Bundleless 模式都是如此),我们并不强依赖于 SourceMap,如果转译后的代码阅读无碍(ES6 其实还好嘛),就可以直接进行单文件调试

50610

webpack 插件开发】如何在vscode调试webpack源码

前言 ❝最近打算深入学习下webpack原理,打算翻翻源码,借此更新webpack系列的知识点,平时学习的底稿也挺多的,也该整理出来了 ❞ 暂定会更新以下知识点 如何实现一个webpack loader...如何实现一个webpack plugin 谈谈Tapable 实现一个简易的webpack debug webpack源码 如何在vscode调试源码 ❝先学会调试源码,在后面开发loader或者plugin...image.png 使用 chrome 浏览器调试 参考博客 首先再想要调试的地方添加代码:debugger; 在项目根目录下面运行命令:node-nightly --inspect ..../node_modules/webpack/bin/webpack.js 命令的参数含义,可以查看该链接:https://nodejs.org/en/docs/inspector 然后再浏览器中打开:chrome...://inspect 这个链接, 稍等一会儿,即可看到对应的调试链接 ?

1.4K10

前后端高效协作开发的11条建议

除非在一些不得不使用服务器端渲染的情况下(门户、电商等),应当尽量使用客户端渲染,因为客户端渲染更能使前后端分离(项目分离、代码解耦、协作分离、职责分离等),也能更好的做本地接口模拟开发,提升开发效率...、接口地址 http 方法、参数、headers、是否序列化 http 状态码、响应数据 接口文档可以一些文档服务( leanote(https://github.com/leanote/leanote...vConsole 一个轻量、可拓展、针对手机网页的前端开发者调试面板( chrome 开发者工具的便利实现)。 这个是内嵌的页面当中的便捷调试器,基本能够满足一般的需要远程调试的页面。...TBS Studio 因为微信浏览器是定制的浏览器,一般的远程调试方式都不可用,需要配合特定的工具,微信开发者工具。...TBS Studio(https://x5.tencent.com/tbs/guide.html) 是另一个可以像 Chrome 一样调试远程微信浏览器页面的强大工具。

73710

一文道尽JavaScript 20年的发展史

从这个意义讲,JavaScript非常不同。它没有编译器,没有调试器(至少不是很好的调试器), 没有办法“运行JavaScript程序”,除了在浏览器中编写脚本,并查看它们是否运行。...Comet vs Ajax之类的东西也有一些有趣的“绕行”幻灯片,这个辩论实际并不多(但提醒科技的流行趋势很好)。...所有Safari,Firefox和Chrome浏览器都有内置的开发工具(Firebug项目大多已被弃)。还有一些方法可以使用移动开发工具调试移动Web浏览器。...代替“调试器”,我们在我们最喜欢的浏览器中内置了devtools,例如Chrome或Firefox。这包括丰富的调试器,REPL /控制台和可视化检查工具。...这意味着未经修改的热点JavaScript代码可以由Node运行时和Chrome浏览器自动优化为本机代码

82330

「译」提升 Web 开发效率的 VS Code 扩展

Debugger for Chrome: 可以在 Chrome 浏览器中对 JavaScript 代码进行调试 版本控制 Git Lens: GitLens 增强了内置的 Git,它包含了大量功能,例如通过...Open in GitHub/Bitbucket/Gitlab/VisualStudio.com: 可以单命令在浏览器中开启仓库。...其它 Settings Sync: 可以将你的 VS Code 配置同步到 Github ,包括基础设置、热键和 VS Code 扩展。...Project Manager: 可以直接在 VS Code 中打开指向某个 Git 仓库的新窗口。基本,你现在可以在不离开 VS Code 界面的情况下打开任意一个仓库。...Code Runner: 在 VS Code 中运行代码,支持大部分编程语言。 Live Share: 允许你实时共享工作空间:实时编辑、固定并跟随用户指针、联合调试以及其它。

76921

VsCode 各场景高级调试技巧,有用!

URI 开发 Web 程序通常需要在 Web 浏览器中打开特定 URL,以便在调试器中访问服务器代码。...按F5调试,会自动打开浏览器,且会在下图所示处中断,当继续执行后,浏览器才能看到输出了server的内容 image.png 终局:各场景调试实战 调试NodeJS项目 关于NodeJs项目的调试方法...调试Typescript项目 调试TS项目前,先创建一个TS项目 # 终端运行 tsc --init 复制代码 VS Code 内置了对 Ts 调试的支持。...选择我们的启动命令 image.png 按F5可以正常唤起chrome浏览器,并在vscode的ts源码处会有debug效果 调试Vue项目的两种方式 下面介绍两种调试vue2项目的3种方法,其他框架的调试也类似...补充:更进一步 VS调试React app文档[5] VS调试Next.js文档[6] 更多...[7] 其他技巧 技巧一:代码片段(snippets) 从扩展商店中安装snippets @category

1.1K20

分享 10 多条超有用的 VsCode 各场景高级调试技巧

URI 开发 Web 程序通常需要在 Web 浏览器中打开特定 URL,以便在调试器中访问服务器代码。...按F5调试,会自动打开浏览器,且会在下图所示处中断,当继续执行后,浏览器才能看到输出了server的内容 image.png 终局:各场景调试实战 调试NodeJS项目 关于NodeJs项目的调试方法...调试Typescript项目 调试TS项目前,先创建一个TS项目 # 终端运行 tsc --init 复制代码 VS Code 内置了对 Ts 调试的支持。...选择我们的启动命令 image.png 按F5可以正常唤起chrome浏览器,并在vscode的ts源码处会有debug效果 调试Vue项目的两种方式 下面介绍两种调试vue2项目的3种方法,其他框架的调试也类似...补充:更进一步 VS调试React app文档[5] VS调试Next.js文档[6] 更多...[7] 其他技巧 技巧一:代码片段(snippets) 从扩展商店中安装snippets @category

1.7K40

超硬核 Web 前端学霸笔记,学完就去找工作!

VS 代码必须具有扩展名 Compile Hero - Compile Hero 是一款简单易上手用于一键编译 Less, Sass, Scss, Styl, TS, TSX, Jade, Pug 或...VS 代码大图标 - 通过应用适当的图标集来按类型直观地识别文件,从而组织环境。 占位符图像 - 诸如 unsplash.it 和 placehold.it 之类的服务非常有用。...Chrome 调试器 - 此扩展程序可让您从 VS Code 内部调试Chrome 浏览器中运行的 JavaScript 代码。...Microsoft Edge 调试器 - 在 Microsoft Edge 浏览器调试 JavaScript 代码 Firefox 调试器 - 在 Firefox 中调试 Web 应用程序或浏览器扩展...我可以使用 - 最新的浏览器支持表,用于支持台式机和移动 Web 浏览器的前端 Web 技术。 HTML Dog - 简单明了。

1.4K20

VSCode 调试网页的 JS 代码有多香

一般来说,调试 Node.js 跑的 JS 代码我会用 VSCode 的 debugger,调试浏览器的 JS 代码我会用 chrome devtools。...直到有一天我发现 VSCode 也能调试浏览器的的 JS 代码,试了一下,是真的香。 具体有多香呢?我们一起来看一下。...或者看下某个组件的 hooks 的值是怎么变化的(hooks 的值都存在组件的 fiberNode 的 memerizedState 属性): image.png 可以看到,调试 webpack runtime...调试 Node.js 的代码调试网页的代码同样的工具,经验可以复用,体验也一致。...调试 Node.js 我们一般 VSCode,而调试网页也可以 VSCode,那么只要用熟了一个工具就行了,不用再去学 chrome devtools 怎么,而且 VSCode 调试体验也更好,

4.9K10

如何从广度与深度衡量打包工具的好坏

缺点是灵活的配置造成上手成本高,遇到问题不易调试。 rollup 如果说webpack偏向应用打包,那rollup更偏向于库的打包。...其中,在浏览器环境中,node的一些核心库(events、stream、path...)会被打包成浏览器支持的版本。 缺点:缺少ESM标准的约束,在tree-shaking存在天生劣势。...是否支持不同上下文 浏览器中除了JS线程,还有worker线程(service worker、web worker)。 当使用了worker,打包工具是否会为不同上下文打包不同的文件?...大部分现代浏览器支持ESM规范。 Web Workers只有在chrome中支持ESM规范。 针对不同宿主环境,需要能打包出不同规范的产物。...我们知道babel可以将JS代码转换为AST,在此基础完成诸如: ES6转ES5 代码压缩 在这一步,打包工具是否能做的更优秀?

96230

2024年开发者必备:15款提升效率的VSCode插件精选分享

这样,不仅可以实时监控程序的行为,还可以深入了解代码是如何在不同环境中执行的。通过这种方式,初学者可以更快地学习并掌握复杂的程序行为和调试技巧。...支持 Webpack 树摇:与 Webpack 的优化特性兼容,帮助你更好地管理项目依赖。 配置灵活:可以根据需要配置显示的大小类型,压缩后的大小或 gzip 压缩后的大小。...Live Server 高度可定制,允许你设置首选的端口号、服务器根目录和默认浏览器。它支持使用高级命令行选项的任何浏览器,并提供 Chrome 调试附件以进行高级调试。...Live Server 扩展的主要优点包括: 自动浏览器重新加载:简化了前端开发的测试和调试过程。 高度可定制性:用户可以根据需要设置端口、根目录和默认浏览器。...高级调试支持:提供了 Chrome 调试附件,加强了调试能力。 广泛的文件支持:可以处理包括动态页面在内的任何文件类型。

4K20

前后端分离后的前端时代,使用前端技术能做哪些事?

前后端分离,不只是简单的代码的分离。 首先是要架构分离解耦,逐渐摆脱前后端在架构的依赖,前后端各司其职,分开部署在不同的服务器,通过RESTful接口传递数据。...Chrome APP Chrome浏览器运行的插件,是运行在Chrome的HTML应用,完全使用前端技术开发制作。...Chrome浏览器已经兼容Web VR,配合Daydream View,可以浏览Web VR页面。...工具 Sublime Text & Atom & Webstorm & VS code //编辑器、IDESVN & Git //代码管理、版本控制Chrome Dev Tools...& Webpack // 代码打包工具Babel // ES6、react等语法转换工具,将代码转换成ES5forever * pm2 // nodejs项目部署工具karma & mocha

2.2K30
领券