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

Chrome webtools调试器自行恢复脚本执行

Chrome 开发者工具(DevTools)允许您检查和调试网页,包括 JavaScript 脚本。在某些情况下,您可能希望暂停脚本执行以便进行调试,然后在条件满足时恢复执行。以下是如何使用 Chrome 开发者工具来实现这一目标的步骤:

步骤 1:打开开发者工具

  1. 打开 Chrome 浏览器。
  2. 导航到您想要调试的网页。
  3. 右键点击页面元素,选择“检查”(Inspect),或者按下 Ctrl+Shift+I(Windows/Linux)或 Cmd+Opt+I(Mac)。

步骤 2:进入调试模式

  1. 在开发者工具中,切换到“Sources”面板。
  2. 在左侧的文件导航器中,找到并点击您想要调试的 JavaScript 文件。
  3. 在代码编辑器中,找到您想要暂停执行的行。
  4. 点击行号旁边的空白区域,设置一个断点。当执行流到达该行时,脚本将暂停。

步骤 3:暂停和恢复脚本执行

  1. 暂停执行
    • 当浏览器执行到断点时,脚本会自动暂停。
    • 您可以在“Call Stack”面板中查看当前的调用栈。
    • 在“Scope”面板中查看当前作用域内的变量值。
  2. 恢复执行
    • 要恢复脚本执行,您可以点击开发者工具顶部的“Resume script execution”按钮(一个带有绿色三角形的图标)。
    • 或者,您可以使用快捷键 F8(Windows/Linux)或 Cmd+Opt+\\(Mac)。

步骤 4:条件断点

如果您希望在特定条件下恢复执行,可以使用条件断点:

  1. 右键点击行号旁边的空白区域,选择“Add conditional breakpoint”。
  2. 在弹出的对话框中输入条件表达式(例如 x > 5)。
  3. 当条件满足时,脚本将暂停,您可以检查变量并决定是否恢复执行。

步骤 5:调试控制台

您还可以使用开发者工具中的“Console”面板来动态执行 JavaScript 代码,并查看输出结果。这对于调试和恢复脚本执行非常有用。

注意事项

  • 在调试过程中,请确保浏览器窗口保持活动状态,否则脚本执行可能会中断。
  • 如果您使用的是远程调试(例如通过 Chrome DevTools Protocol),请确保网络连接稳定。

通过以上步骤,您可以在 Chrome 开发者工具中暂停和恢复 JavaScript 脚本的执行,从而更有效地进行调试。

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

相关·内容

chrome调试JavaScript脚本

