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

无法在chrome dev工具上设置断点

在Chrome开发者工具上设置断点是一个常见的调试技巧,可以帮助开发人员在代码执行到特定位置时暂停,以便查看变量的值、调用堆栈和执行流程。然而,目前版本的Chrome开发者工具(DevTools)无法直接在源代码中设置断点的功能。

相反,Chrome开发者工具提供了一种更为强大和灵活的断点设置方式,即使用"debugger"关键字在代码中手动插入断点。以下是一些关于在Chrome开发者工具上设置断点的方法和注意事项:

  1. 使用"debugger"关键字:在需要设置断点的代码行上插入"debugger"关键字,例如:
代码语言:txt
复制
function myFunction() {
  debugger;
  // 你想要断点的代码
}

在运行代码时,当执行到"debugger"关键字所在的行时,代码将会在Chrome开发者工具中自动暂停执行,你可以在此时检查变量的值和调用堆栈。

  1. 使用条件断点:通过右键点击代码行号,在上下文菜单中选择"Add conditional breakpoint"选项,可以设置条件断点。条件断点仅在满足条件时才会触发断点。你可以在条件框中输入任何有效的JavaScript表达式。
  2. 在Event Listener Breakpoints面板中设置断点:Chrome开发者工具提供了一组内置的事件监听器断点,可以在事件发生时自动暂停代码执行。你可以在"Sources"选项卡中的"Event Listener Breakpoints"面板中勾选需要的事件类型,如点击、鼠标移动、键盘事件等。

虽然Chrome开发者工具提供了丰富的调试功能,但仍然建议使用适合自己项目和需求的调试工具和流程。对于前端开发而言,一些常用的调试工具包括Chrome DevTools、Firefox开发者工具、Safari Web Inspector等。

腾讯云相关产品: 腾讯云提供了一系列云计算产品,其中涉及到调试和监控方面的产品包括:

  • 云监控(Cloud Monitor):为云上资源提供实时监控和告警服务,可以监控云服务器、数据库、负载均衡等。
  • 云调试(Cloud Debugger):支持在线调试云函数和容器,通过代码行级别的调试功能帮助开发人员快速定位问题。
  • 云审计(Cloud Audit):提供操作记录审计和安全分析服务,可以帮助用户监控和审计其云上资源的使用情况。
  • 云日志服务(Cloud Log Service):用于日志的采集、存储、检索和分析,支持多种日志源,如云服务器、容器等。

可以通过腾讯云官方文档了解更多关于这些产品的详细信息和使用方法。

参考链接:

  • 腾讯云监控产品介绍:https://cloud.tencent.com/product/monitoring
  • 腾讯云调试产品介绍:https://cloud.tencent.com/product/cloud-debugger
  • 腾讯云审计产品介绍:https://cloud.tencent.com/product/cloud-audit
  • 腾讯云日志服务产品介绍:https://cloud.tencent.com/product/cls
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

NPAPI 插件【Silverlight】无法 Chrome 42 版及更高版本正常运行

原文链接:https://support.google.com/chrome/answer/6213033 NPAPI 插件无法 Chrome 42 版及更高版本正常运行 您可以利用插件浏览器中添加一些额外的功能...为了让用户获得更安全、更快速且更稳定的 Chrome 浏览体验,我们已结束 Chrome 42 版对 NPAPI 插件的支持。...但是,一些使用 NPAPI 的插件(包括 Silverlight、Java 和 Unity)将无法使用。...如何临时启用 NPAPI 插件 如果您必须使用 NPAPI 插件,可以采用下面介绍的临时解决方法( Chrome 45 版于 2015 年晚些时候发布之前,此方法将一直有效): 打开 Chrome。...屏幕顶部的地址栏中,输入 chrome://flags/#enable-npapi 随即打开的窗口中,点击启用 NPAPI 标记下方显示启用的链接: 点击页面左下角的立即重新启动按钮。

2.7K30

React Native开发之调试

