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

Chrome javascript调试器断点什么都没做?

在Chrome浏览器中,JavaScript调试器(Debugger)可以帮助开发者找出和修复代码中的错误。当调试器设置了断点时,代码会在断点处暂停执行,以便您可以查看和分析当前的变量、函数和执行上下文。

如果在使用Chrome JavaScript调试器时,断点什么都没做,可能是因为以下原因:

  1. 断点设置不正确:请检查您是否正确地设置了断点。在代码行号旁边点击以创建一个断点,或者在代码中找到您想要暂停的具体位置。
  2. 代码未执行:确保您已经触发了要调试的代码执行。如果代码没有执行,断点自然也不会生效。
  3. 异步代码执行:如果您在异步代码(如Promise、async/await等)中设置了断点,可能会在代码执行完毕之前就已经过了断点。请尝试在异步代码相关的回调函数或者.then().catch()中设置断点。
  4. 缓存问题:有时候浏览器会因为缓存原因,加载旧版本的代码而不是新的代码。请尝试在开发者工具中勾选“Disable cache”选项,或者在加载页面时按下Ctrl + Shift + R强制刷新页面。
  5. 调试器设置问题:检查您的调试器设置,确保它没有被配置为忽略某些类型的代码或者特定的断点。

如果以上方法都不能解决问题,请尝试查看浏览器的控制台(Console)以查找可能的错误信息,或者检查您的代码逻辑是否存在问题。如果您需要进一步的帮助,请随时提问。

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

相关·内容

2018年,JavaScript经历了什么

其性能一直稳步提高: [2018-12-24-v8.png] V8引擎当初是为Chrome浏览器开发的,但是早已成为一个独立的项目。...《Refactoring》第2版改用JavaScript 《重构:改善既有代码的设计》大多数人都没看过,但是至少应该听过。这本书刚出了第二版,所有示例代码由Java改成了JavaScript。...这里不妨引用尤雨溪的一句话: 至于重构、设计什么的,我只想说,看的是使用的人的水平,跟用什么语言没那么大关系。水平烂的人用 TS 一样写的是翔一样的代码,看看 java 就知道了。...Microsoft爱上JavaScript 土豪Microsoft似乎爱上了JavaScript,它家的Office 365, MicroSoft Teams以及Skype开始使用JavaScript...in JavaScript 在浏览器市场上,Microsoft曾经通过捆绑Windows打败了网景,不过这些年在Chrome面前一败涂地,现在终于"认输",选择基于Chromium重写浏览器。

70850

如何使用谷歌浏览器 Chrome 更好地调试

本文重点介绍使用 Chrome DevTools 更轻松地对 Web 应用程序进行故障排除的一些最佳做法、关键功能和提示。 什么是谷歌浏览器开发工具?...Console:可以通过控制台查看和运行 JavaScript 代码。 Sources:源代码可在此处获得。你可以调试 JavaScript 代码并添加断点等。 Network:调试网络相关的活动。...每个成员数组包含该事件类型的所有事件,并且可以扩展以探索它们各自的属性,例如它们触发的关联函数。...debug() - 调试函数 为了修复不符合预期的页面、功能或组件,你通常会添加一个“调试器”;声明函数声明以激活调试器并尝试了解它有什么问题。 但是,这需要你手动进入源代码以添加这些调试器语句。...在 DOM 元素上添加断点(属性/模板更改) 有时你可能需要在有条件或动态更改的 DOM 元素上放置断点调试器

3.5K30

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

JavaScript 不是一个非常结构化的语言,所以有时很难搞清楚 发生了什么什么时候发生的 。因此 console.trace (console 面板中只需要 trace)就派上用场了。...Chrome 可以解压你的 JavaScript 代码以更加可读的格式呈现。尽管格式化后的代码不可能跟源码一样有用,但至少你可以知道发生了什么。...点击调试器 source 面板下面的 {} Pretty Print 按钮。 ? 8. 快速定位要调试的函数 假设你想在某个函数中设置一个断点。...最常用的两种方式是: 在调试器中找到相应的行并设置一个断点 在你的脚本中添加一个 debugger 以上两种方法,你都必须到你的文件中找到你想调试的那一行。...他们中大部分经过良好的测试且相对来说错误较少。但是,调试器在执行调试任务时还是会进入这些不相关的文件。一个解决办法是将你不需要调试的脚本设置成黑盒。也包括你自己的脚本。

50230

你还在用 console.log 调试 ?

