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

为什么我的JavaScript文件只在Chrome开发者工具中以捆绑包的形式显示?

JavaScript文件只在Chrome开发者工具中以捆绑包的形式显示的原因可能是因为在Chrome开发者工具中启用了"Enable JavaScript source maps"选项。JavaScript源映射是一种将压缩、混淆后的JavaScript代码映射回原始、易读的代码的技术。它允许开发者在调试过程中查看和调试原始代码,而不是压缩后的代码。

当启用了JavaScript源映射时,Chrome开发者工具会自动加载和显示源映射文件,将压缩后的代码还原为原始代码。这样做的好处是可以更方便地进行调试和排查错误。

然而,JavaScript源映射只在开发环境中使用,不应该在生产环境中使用。在生产环境中,应该使用压缩和混淆后的JavaScript代码以提高性能和安全性。

如果你不想在Chrome开发者工具中看到JavaScript文件以捆绑包的形式显示,可以在开发者工具的设置中禁用"Enable JavaScript source maps"选项。这样,你将只看到压缩后的JavaScript代码。

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

相关·内容

Electron 吞噬资源,微软 Teams 为性能改用 WebView2

但由于一切 Electron 应用程序后端都要运行属于自己 Chrome OS 实例,所以同时运行两个以上此类应用就会疯狂消耗主机资源。...于是, Electron 之上执行大量处理操作 Teams 也无法避免地疯狂占用内存、拖慢计算机速度。微软甚至专门发布了文档页面,解释为什么 Teams 内存占用量如此之高。...事实上,WebView2 控件还允许原生应用程序嵌入 Web 技术(包括 HTML、CSS 与 JavaScript)。...为什么选 Webview2 ? Teams 需要处理大量音频与视频内容,所以微软认为最好能把一部分工作负载转移给 WebView2 更擅长原生形式。...而对于使用共享 WebView2 运行时应用程序,版本维护则依靠 WebView2 自己更新程序,会类似 Chrome 或 Edge 方式独立于应用程序之外运行。

3.3K50

作为JavaScript开发人员,这些必备VS Code插件你都用过吗?

而这些功能,曾经像Eclipse或者Visual Studio 2017这样完整集成开发环境(IDEs)才有。 VS Code强大无疑来自于它插件市场。...VS Code插件种类 本文,主要介绍专门针对JavaScript开发者VS Code插件。有很多满足此条件VS Code插件,当然不会都作介绍。...相反,我会着重介绍那些已经相当流行而且对JavaScript开发者来说必不可少VS Code插件。为简单起见,把它们分为10类。...这里有一些工具,能极大地减少你开发时这种重复流程,而不是每次都手动刷新浏览器: Debugger for Chrome:在编辑器打断点,让你轻松地Chrome里调试JavaScript。...这里有一些针对测试VS Code插件: Mocha sidebar:利用Mocha库为项目提供单元测试。这个框架帮你直接在代码里跑测试,把错误信息装饰器形式显示出来。

2.8K10

前端科普系列(2):Node.js 换个角度看世界

2008年9月2日,V8 与 Chrome 同一天宣布开源。世界非同寻常方式发现了 ChromeChrome 是通过Google 早前发布漫画册传出去。...用户调查报告显示,受访使用者会用如下词语来描述 Node.js。 更为重要是,报告显示 Node.js 社区仍然快速成长。而这得益于 Node.js 应用场景非常广泛....这款包管理工具,或者说 npm,开始和 Node 安装捆绑打包,它可不是一个单独第三方插件,不需要你装完 Node 再去下载包管理工具。这块 Node 官方认证金字招牌一直挂到今天。...就是在这个时候,JavaScript 开发者们纷纷登场了,能用 JavaScript 实现某个工具,他们绝对不会看其他语言一眼!...所有 JavaScript 开发者都开始用 Node.js 做开发,而 npm 则成为每个 JavaScript 开发者日常工作不可或缺一部分。

90550

前端科普系列(2):Node.js 换个角度看世界

2008年9月2日,V8 与 Chrome 同一天宣布开源。世界非同寻常方式发现了 ChromeChrome 是通过Google 早前发布漫画册传出去。...用户调查报告显示,受访使用者会用如下词语来描述 Node.js。 ? (图片来源于网络) 更为重要是,报告显示 Node.js 社区仍然快速成长。...这款包管理工具,或者说 npm,开始和 Node 安装捆绑打包,它可不是一个单独第三方插件,不需要你装完 Node 再去下载包管理工具。这块 Node 官方认证金字招牌一直挂到今天。...就是在这个时候,JavaScript 开发者们纷纷登场了,能用 JavaScript 实现某个工具,他们绝对不会看其他语言一眼!...所有 JavaScript 开发者都开始用 Node.js 做开发,而 npm 则成为每个 JavaScript 开发者日常工作不可或缺一部分。

