首页
学习
活动
专区
工具
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/

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

相关·内容

分享 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.7K40

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
  • VS Code 调试完全攻略(5):基于浏览器 React 应用

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

    2.4K20

    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 应用程序剖析方面可以为我们做什么。

    1.9K31

    React Native调试技巧与心得

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

    6.8K50

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

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

    51030

    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.6K60

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

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

    80320

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

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

    1.7K90

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

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

    3.7K30

    你还在用 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”按钮,创建一个新片段文件 ?

    24.3K43

    Chrome设置断点各种姿势

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

    15.1K80

    现代 Web 应用 Devtools 调试技巧

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

    29510

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