我写这篇文章的目的是让您了解 Chrome 开发工具提供的高效工具,让您可以更好、更快地调试 Javascript 代码。...虽然目前大多数浏览器中的内置开发工具,允许您调试正在浏览的页面,停止在特定代码行上或者在特定语句上执行代码,但在本文中,我们将主要讲解 Chrome 开发者工具。 什么断点?...取消断点 执行错误时停止 场景:您的代码执行产生了错误,但您不想设置断点,因为您不知道何时会抛出错误。 在您的代码中抛出错误,这样就可以查看代码出现了什么问题。 ?...也就是说,函数调用将被跳过,除非您在函数中设置了断点,否则调试器将不会在该函数中停止。 ?...Step Out of function call 上图中发生了什么

1.6K10

JavaScript 开发者需要了解的15个 DevTools 技巧

查找未使用的 JavaScript Chrome 的 Coverage 面板可以让你能够快速找到 JavaScript 有没有被使用。...调试一些三方库(React, Vue.js, jQuery等)或第三方脚本中的问题通常都没什么用,你也不能改这些库。...DevTools 允许脚本被黑盒化,因此即使你选择进入调试器的某个函数,它们也不会在调试器中打开。...使用条件断点 单击 Sources 面板中打开的文件的行号会添加一个断点。它会在执行到这一行的时候暂停脚本,这样你可以单步执行代码来检查变量,调用堆栈等。...断点有的时候并不好用,例如,如果在运行 1000 次的循环的最后一次循环报错了。这时你可以添加一个条件断点,让它仅在满足特定条件时才触发断点,例如 i > 999 。

4.7K20

关于 Node.js 调试,你需要了解的一切

作者 | Craig Buckler 译者 | 核子可乐 策划 | 丁晓昀 Node.js 是一种颇具人气的 JavaScript 运行时,与谷歌 Chrome 浏览器一样采用同款 V8 引擎。...什么是调试? 所谓调试,就是修复软件缺陷的艺术。修复 bug 并不高深,大多数问题其实就是由字符错录或代码行里的小问题引发,但查找 bug 却是无缘艰难。...单击任何行号以设置断点(显示为蓝色标记): 这里的 breakpoint 断点,负责指定调试器应在何处暂停处理。我们可以借此检查程序状态,包括局部和全局变量。...您可以定义任意数量的断点,或向代码中添加调试器语句,这些语句会在调试器开始运行时停止处理。...,并跳转至它调用的任何其他函数 step out: 继续处理至函数末尾,而后返回至调用命令 restart:重新启动应用程序和调试器 stop:停止应用程序和调试器Chrome DevTools

38320

Node.js 项目调试指南

Node.js 是一种流行的 JavaScript 运行时,与谷歌 Chrome 浏览器使用相同的 V8 引擎。它是跨平台的,在创建 Web 服务器、构建工具、命令行工具等方面越来越受欢迎。...什么是调试? 调试是修复软件 Bug 的艺术。修复 Bug 通常很简单,更正一个字符或编辑一段代码就可能解决了问题。...单击任意行号来设置断点(显示为蓝色标记): 断点指定调试器可以暂停处理的位置,这允许我们可以检查程序的状态,包括局部和全局变量。...我们可以定义任意数量的断点或向代码中添加 debugger 语句,这些语句在调试器运行时也会停止处理。...step out : 继续处理到函数结束,返回调用命令 重新启动应用程序和调试器 停止应用程序和调试器Chrome DevTools 一样,你可以右击任何一行来添加: 一个标准的断点

54920

React Native调试技巧与心得

该工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略。...小技巧: ---- 巧用Sources面板 Sources 面板提供了调试 JavaScript 代码的功能。它提供了图形化的V8 调试器。 ?...断点其实很简单 断点(Breakpoint) 是在脚本中设置好的暂停处。在DevTools中使用断点可以调试JavaScript代码,DOM更新和 network calls。...添加和移除断点 在 Sources 面板的文件导航面板中打开一个JavaScript文件来调试,点击边栏(line gutter) 为当前行设置一个断点,已经设置的断点处会有一个蓝色的标签,单击蓝色标签...做iOS开发的同学知道在Xcode中可以设置全局断点,其实在Chrome 开发者工具中也同样有与之对应的功能,叫“Pause On Caught Exceptions”。

6.8K50

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

一起来看 大多数技巧适用于Chrome控制台和Firefox, 尽管还有很多其他的调试工具,但大部分也适用。 1. debugger 除了, 是我们最喜欢、快速且肮脏的调试工具。...由于JavaScript不是一个很结构化的语言, 有时候很难知道什么时候发生了什么。使用console.trace (仅仅只是在控制台中跟踪) 可以方便地调试JavaScript....格式化后的代码虽然不像真实代码那样有用,但至少可以看到发生了什么。点击 Chrome控制台中的源代码查看器中的按钮即可。 8....其中大多数经过良好的测试且相对没有缺陷。 但是,调试器仍然会进入与调试任务无关的文件。解决方案是屏蔽不需要调试的脚本。当然可以包括你自己的脚本。...有时候它会改变,你并不知道为什么。 但是,当您调试JavaScript时,Chrome可以在DOM元素发生更改时暂停。你甚至可以监视它的属性。在Chrome控制台中,右击该元素,然后在设置中选择中断:

