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

每次我在.ts文件中添加断点时,Chrome都会在main.bundle.ts中打开相应的行,这很烦人

在前端开发中,断点是一种调试工具,用于在代码执行到指定位置时暂停程序的执行,以便开发人员可以检查变量的值、代码的执行流程等信息。在.ts文件中添加断点时,Chrome浏览器会在main.bundle.ts文件中打开相应的行,这是因为.ts文件是TypeScript文件,需要经过编译转换为JavaScript文件才能在浏览器中执行。

TypeScript是一种由微软开发的开源编程语言,它是JavaScript的超集,增加了静态类型检查和面向对象编程的特性。在开发过程中,我们通常会使用TypeScript来编写前端代码,并通过编译器将其转换为JavaScript文件,然后在浏览器中执行。

当我们在.ts文件中添加断点时,Chrome浏览器会根据断点的位置在编译后的JavaScript文件中找到对应的行,并在调试工具中暂停程序的执行。这样开发人员就可以逐步调试代码,查看变量的值、执行流程等信息,以便定位和解决问题。

对于这个问题,可以通过以下步骤解决:

  1. 确保在.ts文件中正确添加了断点。在需要设置断点的行上点击代码行号,确保出现了红色的断点标记。
  2. 确保在Chrome浏览器中启用了开发者工具。可以通过右键点击页面,选择"检查"或"审查元素",或者使用快捷键F12来打开开发者工具。
  3. 在开发者工具中,切换到"Sources"(或"资源")选项卡,找到对应的.ts文件。可以通过文件目录结构或搜索功能来定位文件。
  4. 在.ts文件中找到添加断点的行,确保断点标记出现在正确的位置。
  5. 刷新页面,让浏览器重新加载并执行代码。当代码执行到断点位置时,程序会暂停执行,开发者工具会自动切换到"调试"(或"Debugger")选项卡,并高亮显示当前断点位置的代码行。

通过以上步骤,您应该能够在Chrome浏览器中成功设置和触发断点,以便进行代码调试。如果问题仍然存在,可能是由于其他因素导致的,可以进一步检查代码逻辑、浏览器版本等方面的问题。

腾讯云提供了一系列与云计算相关的产品和服务,包括云服务器、云数据库、云存储等。您可以根据具体需求选择适合的产品进行开发和部署。更多关于腾讯云产品的介绍和详细信息,您可以访问腾讯云官方网站:https://cloud.tencent.com/

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

相关·内容

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

下移一行 垂直标尺 在配置文件中添加如下配置,可以增加字符数标尺辅助线 "editor.rulers": [40, 80, 100] 复制代码 image.png 进阶技巧 断点的基本使用 下面以在.../launch.json文件,指定程序入口文件 program字段用于指定你的程序入口文件,${workspaceFolder}表示当前项目根路径 image.png 在程序中添加断点,只需要点击左侧的边栏即可添加断点...image.png 按F5运行查看调试结果 image.png 表达式条件断点 条件断点是表达式结果为true时才会进行断点,步骤如下: 在代码行左侧右击,也可以添加断点,此处选择添加条件断点...这在调试在一行中包含多个语句的缩小代码时特别有用。比如for循环,短路运算符等一行代码包含多个表达式时会特别有用。...该字段的作用是在执行命令前先执行改task任务。 image.png 注意,如果编译后的js文件不在相应的位置,通过图中的outFiles字段可以指定ts编译后的js路径。

1.2K20

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

下移一行 垂直标尺 在配置文件中添加如下配置,可以增加字符数标尺辅助线 "editor.rulers": [40, 80, 100] 复制代码 image.png 进阶技巧 断点的基本使用 下面以在.../launch.json文件,指定程序入口文件 program字段用于指定你的程序入口文件,${workspaceFolder}表示当前项目根路径 image.png 在程序中添加断点,只需要点击左侧的边栏即可添加断点...image.png 按F5运行查看调试结果 image.png 表达式条件断点 条件断点是表达式结果为true时才会进行断点,步骤如下: 在代码行左侧右击,也可以添加断点,此处选择添加条件断点...这在调试在一行中包含多个语句的缩小代码时特别有用。比如for循环,短路运算符等一行代码包含多个表达式时会特别有用。...该字段的作用是在执行命令前先执行改task任务。 image.png 注意,如果编译后的js文件不在相应的位置,通过图中的outFiles字段可以指定ts编译后的js路径。