93910

仅仅过去 4 年,微软最终放弃了它!

但由于一切 Electron 应用程序后端都要运行属于自己 Chrome OS 实例,所以同时运行两个以上此类应用就会疯狂消耗主机资源。...于是, Electron 之上执行大量处理操作 Teams 也无法避免地疯狂占用内存、拖慢计算机速度。微软甚至专门发布了文档页面,解释为什么 Teams 内存占用量如此之高。...事实上,WebView2 控件还允许原生应用程序嵌入 Web 技术(包括 HTML、CSS 与 JavaScript)。...为什么选 Webview2 ? Teams 需要处理大量音频与视频内容,所以微软认为最好能把一部分工作负载转移给 WebView2 更擅长原生形式。...而对于使用共享 WebView2 运行时应用程序,版本维护则依靠 WebView2 自己更新程序,会类似 Chrome 或 Edge 方式独立于应用程序之外运行。

2.6K10

这些必备VSCode JavaScript插件你都用过吗?

而这些功能,曾经像Eclipse或者Visual Studio 2017这样完整集成开发环境(IDEs)才有。 VS Code强大无疑来自于它插件市场。...提供这种支持方式是多样,主要包括了为特定技术提供代码片段、语法高亮、Emmet以及智能提示功能。 本文,主要介绍专门针对前端开发者VS Code插件。...有很多满足此条件VS Code插件,当然不会都作介绍。相反,我会着重介绍那些已经相当流行而且对前端开发者来说必不可少VS Code插件。为简单起见,把它们分为10类。...Debugger for Chrome(在编辑器打断点,让你轻松地Chrome里调试JavaScript。源码(vscode-chrome-debug。 ) ? 2....这里有一些针对测试VS Code插件: Mocha sidebar(利用Mocha库为项目提供单元测试。这个框架帮你直接在代码里跑测试,把错误信息装饰器形式显示出来。)

5.7K10

向现代JavaScript转型——发布、传输和安装现代 JavaScript实现更快应用程序

随着越来越多 npm 转向现代 JavaScript,确保构建工具设置为能够处理它们很重要。您所依赖一些 npm 很有可能已经使用现代语言特性。...它还可以处理运行 Babel,并使用 Terser 单独针对现代和传统输出优化设置,使捆绑最小化。...最后,生成传统捆绑所需 polyfill 将提取到一个专用脚本,这样较新浏览器不会复制或不必要地加载它们。...Rollup 和 webpack 是高度可配置,这通常意味着每个项目都必须更新其配置依赖项启用现代 JavaScript 语法。...Devolution 是一个独立工具,可转换编译系统输出生成传统 JavaScript 变体,从而允许捆绑和转换采用现代输出目标。

2.7K185

前端根本不需要构建!“技术邪教” Ruby on Rails 之父再出激进言论引争议

JavaScript 框架造成类似问题还有很多,甚至开始拖累整个行业发展速度。”DHH Twitter 为例论述道。...“No Build”还具备其他一些奇妙功能,例如用户可以在任何网站上直接查看源,其内容不涉及任何源映射、不需要任何捆绑,它们就是开发出所编写文件,未必是编译纯 JS 文件。...“认为我们 No Build、 import map 和大约 100 个单独 JS 文件方面做得很好!我们发送 500kb 未压缩 JS,而 Gmail 则发送 10mb!”...DHH 表示,“我们目前最应该做是:现代 Web 应用程序构建过程,剔除一切形式 JS 捆绑或转译。当然,这样未来是等不来,我们应该从现在开始转换自己开发思路。”...导入映射时间并不比位于同一服务器上 RSC(构建步骤)和最小化捆绑(构建步骤)快。” “Chrome 删除了 HTTP/2 多路复用,它并不比捆绑更有效率。

24710

发布、传输和安装现代 JavaScript 实现更快应用程序

随着越来越多 npm 转向现代 JavaScript,确保构建工具设置为能够处理它们很重要。您所依赖一些 npm 很有可能已经使用现代语言特性。...它还可以处理运行 Babel,并使用 Terser 单独针对现代和传统输出优化设置,使捆绑最小化。...最后,生成传统捆绑所需 polyfill 将提取到一个专用脚本,这样较新浏览器不会复制或不必要地加载它们。...Rollup 和 webpack 是高度可配置,这通常意味着每个项目都必须更新其配置依赖项启用现代 JavaScript 语法。...Devolution 是一个独立工具,可转换编译系统输出生成传统 JavaScript 变体,从而允许捆绑和转换采用现代输出目标。

1K20

怎样为你 Vue.js 单页应用提速

Webpack 会为你将所有内容捆绑文件(HTML、JavaScript、CSS),最后可以用 nginx 来提供。至少,这是我们设置。但是 Webpack 会警告你某些资源太大。...延迟加载路由 构建 SPA 时,JavaScript 捆绑可能会变得很大,从而增加页面加载时间。如果我们可以将每个路由组成部分拆分为一个单独块,然后仅在访问路由时才加载它们,则效率会更高。... Network 标签,一旦你访问新路由,就会异步加载多个 JavaScript 文件开发模式下,每个块都将被赋予一个自动递增数字。在生产模式下,将使用自动计算哈希值代替。...可以通过使用浏览器开发者工具 Performance 标签来实现。 为了获得准确数据,我们必须在 Vue 应用激活性能模式。... Chrome ,“ Timings” 行显示重要标记,例如 “First Contentful Paint” 和 “First Meanfulful Paint” 时间。

2.8K10

Pyppeteer:比selenium更高效爬虫界新神器

现在你可以看到很多网站数据可能都是通过接口形式传输,或者即使不是接口那也是一些 JSON 数据,然后经过 JavaScript 渲染得出来。...但是,抓分析流方式,也存在一定缺点。 ? 一是:因为有些接口带着加密参数,比如 token、sign 等等,模拟难度较大; 二是:抓方式适合量小情况。...基于方便、便与管理考量,需要整理Pyppeteer工具类,提供给团队使用,下面是在工作整理一个简单工具类,共大家参考,由于内容有点多,大家可以去WX(crawler-small-gun),...默认为 True除非appMode或devtools选项True •executablePath (str):运行 Chromium 或 Chrome 可执行文件路径,而不是默认捆绑 Chromium...# 删除时候可能会删除失败(不知道为什么会出现权限问题,windows) 导致浏览器退出失败 # 然后chrome进程就会一直没有退出 CPU就会狂飙到99% "userDataDir":

2.2K41

轻量迅捷时代,Vite 与Webpack 谁赢谁输

而这也会导致一个不可避免情况,使用Webpack启动应用程序服务器,会花费比较长时间——一些大型应用程序可能需要10分钟以上。 此时你心里可能已经抓狂了,为什么会这么费时间?...基于Webpack工作流 当我们保存文件时,整个JavaScript将由Webpack重建,即使启用了HMR,我们进行修改可能也需要10秒钟才能在浏览器呈现。...Vite Vite是新一代JavaScript构建工具,旨在提高开发人员构建JavaScript应用程序时对Webpack体验。...Vite根据JavaScript生态系统中最近所做两项改进——浏览器ES模块可用性,以及esbuild等本机捆绑工具编译功能,为开发者提供更加强大支持。...Vite核心理念是非捆绑式开发建设。 浏览器ES模块可用性允许您在浏览器上运行JavaScript应用程序,而无需将它们捆绑在一起。

88820

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

多个月以来,和多个Github上社区贡献者一起建立支持库、,我们最终目的是希望完成这样一个作为起点模板,也就是基于把Typescript代码和Angular2宿主ASP.NET Core项目中...,这个模板包含一下这些方面: 服务端预加载(预渲染):这样你UI可以快速显示,甚至浏览器下载Javascript之前。...意义并不在于让支持哪些不运行javascript浏览器,它只是一种极端情况而已(如果为了这种极端情况,那还为什么要建立一个SPA应用呢?)...它真正意义在于: 它极大提高了用户体验:及时他们是一个较慢网络环境或者设备上,也可以很快看到你想显示给他们内容,在这背后,你可能又一个很大捆绑javascript正在下载、转换并且执行,...目前最兴盛modern javascript构建系统是Webpack,它类似Grunt和Gulp,但是2017今天(原文中是2016),Webpack是最流行typescript编译、捆绑和压缩工具

3.3K60

同一基准下对前端框架进行比较

表现 此程序需要多长时间才能显示内容并变得可用? 大小 应用有多大?我们只会比较已编译 JavaScript 文件大小。CSS 对所有变体都是通用,并从 CDN(内容分发网络)下载。...所有技术都编译或转换为 JavaScript,因此我们比较这种文件大小。 代码行数 作者根据规范创建 RealWorld app 需要多少行代码?...结论 大多数应用程序得分都高于90,性能方面,你可能感觉不到太多差异。 指标 #2:大小 传输大小来自 Chrome network 标签。GZIPped 响应头加上服务器提供响应主体。...这取决于框架大小和你添加额外依赖项,以及构建工具如何消除捆绑未使用代码。 简述 文件越小,下载越快,解析越少。 ? 传输大小KB为单位 - 越少越好 结论 这里发生了很多令人惊讶事情。...注意 Angular + ngrx: /libs 文件夹内完成代码行数计算,仅包括*.ts 和 *.html 文件。如果你觉得这是错,请告诉正确值是多少,以及你是如何计算

94120

您必须了解最佳开发者工具

本文来自: 原文链接: 25 Best Developer Tools You Can’t Do Withoutshanebarker.com 原文列了25个,因为篇幅有限,我们介绍前十个开发者工具...它还根据您代码消息提示框显示警告,错误和其他重要信息,以便您轻松进行故障排除。 还要别的吗? 该软件开发工具还有助于将资产目录汇编成有组织捆绑进行最终分发。...您可以使用主代码编辑器无缝访问工作区任何文件。...该工具内置Firefox,因此您无需下载任何其他应用程序。 Facebook for Developer Facebook开发者工具可帮助测试,创建和验证API(应用程序接口)调用和调试响应。...如需任何帮助,您可以联系他们支持团队。 Chrome DevTools Google Chrome浏览器内置了一组最好开发人员工具,称为Chrome DevTools。

1.4K20

深入了解加快网站加载时间 JavaScript 优化技术

本文中,将分享通过各种方法来优化 JavaScript 代码,包括最小化文件大小、减少网络请求、利用缓存和异步加载,以及采用最佳实践来确保更快加载时间和改进用户体验。...03、捆绑减少网络请求 减少网络请求数量对于提高网站性能至关重要,因为每个请求都会增加延迟并消耗带宽。 01)、捆绑说明 捆绑是将多个 JavaScript 文件组合成一个文件过程。...02)、捆绑工具 有几种流行工具可用于捆绑 JavaScript 文件,每种工具都有其独特特性和优势。...06)、浏览器开发者工具 大多数现代浏览器都带有内置开发人员工具,可以帮助你监控和优化网站性能。...通过了解最新最佳实践并监控你网站性能指标,可以确保你网站保持快速、高效和用户友好。 总结 今天文章分享了几种 JavaScript 优化技术,帮助你提高网站性能和用户体验。