工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略。...Android Android5.0以上设备,将手机通过usb连接到你的电脑,然后通过adb命令行工具运行如下命令来设置端口转发。...命令: adb reverse tcp:8081 tcp:8081 或者通过“Developer Menu”下的“Dev Settings”中设置你的电脑ip来进行调试,这也是大多数推荐使用的方式。...断点Breakpoint 断点(Breakpoint) 是脚本中设置好的暂停处。DevTools中使用断点可以调试JavaScript代码,DOM更新和 network calls。...做iOS开发的同学都知道Xcode中可以设置全局断点,其实在Chrome 开发者工具中也同样有与之对应的功能,叫“Pause On Caught Exceptions”。

3.9K80
  • 你还在用 console.log 调试 ?

    虽然目前大多数浏览器中的内置开发工具,都允许您调试正在浏览的页面,停止特定代码行或者特定语句执行代码,但在本文中,我们将主要讲解 Chrome 开发者工具。 什么是断点?...首先,打开开发工具并转到 Sources 选项卡 然后,打开我们要调试的文件 打开文件后,我们可以通过单击需要停止的那行代码来设置断点 小提示: Mac ,使用快捷键 ⌘ + O 可以打开文件选择器... Windows ,可以使用 CTRL + O ? 设置断点 如上图所示,我们可以一行代码更深入地设置断点,例如在一行代码里的不同语句。...场景:您的代码比上面的代码更复杂,并且无法确定何时出现 NaN 。 当然,您可以设置一个断点,但复现错误并不容易,可能最终花费半小时来执行代码。...当然,调用表达式时,您可以引用参数 x 和 y 当表达式为真时,断点将被触发 单步执行代码 为了充分利用 Dev Tools,值得花一点时间学习开发工具如何帮助我们快速单步执行代码,而无需每一行设置断点

    1.6K10

    React Native程序调试

    工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略。...Android Android5.0以上设备,将手机通过usb连接到你的电脑,然后通过adb命令行工具运行如下命令来设置端口转发。...命令: adb reverse tcp:8081 tcp:8081 或者通过“Developer Menu”下的“Dev Settings”中设置你的电脑ip来进行调试,这也是大多数推荐使用的方式。...断点Breakpoint 断点(Breakpoint) 是脚本中设置好的暂停处。DevTools中使用断点可以调试JavaScript代码,DOM更新和 network calls。...做iOS开发的同学都知道Xcode中可以设置全局断点,其实在Chrome 开发者工具中也同样有与之对应的功能,叫“Pause On Caught Exceptions”。

    3.7K60

    webassembly中使用浏览器断点调试cc++

    dev-tools,你可以wasm代码中断点,但是仅仅能看到如下的栈式调用,右侧的scope也无法看到真实的变量名。...打log首先是无法追踪堆栈信息。另一个问题是,webassembly无法直接打印字符串日志信息到浏览器控制台。事实,js和c代码只能传递数值类型。js和c代码之间传递字符串是比较麻烦的。 ?...实际,我们可以emscripten的官方网站看到-g编译参数的说明: ? 也就是说,emscripten工具是可以导出DWARF格式的调试信息的,它包含了源代码的各种调试信息,包括变量名保留等。...好消息是,近期最新chrome canary已支持浏览器进行高级的调试c/c++代码了,不但可以断点调试,而且可以实时看到变量名称和变量值。...-o output.html 其中fdebug-compilation-dir参数指向c代码源码路径 2、更新chrome canary到最新版 3、打开chrome设置 ? 4、打开设置  ?

    4.6K40

    React Native调试心得

    第二步:打开Chrome开发者工具 该“http://localhost:8081/debugger-ui.”Tab页下打开开发者工具。打开Chrome菜单->选择更多工具->选择开发者工具。...Android 方式一:  Android5.0以上设备,将手机通过usb连接到你的电脑,然后通过adb命令行工具运行如下命令来设置端口转发。 ...adb reverse tcp:8081 tcp:8081 方式二: 你也可以通过“Developer Menu”下的“Dev Settings”中设置你的电脑ip来进行调试。...添加和移除断点 Sources 面板的文件导航面板中打开一个JavaScript文件来调试,点击边栏(line gutter) 为当前行设置一个断点,已经设置断点处会有一个蓝色的标签,单击蓝色标签...做iOS开发的同学都知道Xcode中可以设置全局断点,其实在Chrome 开发者工具中也同样有与之对应的功能,叫“Pause On Caught Exceptions”。

    5.1K70

    React Native调试技巧与心得

    开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略。...Android 方式一: Android5.0以上设备,将手机通过usb连接到你的电脑,然后通过adb命令行工具运行如下命令来设置端口转发。...adb reverse tcp:8081 tcp:8081 方式二: 你也可以通过“Developer Menu”下的“Dev Settings”中设置你的电脑ip来进行调试。...添加和移除断点 Sources 面板的文件导航面板中打开一个JavaScript文件来调试,点击边栏(line gutter) 为当前行设置一个断点,已经设置断点处会有一个蓝色的标签,单击蓝色标签...做iOS开发的同学都知道Xcode中可以设置全局断点,其实在Chrome 开发者工具中也同样有与之对应的功能,叫“Pause On Caught Exceptions”。

    6.8K50

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

    像往常一样,这个文件夹中的代码保持尽可能的简单,以便使我们把注意力集中调试器。在用于生产的应用程序中,我们将会使用人性化的文件夹结构。...程序启动时获取文章列表,然后单击标题时从服务器获取所选文章的正文。 配置调试器 我们希望调试时能够 VS Code 中设置断点、启动调试浏览器、以及逐步调试获取初始列表和后续的远程请求。...type 和 request 参数告诉 VS Code 新的 Chrome 窗口中开始调试。 第一次运行后,启动器的 name 将显示调试工具栏和 IDE 的状态栏中: ?...没有这个设置,VS Code 会无法将源中的断点位置映射到运行时代码: ?... Chrome 中,打开开发者控制台,然后转到“Sources”: ?

    4.8K20

    关于vscode断点调试

    很多人习惯 Chrome 的调试窗口中调试 Vue 代码, 或者直接使用 console.log 来观察变量值, 这是非常痛苦的一件事,需要同时打开至少 3 个窗体。个人还是更加习惯于断点调试。...这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且VS Code的调试窗口看到Chrome中console相同的值。...设置 Chrome 远程调试端口 首先我们需要在远程调试打开的状态下启动 Chrome, 这样 VS Code 才能 attach 到 Chrome : Windows 右键点击 Chrome 的快捷方式图标...值改为 false 开始调试吧 一切具备了, 现在验收成果了 通过第一步的方式以远程调试打开的方式打开 Chrome vue 项目中执行npm run dev以调试方式启动项目 点击 VS Code...现在就可以.vue文件的js代码中打断点进行调试了。

    1.8K20

    再见,本地环境!腾讯云全球首发:Serverless 在线远程调试

    的各种服务,本地无法完全模拟,程序员大都遇到过本地和远程环境运行结果不一致的情形,追查起来费时费力,不仅效率低下,也造成非常郁闷的工作体验。...Node10 及以上版本的 runtime,使用 Chrome 浏览器打开云函数控制台,函数代码页即可看到在线调试的入口。...开启调试模式 使用Chrome浏览器打开函数代码编辑页,可以看到【远程调试】页。为保障调试的体验,开启调试模式将修改函数的部分配置,包括函数进入单实例模式、函数超时时间修改为900秒等。...设置断点 代码前点击即可设置断点右上角的工具中可以进行继续执行、跨步执行、单步执行等操作,也可以灵活地启动或禁用断点。 ?...除了云函数的控制台,也可以使用Serverless Framework Dev 模式开启在线调试的功能。

    1.1K20

    Devtools 老师傅养成 - Sources 面板

    面板概览 Debug : 源代码面板中可以设置断点来调试 JavaScript ,比 console.log()调试更快速高效 Devtools as IDE : 通过 Workspaces(工作区)...连接本地文件来使用开发者工具的实时编辑器 七种断点类型 行断点:代码运行到当前行之前暂停执行 源代码添加debugger关键字 或者点击Sources面板中的源代码的行号 条件行断点:当满足条件时才会触发该断点...设置中的 Blackboxing 面板添加正则表达式匹配文件名 Workspace:Devtools as IDE 将更改持久化 sources 左侧的面板中选择Filesystem,点击Add...(与插件运行在服务端的脚本,页面上引用的脚本,页面上 script 中的内嵌脚本都不同 插件服务端的脚本可以访问所有 WebExtension JavaScript API,但它们无法直接访问网页内容.../ [3] Mastering Chrome Developer Tools v2 课程: https://frontendmasters.com/courses/chrome-dev-tools-v2

    1.8K31

    PHP系列 | Phpstorm配置Xdebug断点调试教程(一)

    学会安装配置 Xdebug 能够浏览器运行实际代码时,断点处跳回 PhpStorm 进行调试 2. 约定 下面的教程中 : 1....然后,我们最终目的是要在 PHPstorm 中设置断点,然后浏览器中运行程序时,到断点处可以跳回到 Phpstorm 中调试,基于 chrome 浏览器,我们需要去chrome 商店下载一个 Xdebug...helper 插件, 无法访问外国网站的同学可以点这里下载,xdebug ,并手动安装,不会手动安装,请参考这篇教程中有提到 手动安装chrome插件 添加好此插件后,我们插件栏就多了一个虫子一样的图片...代码中设置一个断点: 回到 chrome 浏览器,打开我们的项目地址“ http://demo.dev/”, 点击刚刚安装的浏览器插件的那个虫子按钮,选择 debug,虫子就变成绿色了:...如果配置一切无误的话,刷新当前页面,浏览器将会弹出,程序会暂停在你设置断点的那一行: 至此这篇教程就结束了,至于Phpstorm 中更多 debug 代码的技巧就自己慢慢探索吧!

    2.9K20

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

    以谷歌浏览器(版本为69)为例,编辑器为VSCode(版本1.26.1) 断点方式一 这种方式是比较常用的方式,浏览器开发工具找到对应源码,script脚本节点里面的代码行断点。 ?...只要找到源码,脚本代码显示区域左边的数字添加断点即可,之后只要代码运行到断点处,开发工具就会进入调试状态。 注意:有的数字行是灰色的,就是不可断点。...Chrome和VS Code中调试Vue.js:此方法出处。这种方式使用VSCode的“Debugger for Chrome”扩展,推荐。...注意:如果没有命中断点并且你的断点不是红点,需要一个骚操作才能在VSCode断点调试:在打开的谷歌浏览器的开发工具源码断点调试一次(或者加关键字debugger触发调试,参考上面方式一),运行到断点处VSCode...远程调试Chrome 附加浏览器的方式,不同于一种,修改代码后要刷新页面才能重新断点调试 待更新 断点方式四 这种方式归为调试nodejs,可以调试webpack配置,或者后端运行的node实例。

    2.4K30

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

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

    2.9K20

    iPhone页面的常用调试方法

    iPhone中调试,大体与上文 安卓中的移动页面调试 类似,区别主要是iOS系统中的一些限制,导致某些工具无法使用。 本文基于此,简要介绍iPhone中如何调试页面。...,iPhone不好设置HOST,所以需要一些代理工具帮助我们 除了Windows平台中常用的代理调试工具Fiddler之外,还可以使用Mac中的常用代理工具 Charles Fiddler 与上文类似...而对于某些需要账号授权登陆的页面,涉及到Cookie的模拟登录,可以使用这两个代理工具进行设置 Fiddler中可以按前文安卓的配置 Charles中也有对应的方法 ?...手机上访问某个页面,选取进行调试,将会打开Safari的开发者工具,可以看到熟悉的几个面板 ? ? 除了审查元素查看日志之外,还可进行脚本的断点调试,查看网络请求等操作。...基于 ios-webkit-debug-proxy 的调试 Mac的safari调试功能不够好,而且不能调试微信中的页面,使用weinre只能简单地调试微信页面,无法进行脚本断点等高级功能 最好的办法莫过于让

    3.4K10

    进阶 | chrome开发者工具中观察函数调用栈、作用域链与闭包

    chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象,闭包,this等关键信息的变化。...二、认识断点调试工具 尽量新版本的chrome浏览器中(不确定你用的老版本与我的一致),调出chrome浏览器的开发者工具。 界面如图。...三、断点设置 显示代码行数的地方点击,即可设置一个断点断点设置有以下几个特点: 1、单独的变量声明(如果没有赋值),函数声明的那一行,无法设置断点。...3、当你设置多个断点时,chrome工具会自动判断从最早执行的那个断点开始执行,因此我一般都是设置一个断点就行了。...由于使用断点调试过程中,发现chrome浏览器理解的闭包与该例子中所理解的闭包不太一致,因此专门挑出来,供大家参考。我个人更加倾向于chrome中的理解。 1、第一步:设置断点,然后刷新页面。

    2.5K20

    【干货】最全的JavaScript调试技巧总结,必看!

    也可以一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,同时节省了时间。...这里需要注意一点,直接在代码区打印变量值的功能是较新版本的Chrome浏览器中才新增的功能,如果小伙伴还在使用较老版本的Chrome浏览器,可能无法直接在断点的情况下查看变量信息,此时小伙伴可以将鼠标移动到变量名短暂停顿则会出现变量值...老九君想原因应该是这样的:我们开发中偶尔会遇到异步加载html片段(包含内嵌JS代码)的情况,而这部分JS代码Sources树种无法找到,因此无法直接在开发工具中直接添加断点,那么如果想给异步加载的脚本添加断点...特别是HTML5标准增强自定义属性支持(例:dataset、data-*之类)之后,属性设置应用越来越多,因此Chrome开发者工具也提供了属性变化断点支持,其效果大致如下: ?...前面介绍到的基本是我们日常开发中经常用到的调试手段,运用得当它们也几乎能应对我们日常开发中的几乎所有问题。但是,开发者工具还考虑到了更多的情况,提供更多的断点方式,如图: ?

    1.9K70

    关于 WEBHTTP 调试利器 Fiddler 的一些技巧分享

    1、原理简介: Fiddler 是目前最强大最好用的 Web 调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置 CGI 请求的断点,甚至修改输入输出数据。...另外,值得一提的是,即便在浏览器的调试中,它也能胜任其他工具,比如IE浏览器,当我们需要弹出一个模式对话框(modalDialog)时,这些浏览器监听插件就派不用场了,还得fiddler出场。...命令行中输入命令 bpu (2)Fiddler中设置断点修改Response 第一种:打开Fiddler 点击Rules-> Automatic Breakpoint  ->After Response...http://fiddler2.com/documentation/KnowledgeBase/QuickExec 3、注意的问题及解决方法 (1)chrome和firefox浏览器无法被监听 fiddler...解决办法:禁用chrome和firefox中具有代理功能的插件,比如我的chrome安装了switchSharp,禁用它或选择“使用系统代理设置”,或在switchSharp中新配置一个代理项(比如名为

    1.7K70

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

    也可以一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,同时节省了时间。...这里需要注意一点,直接在代码区打印变量值的功能是较新版本的Chrome浏览器中才新增的功能,如果你还在使用较老版本的Chrome浏览器,可能无法直接在断点的情况下查看变量信息,此时你可以将鼠标移动到变量名短暂停顿则会出现变量值...我想原因应该是这样的:我们开发中偶尔会遇到异步加载html片段(包含内嵌JS代码)的情况,而这部分JS代码Sources树种无法找到,因此无法直接在开发工具中直接添加断点,那么如果想给异步加载的脚本添加断点...特别是HTML5标准增强自定义属性支持(例:dataset、data-*之类)之后,属性设置应用越来越多,因此Chrome开发者工具也提供了属性变化断点支持,其效果大致如下: ?...前面介绍到的基本是我们日常开发中经常用到的调试手段,运用得当它们也几乎能应对我们日常开发中的几乎所有问题。但是,开发者工具还考虑到了更多的情况,提供更多的断点方式,如图: ?

    2.8K60
    领券