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

Angular 12调试源代码在Chrome开发者工具中不可用,在Angular 11中也没问题

Angular是一种流行的前端开发框架,用于构建现代化的Web应用程序。Angular 12是Angular的最新版本,而Angular 11是之前的版本。

在Chrome开发者工具中调试Angular 12的源代码不可用可能是由于以下原因之一:

  1. 版本兼容性问题:请确保你使用的Chrome浏览器和开发者工具版本与Angular 12兼容。有时,新版本的Angular可能需要更新的Chrome浏览器或开发者工具才能完全支持调试功能。
  2. 代码编译问题:Angular应用程序的源代码在运行之前需要进行编译。请确保你的Angular应用程序已经成功编译,并且生成的JavaScript文件与你在Chrome开发者工具中查看的代码一致。
  3. 代码映射文件问题:在调试过程中,源代码映射文件(source map)非常重要,它们将编译后的JavaScript代码映射回原始的TypeScript源代码。请确保你的Angular应用程序生成了正确的源代码映射文件,并且在Chrome开发者工具中启用了源代码映射。
  4. 错误配置或插件问题:检查你的Angular项目的配置文件和插件,确保没有禁用或阻止了源代码调试功能。

如果在Angular 11中没有问题,但在Angular 12中出现了调试源代码不可用的问题,可能是由于Angular 12的一些新功能或更改导致的。在这种情况下,你可以尝试以下解决方法:

  1. 更新开发者工具:确保你使用的Chrome浏览器和开发者工具是最新版本,以支持Angular 12的新功能和更改。
  2. 检查更新日志:查看Angular 12的更新日志,了解是否有关于调试功能的特定更改或修复。可能有一些已知问题或解决方案可以帮助你解决问题。
  3. 提交问题报告:如果你确定问题不是由于配置或插件问题引起的,并且无法通过其他方法解决,可以向Angular开发团队提交问题报告。他们可能会提供更多的帮助和指导。

总之,调试Angular 12的源代码在Chrome开发者工具中不可用可能是由于版本兼容性、代码编译、源代码映射文件或配置问题引起的。通过更新工具、检查更新日志和与开发团队沟通,你可以尝试解决这个问题。

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

相关·内容

Vs Code推荐安装插件

前言:   Visual Studio Code是一个轻量级但功能强大的源代码编辑器,轻量级指的是下载下来的Vs Code其实就是一个简单的编辑器,强大指的是支持多种语言的环境插件拓展,也正是因为这种支持插件式安装环境开发让...查找并修复JavaScript代码中的问题: 拓展名称:ESLint 拓展描述:ESLint 是一个代码规范和错误检查工具,有以下几个特性 1、所有东西都是可以插拔的。...流程图神器-Drawio: 拓展名称:Drawio 拓展描述:在Vs Code中预览绘图图文件。...对.NET Core(CoreCLR)的调试支持。注意:不支持Mono调试。桌面CLR调试的支持有。限。在Windows,macOS和Linux上支持project.json和csproj项目。...Vs Code Chrome调试器: 拓展名称:Debugger for Chrome 拓展描述:在Chrome浏览器或任何其他支持Chrome Debugger协议的目标中调试JavaScript代码

2.2K30

Chrome开发者建议你这样调试web应用

❝本文来自 Chrome 团队的 Jecelyn Yeen (阮贝琪)在FEDAY分享,主题为:探讨网页调试的现况、Chrome DevTools 的最新进展以及一些实用的 DevTools 小工具。...现代Web开发中常见的工作流 但目前浏览器还是只能识别HTML、CSS和JavaScript,导致构建过程就需要如构建、压缩和翻译等;这样开发时使用工具和语法,与浏览器可以理解的标准差别越来越大;就使得调试也变得异常复杂...开发者便可以快速确定经过缩减的代码与原始代码之间的关系,从而使调试过程更加顺畅,有助于您直接在浏览器中更快地查明调试问题。 ❝源代码映射最重要的方面是 mappings 字段。...mock请求 录制器Recorder 在开发者工具中可以使用录制器,进行录制网页操作还可以进行回访和分享 可以应用到bug的复现和问题定位;具体使用方法可参考: 录制和播放 可以删除和编辑事件 为录制的文件代码...代码段Snippets 可以在浏览器中定义些代码片段,比如时间戳格式化、URL的编解码等常用工具函数,在任何页面中运行可以script代码 cmd/win + p,输入 !