21630

轻量级工具Vite到底牛在哪, 一文全知道

例如已经基本上将框架编译掉Svelte或是Snowpack,这些工具能够利用现代JavaScript功能(例如ES模块)来提供更平稳,更快速开发体验,几乎不需要配置,也不需要依赖于太多已安装软件。...package.json包含vite依赖和一些脚本来构建并启动开发环境。...此时修改任何项目文件内容都可以立即被看到。 运行npm run build,同时将项目编译到一个dist文件,可以在其中找到JavaScript和CSS文件,我们会发现这两个文件似乎都缩小了。...实际使用Vite令人惊叹,我们可以一两分钟内就建立一个非常高级堆栈,并且能够轻松完成从JavaScript到TypeScript转换以及从CSS到Sass转换。...按照说明进行操作之后,Vite会产生一个清单文件,其中包含有关所有产生捆绑软件信息。并可以读取此文件CSS和JavaScript捆绑,生成和标签。

4K40

新一代构建工具比较

某种程度上,认为这些工具出现是对 JavaScript 工具疲劳一种反应---- 在这篇关于2016年学习 JavaScript 文章很好地抓住了这一点。...Setup 设置 决定一种天真的方式启动 esbuild React 项目: npm 安装 esbuild、 React 和 ReactDOM。...尽管我们每次保存文件时都会重新绑定整个应用程序,但是 esbuild 变慢之前,我们需要有一个非常庞大应用程序。设置了这个工具之后,从更改得到了即时反馈。...认为 Snowpack 最神奇部分是配置文件设置一个看起来无害键值对。...先生 Snap Shot 应用程序是164KB,所以它创建比 Vite 创建两个 JavaScript 文件总大小小一点点。

2.3K20
领券