1.8K40
  • VS Code 调试完全攻略(5):基于浏览器的 React 应用

    启动浏览器 像往常一样向代码添加断点: ? 断点 然后在调试浏览器中与网站进行交互,但是这次启用了调试功能?让我们来看看在示例程序中成功的 fetch 是什么样子的: ?...restart debug 你可能想知道,这是否会比在“普通的” Chrome 中打开页面并使用 dev tools 更好?在这种情况下差异并不大。...不过当你要处理复杂的对象时,重复打开嵌套结构会变得很烦人。 VS Code 提供了一个更舒适的解决方案:你可以设置 监视表达式,该表达式会在每个调试步骤中重新评估。...确保在调试侧栏中打开了 Watch,并添加了一些表达式: ? 添加监视表达式 让我们尝试 fetch 一个存在的内容,并留意表达式: ?...在这种情况下,要做的设置大致如下: 启动开发服务器 通过配置你的 launch.json 在调试浏览器中打开应用 在源代码中设置断点 当你需要反复检查同一属性时,可以设置监视表达式 用 step 命令检查代码流

    2.5K20

    React Native调试心得

    相比 Enable Live Reload需要每次都返回到启动页面,Enable Live Reload则会在保持你的程序状态的情况下,就可以将最新的代码部署到设备上,听起来是不是很疯狂呢。...源码显示在单独的标签页,通过点击 打开文件导航面板,导航栏中会显示所有已打开的脚本文件。 心得:Chrome开发着工具中的Sources面板几乎是我最常用的功能面板。...添加和移除断点 在 Sources 面板的文件导航面板中打开一个JavaScript文件来调试,点击边栏(line gutter) 为当前行设置一个断点,已经设置的断点处会有一个蓝色的标签,单击蓝色标签...有一种断点叫全局断点 全局断点的作用是,当程序出现异常时,会在异常的地方暂停,这对快速定位异的常位置很方便。...做iOS开发的同学都知道在Xcode中可以设置全局断点,其实在Chrome 开发者工具中也同样有与之对应的功能,叫“Pause On Caught Exceptions”。

    5.1K70

    Chrome DevTools 一些隐藏技巧

    此外,如果你省略了这个快捷键中的 Shift 键,而使用 CTRL + P,它将为你提供所有可用的文件列表,如果你的网站有很多源文件,这非常方便。...这是一个很好的功能,但真正厉害的是在颜色选择器打开时,只要点击它就能从网站上选择任何颜色。 ?...这个条件断点不需要只添加在有 if 语句的行上,它可以在任何行上,每次代码执行经过它时,它的表达式都会被评估。...模拟慢网络 大多数人都知道 DevTools 中的网络选项卡,在这个选项卡中,你可以看到每个功能、操作或文件加载需要多长时间。...添加和选择这个配置文件后,剩下要做的就是刷新页面,看看它在糟糕的网络连接下的表现。 衡量网站性能 在性能这个话题上,我们来探讨一下 Chrome DevTools 在应用程序剖析方面可以为我们做什么。

    2K31

    js_调试_01_14 个你可能不知道的 JavaScript 调试技巧

    "debugger;" 除了 console.log, “debugger;” 是我最喜欢的临时应急调试工具。一旦它在你的代码中出现,Chrome 会自动地在执行到它所在位置时停下。...最常用的两种方式是: 在调试器中找到相应的行并设置一个断点 在你的脚本中添加一个 debugger 以上两种方法,你都必须到你的文件中找到你想调试的那一行。...不相关的黑盒脚本 我们经常会在我们的网页应用中用到一些库和框架。他们中大部分都经过良好的测试且相对来说错误较少。但是,调试器在执行调试任务时还是会进入这些不相关的文件。...然后,你还可以在调试器中过滤他们。但是有时当你调试 JavaScript 时,这并不是你真正想要的。现在,你可以给你的信息添加点创意和样式了。...Postman 很优秀,使用它需要打开一个新的浏览器窗口,然后编写请求体然后测试,有点烦人。 有时使用你的浏览器会更轻松。

    52230

    React Native调试技巧与心得

    相比 Enable Live Reload需要每次都返回到启动页面,Enable Live Reload则会在保持你的程序状态的情况下,就可以将最新的代码部署到设备上,听起来是不是很疯狂呢。...源码显示在单独的标签页,通过点击 打开文件导航面板,导航栏中会显示所有已打开的脚本文件。 心得:Chrome开发着工具中的Sources面板几乎是我最常用的功能面板。...添加和移除断点 在 Sources 面板的文件导航面板中打开一个JavaScript文件来调试,点击边栏(line gutter) 为当前行设置一个断点,已经设置的断点处会有一个蓝色的标签,单击蓝色标签...有一种断点叫全局断点 全局断点的作用是,当程序出现异常时,会在异常的地方暂停,这对快速定位异的常位置很方便。...做iOS开发的同学都知道在Xcode中可以设置全局断点,其实在Chrome 开发者工具中也同样有与之对应的功能,叫“Pause On Caught Exceptions”。

    6.9K50

    React Native开发之调试

    相比 Enable Live Reload需要每次都返回到启动页面,Enable Live Reload则会在保持你的程序状态的情况下,就可以将最新的代码部署到设备上。 ?...在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。源码显示在单独的标签页,通过点击 打开文件导航面板,导航栏中会显示所有已打开的脚本文件。...全局断点 全局断点的作用是,当程序出现异常时,会在异常的地方暂停,这对快速定位异的常位置很方便。...做iOS开发的同学都知道在Xcode中可以设置全局断点,其实在Chrome 开发者工具中也同样有与之对应的功能,叫“Pause On Caught Exceptions”。...在输入框中,输入一个可解析为真或假的表达式。仅当条件为真时,执行会在此暂停。 ? 附:React Developer Tools插件使用

    3.9K80

    React Native程序调试

    相比 Enable Live Reload需要每次都返回到启动页面,Enable Live Reload则会在保持你的程序状态的情况下,就可以将最新的代码部署到设备上。 ?...在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。源码显示在单独的标签页,通过点击 打开文件导航面板,导航栏中会显示所有已打开的脚本文件。...全局断点 全局断点的作用是,当程序出现异常时,会在异常的地方暂停,这对快速定位异的常位置很方便。...做iOS开发的同学都知道在Xcode中可以设置全局断点,其实在Chrome 开发者工具中也同样有与之对应的功能,叫“Pause On Caught Exceptions”。...在输入框中,输入一个可解析为真或假的表达式。仅当条件为真时,执行会在此暂停。 ? 附:React Developer Tools插件使用

    3.7K60

    Chrome开发者工具不完全指南(二、进阶篇)

    双击选中文件,该文件内容会在区域2中显示,如果你选中的是js文件,那么你可以在区域2种单击行号进行断点调试,只要js执行到了你所标记的这一行,它会停止向下执行并且等待你的命令: ?...  6、程序运行时遇到异常时是否中断的开关 接下来在区域4种切换到Watch Expressions 选项,它的作用是为目前断点添加表达式,使得每次断点往下走一步都会执行你写下的js代码。...一旦 XHR 调用触发时就会在 request.send() 的地方中断。   5、为网页添加各种类型的断点信息。...在web2.0时代的今天,我不推荐依然在自己的代码里面写调试信息的行为,因为这会然你的开发变得繁琐。Chrome开发工具给我们提供的强大功能,我们应该好好利用之。...如果你觉得不错,请推荐一下本文并继续关注卤煮在的博客。在下一篇中我将向大家介绍Chrome开发工具中的性能方面的调试。

    84320

    14个你可能不知道的JavaScript调试技巧

    执行代码后,Chrome会在执行时自动停止。你甚至可以把它封装成条件,只在需要时才运行。 2. 用表格显示对象 有时, 有一组复杂的对象要查看。...快速查找要调试的函数 假设你要在函数中打断点,最常用的两种方式是: 在控制台查找行并添加断点 在代码中添加 在这两个解决方案中,您必须在文件中单击以调试特定行。 使用控制台打断点可能不太常见。...在控制台中输入,当调用时,将以调试模式停止: 9. 屏蔽不相关代码 现在,我们经常在应用中引入几个库或框架。其中大多数都经过良好的测试且相对没有缺陷。 但是,调试器仍然会进入与调试任务无关的文件。...Postman真的很优秀。但打开一个新的窗口,写入请求对象,然后再来测试它们,显得很麻烦。 有时使用浏览器更容易。 当你使用浏览器查看时,如果请求一个密码验证页面,不需要担心身份验证的cookie。...下面我用不同的属性发起的两次请求: 14. 中断节点更改 DOM是一个有趣的东西。有时候它会改变,你并不知道为什么。 但是,当您调试JavaScript时,Chrome可以在DOM元素发生更改时暂停。

    1.7K90

    【实践】Chrome浏览器客户端调试从入门到奔溃

    先来看这张图最上头的一行是一个功能菜单,每一个菜单都有它相应的功能和使用方法,依次从左往右来看 。...源文件,方便我们查看和调试,在我还没有走出校园时候,我经常看一些大站的js代码,那时候其实基本都看不懂,但是最起码可以看看人家的代码风格,人家的命名方式,所有的代码都是压缩之后的代码,我们可以点击下面的...代码修改 看下面这张图,我在一个名为toggleTab的方法下打了两个断点,当开始执行我们的点击切换tab行为后,代码会在执行的断点出停下来,并把相关的数据展示一部分,此时可以在已经执行过得代码处,把鼠标放上去...会走很多底层的封装方法,需要很多步骤才能真正进入这个函数块,此时将鼠标放在此函数上,会出现相关提示,会告诉你在该文件的哪一行代码处,点击即可直接看到这个函数,然后临时打上断点,按F10或者点击右上角的第二个按钮即可直接进入此函数的断点处...Breakpoints处,点击右侧的+号,可以添加请求的URL,一旦 XHR 调用触发时就会在 request.send() 的地方中断 image DOM Breakpoints: 可以给你的DOM元素设置断点

    3.8K30

    你还在用 console.log 调试 ?

    虽然目前大多数浏览器中的内置开发工具,都允许您调试正在浏览的页面,停止在特定代码行上或者在特定语句上执行代码,但在本文中,我们将主要讲解 Chrome 开发者工具。 什么是断点?...首先,打开开发工具并转到 Sources 选项卡 然后,打开我们要调试的文件 打开文件后,我们可以通过单击需要停止的那行代码来设置断点 小提示:在 Mac 上,使用快捷键 ⌘ + O 可以打开文件选择器...在右侧面板中您可以使用 Return value 查看匿名函数的返回值。 ? 查看匿名函数返回值 临时取消断点 场景:您在代码中设置了一堆断点。 在调试时,多次刷新页面是很常见的操作。...也就是说,函数调用将被跳过,除非您在函数中设置了断点,否则调试器将不会在该函数中停止。 ?...例如,如果我有99%的时间只调试 userland 中的代码感兴趣,我可以在 Blackbox 中添加一个模式,将 node_modules 文件夹下的所有脚本过滤掉。

    1.6K10

    Chrome - JavaScript调试技巧总结(浏览器调试JS)

    为方便大家学习和使用,本文我对 Chrome 的调试技巧做个系统的总结。...一、设置断点 有两种方法可以给代码添加断点 方法1:在 Source 内容区设置 (1)找到要调试的文件,然后在内容源代码左侧的代码标记行处点击,即可打上一个断点。...(2)刷新浏览器,当页面代码运行到断点处便会暂停执行。 ? 方法2:在 js 文件中设置 (1)我们在 js 源文件中需要执行断点操作的代码前加上 debugger。...五、统一管理所有断点 我们可能会在不同的文件、不同的位置添加许多断点。...(3)Snippets 的方便之处在于,我们只需要打开 Chrome 就可以编写一份任意页面都可以运行的JS代码 2,使用样例 (1)点击“New Snippet”按钮,创建一个新的片段文件 ?

    25.1K43

    Chrome设置断点的各种姿势

    在JavaScript代码中设置断点 刚工作时被leader安利了Chrome浏览器,那时一说到调试,就知道这一个操作 以为在行号上单击一下就是打断点,就是会调试了:) 当然这也是最最基本的打断点的方式了...首先需要打开Devtools切换到Source页签,然后在左侧file navigation中找到我们要设置断点的文件并打开。 在打开的页面上单击对应的行号即可设置断点。...在DOM元素上设置断点 断点不仅仅可以设置在JS代码上,还可以在DOM元素上设置断点 刚刚看到时我都惊呆了,没想到竟然还有这种操作。 ?...异常断点 当代码出现异常时,我们会在Console页签看到错误提醒,并可以通过后边的锚点找到对应的文件以及定位到出错的代码行。 ?...小记 只想说,Chrome真的很强大。 平时能用到Chrome Devtools的功能也是少之又少。 仅仅一个打断点就能搞出这么多花来,很期待接下来能够在文档中发现什么。

    16.1K80

    现代 Web 应用 Devtools 调试技巧

    这意味着 Chrome DevTools 的目标受众也在使用至少一个大型框架。Chrome DevTools 团队做了深入的考察。...旗面可能会包括很多重复的文件,其中有一些是代码的实际源文件,还有一些是浏览器接收到的产物文件。这很令人困惑。...Chrome DevTools 现在可以解决这个问题,它可以让我们忽略并跳过特定的文件和文件夹。首先我们可以在页面浏览器中设置忽略列表和文件夹,甚至还可以使他们完全不可见。...img 大多数同学应该都了解断点,它们可以在应用程序的某个点暂停执行。试想一下,我们在处理所有传入事件的函数中设置这样的断点,比如这里所示的代码。我们可能注意到处理点击事件有 bug。...完成记录时,别忘了在本地重播一次录制,确保满意之后,使用导出菜单将记录的结果保存在本地 JSON 文件或 Puppeteer 脚本中。

    31810

    让你 nodejs 水平暴增的 debugger 技巧

    通过两边都能识别的格式来交流,比如: 在 test.js 的 100 行 设置断点: { "seq":118, "type":"request", "command":"setbreakpoint...运行的程序是根目录下的 index2.js,还可以设置 stopOnEntry 来在首行断住。 点击调试,就可以看到能够成功的调试该 js 文件。 ?...调试工具都支持 sourcemap,比如 chrome devtools 和 vscode debugger,都支持文件末尾的 sourcemap url 的解析: //# sourceMappingURL...image.png 这样,在 ts 源码中打的断点和在编译出的 js 打的断点都能生效。 多进程调试 当代码中有子进程的时候,就有了第二条控制流,需要再启动一个 debugger。...: outFiles 指定 sourcemap 的位置,用来调试 ts 源码等需要编译的代码 stopOnEntry 在首行停住 args 来指定一些命令行参数 runtimeExecutable 当运行时不是

    1.1K10

    请停用以开发者模式运行的扩展程序?搞定谷歌浏览器插件弹窗

    关于谷歌浏览器之前写过很多实用扩展: 那些我常用的 Chrome 扩展 那些我常用的 Chrome 扩展(二) 那些我常用的 Chrome 扩展(三) 那些实用的 Chrome 扩展神器 那些实用的...而且谷歌浏览器可以直接在 https://www.google.cn/chrome/ 下载,还有很多谷歌产品在国内都可以直接打开,可以看看我之前的文章那些在国内还能使用的谷歌产品 最新版83.0.4103.61...,每次打开浏览器都会有个弹窗,得手动关闭这个提示,很是烦人。 ? ? 这里分享2个方法解决这个问题。...然后会在本地生成文件 PrivateData.txt 200527 请停用以开发者模式运行的扩展程序|Chrome_WidgetWin_2|322*172|chrome.exe|1|0|12|12 再次打开...Chrome浏览器,可以看到那个弹窗被拦截了,再也看不见那个烦人的弹窗了。

    1.8K20

    14个你可能不知道的JavaScript调试技巧

    1. debugger 除了 console.log, debugger是我们最喜欢、快速且肮脏的调试工具。执行代码后,Chrome会在执行时自动停止。你甚至可以把它封装成条件,只在需要时才运行。...将代码格式化后再调试JavaScript 有时代码会在生产环境出问题,但是你的source maps没有部署在生产环境上。不要怕。Chrome可以将您的JavaScript文件格式化。...快速查找要调试的函数 假设你要在函数中打断点,最常用的两种方式是: 在控制台查找行并添加断点 在代码中添加 debugger 在这两个解决方案中,您必须在文件中单击以调试特定行。...观察特定函数的调用及参数 在Chrome控制台中,可以观察特定的函数。每次调用该函数,就会打印出传入的参数。...Postman真的很优秀。但打开一个新的窗口,写入请求对象,然后再来测试它们,显得很麻烦。 有时使用浏览器更容易。 当你使用浏览器查看时,如果请求一个密码验证页面,不需要担心身份验证的cookie。

    1.1K30

    (转)一探前端开发中的JS调试技巧

    从上图发现,我们在代码中新增了三行console代码,用以打印我们关心的数据变量,而最终我们从控制台(Console面板)中的输出结果,可以很清楚的验证整个计算过程是否正常,进而达到我们题设的验证要求。...如图,给一段代码添加断点的流程是“F12(Ctrl + Shift + I)打开开发工具”——“点击Sources菜单”——“左侧树中找到相应文件”——“点击行号列”即完成在当前行添加/删除断点操作。...这就要回过头来先学习一下断点调试的一些基础知识了。我们打开Sources面板后其实会在界面中看到如下内容,我们跟着鼠标轨迹逐一看看都是什么意思: ?...Debugger断点 所谓的Debugger断点,其实是我自己给它命名的,专业术语我也不知道怎么说。具体的说就是通过在代码中添加”debugger;”语句,当代码执行到该语句的时候就会自动断点。...我想原因应该是这样的:我们在开发中偶尔会遇到异步加载html片段(包含内嵌JS代码)的情况,而这部分JS代码在Sources树种无法找到,因此无法直接在开发工具中直接添加断点,那么如果想给异步加载的脚本添加断点

    2.8K60
    领券