8510
  • 前端开发:这10个Chrome扩展你不得不知

    转载请注明出处 葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。...也许您会感到奇怪,Chrome本身的开发者工具不是已经足够了吗,为什么我还要用它? 其实这个插件比我们浏览器中的开发者工具显示的信息更多也更先进。...Auury是由Rangle.io构建的DevTool扩展,用于调试、分析和优化Angular项目。...如果您是Angular开发人员,并且没有在您的DevTool中使用过Augury,那么这是件很可惜的事情。Augury有着您直接从浏览器调试Angular应用程序所需的一切,来试试吧。 3....在浏览网页时,通常吸引我眼球的是页面中正在使用的字体。当我对某个文字感兴趣想要查看其使用的字体时,我会下意识地单击鼠标右键以打开开发人员工具,查看它的源代码。但是,这样还是太繁琐了。

    2.4K10

    前端大牛们都学过哪些东西?

    Chrome, Firebug, Filddle 调试 Simulator Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得 浏览器端调试安卓 移动端前端开发调试 使用 Chrome...使浏览器变成IDE network面板 chrome开发工具快捷键 chrome调试工具常用功能整理 Chrome 开发工具 Workspace 使用 Chrome神器Vimium快捷键学习记录 sass...调试-w3cplus 如何更专业的使用Chrome开发者工具-w3cplus chrome调试canvas chrome profiles1 chrome profiles2 chrome profiles3...chrome移动版调试 chrome调试 chrome的调试 chrome console 命令详解 查看事件绑定1 查看事件绑定2 神器——Chrome开发者工具(一) 奇趣百科性能优化(Chrome...DevTools 中的 Timeline Profils 等工具使用介绍) chrome 开发者工具的 15 个小技巧 Chrome开发者工具不完全指南 Chrome 开发者工具使用技巧 Fiddler

    5K30

    Angular Service入门

    1.Angular内置service Angular为了方便开发者开发,本身提供了非常多的内置服务。...在企业级开发中,常用的服务有以下这些: $cacheFactory 缓存服务 $compile 编译服务 $filter 通过 $filter 服务可以格式化输出数据,也可以对数据进行过滤操作 $http...和Chrome浏览器的console.log()、console.debug()等类似 $q 服务主要是用于异步函数返回一个promise,在路由中resovle属性用的较多 $rootScope 一个应用只有一个...$rootScope,该服务可以用于每个页面都需要使用的公共数据或者变量,但是开发过程中,建议尽量少用 $rootScope,调试起来不方便。...Service的使用 在实际开发过程中,我们需要对自己的服务进行增加一下方法,或者对引入的第三方服务增加一下方法,开发者可以不需要修改之前的源代码,而是可以在运行时为Service增加方法。

    1.2K100

    教程|在 Angular 4 中加载功能模块(下)

    您的任务是将新模块合并到主应用程序中。 从应用程序源代码中解压 Angular4LazyLoadModules 文件(位于 Angular4TutorialSrc.zip 中)。...幕后过程 在继续操作之前,我们看看此加载机制的细节。首先在 Chrome 浏览器中运行该应用程序。在 Windows 机器上,按下 Fn+F12。在 Mac 上,按下 Command->alt->i。...单击 Weather 或 Currency 链接前,查看下面的图 11 (第 1 列)和图 12(第 1 列)。 图 11. 测试和调试期间可用的源代码 ? 图 12. 网络相关信息 ?...参见图 11(第 3 列)和图 12(第 3 列),您现在应看到 Weather 模块 (module(x.chunk.js)) 也已加载。...在 Chrome 浏览器中重新加载该应用程序,然后转到 Chrome 开发人员工具的 Network 和 Sources 选项卡。

    2.3K10

    前端框架之争丨除了Vue、Angular和React还有谁与之争锋

    React相关工具很多,该团队提供的CLI用于便捷搭建一个新项目,工具扩展适用于Chrome和Firefox的。...从相关工具的角度来说,Angular提供了高度完善的CLI来初始化,开发,构建和维护其应用程序,还有Chrome和Firefox Dev Tools扩展可用于调试Angular应用程序。...从相关工具的完整程度来讲,一方面官方的CLI可以创建脚手架和开发Vue应用程序,此外devtools扩展可用于Chrome和Firefox来帮助调试。...它避开虚拟DOM的概念,在构建期间将代码编译到小型原始JavaScript模块中,开发者的应用程序状态更改该模块随之更新DOM。实现了体积小速度快的应用。...Ember与Angular类似在应用程序开发中采用更多包含电池的方法,并提供构建现代前端JavaScript应用程序所需的一切。遵循六个星期的发布周期且稳定性极好。

    1.5K30

    现代 Web 应用 Devtools 调试技巧

    今天继续来为大家解读今年的 Google I/O 在本章节中,我们将会一起来学习一些新的 Chrome Devtoos 特性,来帮助我们更好的调试现代 Web 应用。...这也使开发者工具必须作出相应的变化。 img SourceMap 发明出来了,Babel 和 webpack 这样的编译器和打包工具也开始出现,Beta 框架也流行起来了。...例如,React DevTools、Angular DevTools、Flutter DevTools 等大型框架甚至建立了自己的开发者工具。 img 绝大多数 Web 开发者至少使用一个大型框架。...在现在的 Web 应用程序中,很多可能至少10种不同的工具和框架结合在一起创造了最终的 Web 体验。...img 去年,Chrome DevTools 引入了 Authored 和 Deployed 视图的概念,它们可以分别把开发视角的源代码文件以及部署视角的产物文件分类管理: img 我们只需在 DevTools

    31810

    Angular 工具篇之VSCode调试

    对于很多 Angular 的开发者来说,VSCode 是他们手中一把利器。此外对于大多数前端开发者来说,他们手中还有另一把利器,那就是 Chrome 浏览器。...接下来,我们将介绍一下在 VSCode 中如何利用 Chrome 浏览器调试 Angular 应用。...4200,所以我们需要更新一下 launch.json 文件中默认的 url 配置: "url": "http://localhost:4200" 最后我们就可以进入调试面板,点击运行按钮开始调试 Angular...上面我们已经介绍如何使用 VSCode 和 Chrome 调试 Angular 应用程序。其实除了 Chrome 浏览器之外,在 VSCode 中我们也可以使用 Firefox 或 Edge 浏览器。...跟之前一样,在调试前我们也得安装对应的扩展:Debugger for Firefox 和 Debugger for Edge。

    1.9K10

    angular入门教程_初学者织围巾简单教程慢动作

    课程介绍 本课程是一个系列基础教程,目标是带领读者上手实战,课程以新版本 Angular 的 3 个核心概念作为主线:组件、路由、模块,加上业务开发过程中必须用到的特性:工具、指令、表单、RxJS、...@angular/cli 在开发 Angular 应用的时候,当然也离不开大量基于 NodeJS 的工具,我们需要 TypeScript compiler、webpack、Karma、Jasmine、...Sublime Text 插件很多,可惜要收费,而国内的企业还没有养成花钱购买开发工具的习惯。 Chrome 的开发者工具很好用,但是要直接调试 TypeScript 很麻烦。...对于 Angular 开发者来说,当然要强烈推荐 VS Code。最值得一提的是,从1.14开始,可以直接在 VS Code 里面调试 TypeScript 代码。...小结 目前,无论你使用什么前端框架,都必然要使用到各种 NodeJS 工具,Angular 也不例外。

    3.3K20

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

    另外,它还提供了如代码智能提示等开发者非常需要的功能。而这些功能,曾经只在像Eclipse或者Visual Studio 2017这样的完整集成开发环境(IDEs)中才有。...VS Code插件的种类 在本文,我主要介绍专门针对JavaScript开发者的VS Code插件。有很多满足此条件的VS Code插件,当然我不会都作介绍。...这里有一些工具,能极大地减少你开发时的这种重复流程,而不是每次都手动刷新浏览器: Debugger for Chrome:在编辑器中打断点,让你轻松地在Chrome里调试JavaScript。...React Native Tools:为React Native框架提供代码智能提示、命令行工具和调试特性。 Vetur:为Vue框架提供语法高亮、代码片段、Emmet、代码检测、智能提示和调试支持。...像ESLint这样的插件,帮助你避免代码中的常见错误;Debugger for Chrome,帮助你更容易地调试代码;带有智能提示的Node.js插件帮助你正确引用模块;像Live Server和REST

    2.9K10

    教程|在 Angular 4 中加载功能模块(上)

    对根模块始终采用贪婪加载,在一些情况下,也会对其他功能使用贪婪加载。 惰性加载:随着应用程序的功能区域的构建,应用程序的大小会不断增加。...前提条件 要掌握本教程,需要在开发机器上安装两个工具: Node Angular CLI 输入命令 ng -v,以便找到您当前使用的 Angular CLI 和 Node 的版本。...如果尚未下载源代码,请下载它。 2. 将 Angular4BaseModules 源文件(位于 Angular4TutorialSrc.zip 中)解压到一个空目录位置。我的目录名为 …/fm。...在 Windows 机器上,按下 Fn+F12。在 Mac 机器上,按下 Command->Option->i。现在您会看到 Chrome 开发人员工具 GUI。...如图 7 所示,您会看到在重启应用程序时自动加载了 AppModule 和 BaseModule。 图 7. 在 Google Chrome 开发人员工具中查看源代码 ---- 小手一抖,资料全有。

    2.2K10

    ASP.NET Core知多少(6):VS Code联调Angular + .NetCore

    开发工具:Visual Studio Code 安装最新.Net Core SDK,目前版本V2.1.101。 3....其中launch.json用于配置调试相关参数。tasks.json用于配置默认的构建任务。 如果没有弹出上图弹窗,我们也可以按下图步骤添加。 ?...打开launch.json点击添加配置,然后选择**Chrome:Launch**,就会添加在配置文件中添加一个节点,如下所示: { "type": "chrome", "request...我们需要要先启动项目,再选具体的某个调试配置进行调试。即同时只能调试Angualr和.NetCore中的一个。那如何二者联调??? 5....回到调试界面,选择.NetCore+Chrome,F5运行,就可以同时在angular和.net core代码中断点并调试。如下图所示: ?

    1.7K80

    2023 年度 JavaScript 框架和技术排行榜

    在95名开发者参加的测试中,45名使用了 Copilot 的开发者用时比没有使用 Copilot 的开发者少了55%。...前端框架 React 占据主导地位,Angular 在就业需求方面表现不错,但在开发者满意度方面表现欠佳。其他框架远远落后。 今年,我们看到了一些新的前端框架。...Angular 和 Gatsby 还有很大的提升空间,其他选项的数据不可用。 状态管理 Redux 仍然占据前端状态管理的绝对领先地位,没有其他替代品可以媲美。...以下是过去30天中各个区块链在NFT体积方面的排名: 默认安全 2018年,Chrome 宣布将开始将 HTTP 网站标记为“不安全”。自那时以来,安全默认只变得更加重要。...React.js也将继续保持强劲的势头。作者还介绍了其他流行的框架,如Angular和Ember。

    2.2K20

    便捷自动的访问Google 开发者资源网站

    幸运的是,今天在浏览Google官方博客的时候,发现他们开发了一个 Google Chrome 插件,安装之后,可以让我们在访问访问外国网站站点的时候,自动替换为对应的中国开发者站点,比如访问developers.google.com...从其源代码实现中可以看出,它目前支持developers.google.com,firebase.google.com,developer.android.com,angular.io这几个域名的自动替换..." : "//angular.cn", } 不过还有一些这些域名下没有CN镜像的站点,所以作者又做了一个白名单机制,在白名单内的URL不会被替换,即使他们是属于这几个域名下的。...从其实现来看,非常简单,可能稍微涉及一些 Google Chrome 插件开发的知识,不过也不太难。...根本上来看,这是一个非常不错的,利用工具提高效率,减少重复劳动的例子,我们在工作中,生活中,也可以多使用这种方式,多借助工具,减少我们的重复劳动,提高我们的工具效率,把我们的时间和精力多放在创造性的工作上

    2.1K30

    用Visual Studio Code写Node.j

    介绍 vsc的宣传语是: 一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。 按它说的,vsc特别适合来作为前端开发编辑器。...在项目中引入对应文件,就可以有智能提示了。 这里以angular为例,使用步骤如下: 全局安装tsd,通过tsd安装.d.ts文件。...npm install -g tsd tsd query angular --action install 如果不想自己手工引入,也可以在angular变量后面按ctrl+k,会有个灯泡图片,点击灯泡图片就会有对应提示...使用方法也很简单,步骤如下: 打开要调试的文件,按f5,编辑器会生成一个launch.json 修改launch.json相关内容,主要是name和program字段,改成和你项目对应的 点击编辑器左侧长得像蜘蛛的那个按钮...vsc是用atom-shell(现在叫electron)写的,这玩意和node-webkit(现在叫nw.js)一样,都是把node.js和chrome结合起来的工具,所以可以这么使用。

    1.1K130

    使用Angular CLI进行单元测试和E2E测试

    它应该在单独的终端进程中执行.  首先创建一个angular项目, 带路由的: ng new sales --routing 创建好项目后, 直接执行命令测试: ng test ?...使用ng test -sr或者ng test -w false 执行单次测试  测试代码覆盖率: ng test --cc 的报告默认是生成在/coverage文件夹下, 但是可以通过修改.angular-cli.json...然后点击debug, 并打开开发者工具: ? 然后按cmd+p: 找到需要调试的文件: ? 设置断点: ? 然后在spec里面也设置一个断点: ? 最后点击浏览器的刷新按钮即可: ?...而测试文件是在e2e目录下. 看一下spec和po文件: ? ? 再看一下app.component.html里面的值: ? 应该是没问题的. 所以执行ng e2e: ?...如果想退出调试, 那就按Ctrl+c或者输入.exit即可.

    2.8K70
    领券