1.7K90

前端必须知道的开发调试知识 - 笔记

; 最后还有一个比较少用的方法,用于展示 HTML 节点的 DOM 对象: console.dir # Sources— 源码 调试器使用: 使用关键字 debugger 或代码预览区域的行号可以设置断点...执行到断点处时代码暂停执行 展开 Breakpoints 列表可以查看断点列表,勾选 / 取消可以激活 / 禁用对应断点 暂停状态下,鼠标 hover 变量可以查看变量的值 在调试器 Watch 右侧点击...+可以添加对变量的监控,查看该变量的值 展开 Scope 可以查看作用域列表 (包含闭包) 展开 Call Stack 可以查看当前 JavaScript 代码的调用栈 前端代码天生具有 "开源" 属性...,出于安全考虑,JavaScript 代码在上线时通常会被压缩,压缩后的代码只有一行,变量使用’a’.'...电脑点击 inspect 按钮 进入调试界面 # 代理工具调试 原理: 电脑作为代理服务器 手机通过 HTTP 代理连接到电脑 手机上的请求经过代理服务器 以 Charles 为例: 安装 Charles

1.1K20

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

技巧1:有时候源码历经千辛万苦找不到在哪,这时候就需要祭出console.log了。...虽然不知道这是什么时候出的功能,但是我偶然发现的,它可以编辑之后真的保存到文件,这个可以当编辑器用了。 ?...断点方式三 这种方式简单归为在编辑器中断点调试,是需要连接调试器(可以是远程调试器)或者附加进程,然后接收调试信息,就可以在编辑器源码进行断点调试。...在Chrome和VS Code中调试Vue.js:此方法出处。这种方式使用VSCode的“Debugger for Chrome”扩展,推荐。...远程调试Chrome 附加浏览器的方式,不同于上一种,修改代码后要刷新页面才能重新断点调试 待更新 断点方式四 这种方式归为调试nodejs,可以调试webpack配置,或者后端运行的node实例。

2.3K30

2020年,9个前端的顶级 VS Code 扩展插件

VS Code 的插件甚至是主题数不胜数,开发者根据自己的需求可以自由选择。一个配置合适的 VSC 可以提高开发效率,有的则能够帮助开发者写出更简洁美观的代码。...3.Node 扩展  NPM 下载量:274w 所有开发者应该认识NPM,其全称是Node Package Manager(node包管理器)。...调试器 Debugger for Chrome 下载量:612w 对于在运行时期间对代码进行调试的开发人员,Debugger for Chrome 将帮你更好的完成工作。...它有许多方便的功能,包括在代码、watches 和控制台中设置断点的功能。另外你可以在 VS Code 中运行Chrome实例,或把调试器附加到单独运行的浏览器实例。...可以用它格式化以JavaScript,JSON,CSS,Sass和HTML编写的代码。 8.

1.6K41

现代 Web 应用 Devtools 调试技巧

这在控制台和调试器界面本身都会是这样的。...Chrome DevTools 和各种框架接受了 Source Map 处理和利用方式的一大堆优化。...条件断点 现代 Web 应用程序一般非常复杂,大家可能常常通过 console.log 进行调试。console.log 非常好,但有时还不够。这时候我们就得用上互动调试的能力了。...img 大多数同学应该了解断点,它们可以在应用程序的某个点暂停执行。试想一下,我们在处理所有传入事件的函数中设置这样的断点,比如这里所示的代码。我们可能注意到处理点击事件有 bug。...img 和新建条件断点一样,我们可以添加任何 JavaScript 表达式,然后它将通过控制台进行记录,这也可能导致大量的控制台记录,当然也可以忽略掉。

28110

【Hybrid开发高级系列】ReactNative(二) —— React Native调试专题

1.2 刷新JavaScript         不用每次你有改变时重新编译你的app,你可以直接重载你app的JavaScript代码。要这样做,就选择开发者菜单中的”Reload“。...更进一步你可能想在添加新文件到JavaScript包中时保持app运行新的版本,可以通过选择开发者菜单中的“EnableHot Reloading”来打开。...如果运行到任何问题,可能是你的某个Chrome扩展程序不小心干扰了调试器。尝试禁用所有的扩展器然后重新一个个地打开它们直到你找到有问题的扩展程序。...1.6.2 使用自定义的JS调试器         设置REACT_DEBUGGER环境变量为启动你的自定义调试器的命令来使用自定义的JS调试器来代替Chrome开发者工具。...)你可以和构建标准的原生app一样在Android Studio或者Xcode启动app并获取其调试功能(设置断点等等)。

30820
领券