源面板允许你查看正在浏览的页面上所有的脚本。面板底部的图标按钮分别提供了标准的暂停、恢复以及逐条语句运行等操作。窗口底部还有一个按钮,在出现异常时可以强制暂停。...在不同选项卡中,Sources 都是可见的,而且只要点击 show-file-navigator 就可以打开文件定位并且显示全部脚本。...执行控制 执行控制相关的按钮就在侧面板的顶端,它们使得你能够单步执行代码。可用的按钮有: continue Continue:继续执行代码,直至遇到另一个断点。...step-into Step into(逐过程):和逐语句类似,但是点击逐过程会在函数调用时,令调试器执行转到所调用的函数声明中去。...step-out Step out:当使用逐过程进入某个函数内部后,点击该按钮会跳过该函数声明的剩余部分,调试器会将执行过程移动到其父函数中。

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

    type:把调试器类型设置为 chrome,这意味着我们将在此配置中使用 Chrome 浏览器。...准备的插件 每个调试器 type 都有其特定的配置,所以请试着用 VS Code 随附的便捷自动完成功能。...它与你手动执行的操作并没有太大区别,但是会自动为你执行代码。另一种可能性是 attach 到已经运行的调试服务器,这在当前的配置下是不可能的。...启动脚本 接下来,从调试侧边栏中或通过按 F5 键启动调试浏览器: ? 启动浏览器 像往常一样向代码添加断点: ? 断点 然后在调试浏览器中与网站进行交互,但是这次启用了调试功能?...success debug 可以通过使用工具栏中的 “restart” 来重新启动会话并使应用恢复到原始状态: ?

    2.5K20

    你还在用 console.log 调试 ?

    本文主要讲述以下几点内容: 设置断点以调试特定行的代码 查看调用堆栈 暂停/恢复脚本执行 设置表达式 开发工具的生产力提示和技巧 调试运行时代码 当代码出现 bug 或没有按照预期执行时,我们通常会查看开发者工具中的...虽然目前大多数浏览器中的内置开发工具,都允许您调试正在浏览的页面,停止在特定代码行上或者在特定语句上执行代码,但在本文中,我们将主要讲解 Chrome 开发者工具。 什么是断点?...也就是说,函数调用将被跳过,除非您在函数中设置了断点,否则调试器将不会在该函数中停止。 ?...即时输出是 Chrome 68 中发布的一项功能,开发工具允许您在输入代码时在控制台中显示执行的结果。...要通过 Blackbox 过滤一个脚本,有两种方法: 右键单击 Sources 选项卡中的 JS 脚本,然后单击“Blackbox Script” 转到Chrome设置页面,然后转到 Blackboxing

    1.6K10

    React Native程序调试

    Source 面板:用于查看和调试当前页面所加载的脚本的源文件。 TimeLine 面板: 用于查看脚本执行时间、页面元素渲染时间等信息。...Chrome调试小技巧 Sources面板 Sources 面板提供了调试 JavaScript 代码的功能。它提供了图形化的V8 调试器。 ?...Sources 面板可以让你看到你所要检查的页面的所有脚本代码,并在面板选择栏下方提供了一组标准控件,提供了暂停,恢复,步进等功能。在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。...跳入(Step into): 与 Step over 类似,但是当代码调用函数时,调试器会进去这个函数并跳转到函数的第一行。...右键点击蓝色标签会打开一个菜单,菜单包含以下选项:执行到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点(

    3.7K60

    React Native开发之调试

    Source 面板:用于查看和调试当前页面所加载的脚本的源文件。 TimeLine 面板: 用于查看脚本执行时间、页面元素渲染时间等信息。...Chrome调试小技巧 Sources面板 Sources 面板提供了调试 JavaScript 代码的功能。它提供了图形化的V8 调试器。 ?...Sources 面板可以让你看到你所要检查的页面的所有脚本代码,并在面板选择栏下方提供了一组标准控件,提供了暂停,恢复,步进等功能。在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。...跳入(Step into): 与 Step over 类似,但是当代码调用函数时,调试器会进去这个函数并跳转到函数的第一行。...右键点击蓝色标签会打开一个菜单,菜单包含以下选项:执行到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点(

    3.9K80

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

    让我们开始吧 大多数技巧都是用于 Chrome Inspector 和 Firefox,尽管有些可能也适用于其他调试器。 1....一旦它在你的代码中出现,Chrome 会自动地在执行到它所在位置时停下。你甚至可以将它放在条件语句中,只在你需要的时候运行。 if (thisThing) { debugger; } 2....Chrome 提供了所有你需要的东西。打开你的调试器并点击 "toggle device mode" 按钮。你会看到媒体查询出现啦! ? 4....最常用的两种方式是: 在调试器中找到相应的行并设置一个断点 在你的脚本中添加一个 debugger 以上两种方法,你都必须到你的文件中找到你想调试的那一行。...不相关的黑盒脚本 我们经常会在我们的网页应用中用到一些库和框架。他们中大部分都经过良好的测试且相对来说错误较少。但是,调试器执行调试任务时还是会进入这些不相关的文件。

    51930

    React Native调试心得

    Source 面板:用于查看和调试当前页面所加载的脚本的源文件。 TimeLine 面板: 用于查看脚本执行时间、页面元素渲染时间等信息。...它提供了图形化的V8 调试器。  ? Sources 面板可以让你看到你所要检查的页面的所有脚本代码,并在面板选择栏下方提供了一组标准控件,提供了暂停,恢复,步进等功能。...源码显示在单独的标签页,通过点击 打开文件导航面板,导航栏中会显示所有已打开的脚本文件。 心得:Chrome开发着工具中的Sources面板几乎是我最常用的功能面板。...跳入(Step into): 与 Step over 类似,但是当代码调用函数时,调试器会进去这个函数并跳转到函数的第一行。...心得:你可以在控制台(Console)上打印变量,执行脚本等操作。在开发调试中非常有用。

    5.1K70

    【保姆级】前端使用node.js基础教程

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,常用于服务器端编程。...:运行脚本文件:node app.js调试和开发工具:Node.js 调试器:node inspect app.js使用 nodemon(自动重启工具):首先安装 nodemon:npm install...DevTools 调试 Node.js:启动 Node.js 带调试端口的脚本:node --inspect-brk=9229 app.js在 Chrome 浏览器中打开 chrome://inspect...使用测试框架(如 Mocha、Jest)进行单元测试:安装测试框架:npm install --save-dev mocha编写测试用例并运行测试:npm test调试工具:使用 Node.js 自带的调试器...:启动调试模式:node inspect app.js在调试模式下,可以使用 c(继续执行)、n(逐行执行)、repl(进入 REPL 模式)等命令进行调试。

    15910

    前端调试入门

    常见的控制台有Chrome的控制台,Firefox的firebug。这些都能帮助我们调试前端问题。本手册将以Chrome浏览器控制台为例进行讲解。...下图1为Chrome浏览器控制台,图2为Firefox控制台。 1.jpg 2.jpg 1.1脚本执行 上图1中,点击tab3 进入“console”Tab页,即为脚本执行区域。...快捷键: 1) F8,恢复执行并跳到下一个断点 2) F10,恢复执行并跳到下一个运行栈,一般为子函数。...如果想在运行到断点位置执行其它逻辑,可以直接在console区域运行相关脚本。 3代理 前端代理是指用本地文件替换网络文件的一个动作,代理可以用来调试问题。...4.1 安卓 微信/手Q/QQ浏览器/腾讯产品APP 这几种情况都有一个共性,就是app是腾讯的产品,而且在安卓手机上,我们知道安卓支持连接数据线结合Chrome内核的调试器进行inspector调试,

    2.3K330

    React Native调试技巧与心得

    Source 面板:用于查看和调试当前页面所加载的脚本的源文件。 TimeLine 面板: 用于查看脚本执行时间、页面元素渲染时间等信息。...它提供了图形化的V8 调试器。 ? Sources 面板可以让你看到你所要检查的页面的所有脚本代码,并在面板选择栏下方提供了一组标准控件,提供了暂停,恢复,步进等功能。...源码显示在单独的标签页,通过点击 打开文件导航面板,导航栏中会显示所有已打开的脚本文件。 心得:Chrome开发着工具中的Sources面板几乎是我最常用的功能面板。...跳入(Step into): 与 Step over 类似,但是当代码调用函数时,调试器会进去这个函数并跳转到函数的第一行。...心得:你可以在控制台(Console)上打印变量,执行脚本等操作。在开发调试中非常有用。

    6.8K50

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

    debug() - 调试函数 为了修复不符合预期的页面、功能或组件,你通常会添加一个“调试器”;声明函数声明以激活调试器并尝试了解它有什么问题。 但是,这需要你手动进入源代码以添加这些调试器语句。...Chrome 允许你直接从控制台执行此操作,而无需使用 debug() 函数访问你的源代码。只需在控制台中调用它并将函数的名称传递给它,它就会自动将调试器注入到函数中,让你可以单步调试代码。...在控制台中调用debug(functionReference)会增加一个调试器;引用函数声明的第一行上的语句。 DevTools 还提供断点,让你逐行执行代码。...注意:当你使用 Restart Frame Chrome 时,状态不会恢复执行指针简单地移动到函数的顶部。...代码片段 在调试时,你可能经常需要一遍又一遍地执行同一行代码,直到你完成故障排除。但是,这会导致你进行大量重复输入或不断地从你最喜欢的代码编辑器复制并粘贴到你的 Chrome 浏览器控制台。

    3.6K30

    披露报告:流氓家族窃取用户浏览隐私活动

    Logo解密后为Lua脚本扩展模块LuaRtl.dll.dll,对应执行脚本为logouc: ?...,不存在直接返回不恢复键盘和鼠标输入,造成调试器和整个桌面卡死的假象: ?...对Lua脚本还原后其执行逻辑是在main函数中执行完弹窗后,会调用execute_urlreport函数进行url和cookie收集,该函数进行参数封装后调用接口函数invoke_exe_inject,...获取浏览器历史记录包括了市面上的绝大部分浏览器:chrome,2345,360chrome,360safe,世界之窗,liebao,opera,qq,uc,IE,Mozilla,sogou。...以chrome浏览器为例,历史记录都是以Sqlite数据库存储的,先复制一份数据到临时目录,通过Sqlite3库打开数据库执行SQL语句进行查询,在查询前会获取上一次的时间戳,获取此时间戳以后的新内容。

    93440

    cocos2d-js 调试办法 断点调试 Android真机调试

    一 使用浏览器chrome打开程序,进行调试。跟普通js程序一样。 要么自行搭建服务器,利用python脚本,或者用其他服务器程序(LAMP或XAMPP)。然后用浏览器打开服务器地址。...这让firefox在chrome如日中天的年代又找到了点存在感啊~~~真怀念。...然后,我们把调试器和设备连接起来:(地址填手机的网络地址,图中127.0.0.1是因为模拟器运行;端口必须是5086) ? ? 弹出一个新窗口,表示连接成功。...5 开始调试 点debugger调试器开始调试。 ? 这个方法也有一定缺陷,也就是必须在cocos程序启动后才能调试。启动过程中做的事情,就不好捕捉了。。。这时候需要用cc.log配合一下了。

    3.3K20

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

    您可以定义任意数量的断点,或向代码中添加调试器语句,这些语句会在调试器开始运行时停止处理。...在 Chrome 中设置日志点 日志点为 console.log(),不涉及任何代码!执行此代码时会输出一条表达式,但与断点不同的是,处理过程不会暂停。...如果您正在运行 Web 应用程序,可在任意浏览器中打开,VS Code 会在遇到断点或 debugger 语句时停止执行: VS Code 调试方法与 Chrome DevTools 中的 Variables...其中 Loaded Scripts 窗格会显示应用程序所加载的各脚本,也包括 Node.js 的内部脚本。...,并跳转至它调用的任何其他函数 step out: 继续处理至函数末尾,而后返回至调用命令 restart:重新启动应用程序和调试器 stop:停止应用程序和调试器Chrome DevTools

    43320
    领券