Chrome之js断点调试方法

最新推荐文章于 2026-03-24 11:17:19 发布
原创 最新推荐文章于 2026-03-24 11:17:19 发布 · 2.8k 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
javascript

当前文章被收录于：

javascript
14 篇文章 1 人学习
订阅专栏 查看详情
本文详细介绍了如何使用Chrome开发者工具进行JavaScript断点调试，包括打开开发者工具、设置断点、触发调试、掌握常用调试按钮及快捷键，以及清除断点的方法。通过这些步骤，开发者能够高效地定位和解决问题。

方法/步骤

1.Chrome开发者工具断点调试

第一步:打开开发者工具，按F12或者在浏览器页面上右键选择
在这里插入图片描述
第二步:在Source面板找到需要调试的文件
在这里插入图片描述

第三步:设置断点
在这里插入图片描述
第四步:触发调试部分程序的运行，开始调试
在这里插入图片描述

调用过程常用的按钮及快捷键:

  1. 跳到下一个断点:点击Sources面板右侧的 “三角按钮”

在这里插入图片描述
快捷键 ： F8

  1. 跳到下一步 : 点击Sources面板右侧的第二个按钮

在这里插入图片描述
快捷键 : F10

  1. 跳进断点处的方法中:点击Sources面板右侧第三个按钮

在这里插入图片描述
快捷键 : F11

  1. 跳进断点处的方法中:点击Sources面板右侧第四个按钮

在这里插入图片描述

快捷键 : Shift + F11

  1. 跳进断点处的方法中:点击Sources面板右侧第五个按钮

在这里插入图片描述
快捷键 : F9

  1. 禁用断点:断点Sources面板右侧第五个按钮

在这里插入图片描述

  1. 暂停在捕获到的异常处：点击Sources面板右侧第六个按钮，然后勾选Pause On Caught Exception
    在这里插入图片描述
  2. 暂停在未捕获的异常处:点击Sources面板右侧第六个按钮，然后不勾选Pause On Caught Exception

在这里插入图片描述

清除断点

  1. 在Sources面板右侧面板中,找到Breakpoints打开，可以看到你打的断点.可以断点列表处右键选择 Remove all breakpoints 可一次性删除所有断点

在这里插入图片描述

chrome浏览器如何断点调试异步加载的JS
11-23
前言 在我们日常开发中，常常利用chrome强大的控制台Sources下面进行代码断点调试，但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到，那如何进行debug断点调试呢？下面来一起看看。 这是我们用Sources断点调试的实例图： 图中我们可以看到，在index.js中我们通过$.getScript引入test.js，看看表现如何： 我们在Network中看到test.js已经成功引入，但是它却属于XHR类请求，这样我们在Sources必然找不到它。 不出所料，Sources里果然没有发现test.js的踪迹！高潮来了，那还怎么进行断点调试呢？？？ 我
调试异步加载页面中的 JavaScript 文件：JavaScript 调试技巧
TechNovaX的博客
10-10 418
通过这些工具，你可以检查异步加载的 JavaScript 文件、设置断点、查看变量的值，并逐步执行代码来进行调试。本文将介绍一些实用的 JavaScript 调试技巧，帮助你解决异步加载页面中的 JavaScript 文件的问题。通过使用开发者工具、调试语句、事件监听器、延迟加载和模拟数据，你可以更轻松地解决异步加载 JavaScript 文件的问题，并加快调试和开发的效率。使用模拟数据：在调试过程中，如果异步加载的 JavaScript 文件依赖于服务器返回的数据，你可以使用模拟数据来进行调试。
Chrome中调试JavaScript的技巧和方法
laugh666的博客
09-14 1583
通过使用断点、控制台输出、监视表达式和处理异常，我们可以迅速定位和解决代码中的问题。Chrome浏览器提供了强大的开发者工具，使我们能够有效地调试JavaScript代码并解决常见的编程问题。在本文中，我们将探索一些在Chrome中调试JavaScript的技巧和方法。它允许我们在代码的特定位置暂停执行，以便检查变量的值、执行路径和错误。以上是关于在Chrome中调试JavaScript的技巧和方法的精彩介绍。在Chrome开发者工具的"Sources"选项卡中，我们可以添加监视表达式并跟踪变量的值。
Chrome调试技巧【JS断点调试篇】
ufrontend的博客
04-18 7560
（1）当断点执行到某一程序块处停下来后，右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈，从上到下由最新调用处依次往下排列。（2）Call Stack 列表的上方是 Scope 列表，可以查看此时局部变量和全局变量的值，也能查看代码执行到此时产生了多少闭包。
开发者工具调试
记录学习前端的历程
06-06 1025
F12打开控制台。
JavaScript 断点调试技巧
大转转FE
08-25 835
为什么要使用 debugger这篇文章将介绍如何使用断点来进行 JavaScript 调试。在读这篇文章之前，需要问一个问题：为什么要使用断点来进行调试？我们首先需要认可使用断点的是必要的...
JS实用技巧之断点调试详解
efew212efe的博客
04-28 9871
引言 调试能力是一个程序员的生存根本，可是很多初学者却忽视调试。今天我们就来讨究一下JS的调试技巧。 本文章将会详细列举JS相关的各种实用调试技巧。如果您是JS的初学者，那么这篇文章将对您有很大的帮助。 为什么要调试？ 程序就是函数堆砌起来的，程序的运行就是函数的执行过程。而通过JS调试，我们可以更为直观的追踪到在程序运行中，函数的执行顺序，以及各个参数的变化。这样我们就可以快速的定位到问题所在。 1. 什么是JS调试？ 在程序运行中，我们总会遇到各种bug，而通过代码的追踪代码的运行顺序从而定位到问题的过
异步加载的JS如何在chrome浏览器断点调试
Paul Joo的专栏
01-11 1924
我们常常利用chrome强大的控制台Sources下面进行代码断点调试，但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到，那如何进行debug断点调试呢？在script代码的头部或者尾部加上//# sourceURL=xxx.js然后在(no domain)里面找到它进行调试,如果使用firefox浏览器，直接在debug中就可以找到xxx.js
2-3.利用框架构建一个easy的web应用之断点调试
weixin_45530192的博客
08-21 901
本文介绍了JavaScript断点调试的主要方法和技巧，包括浏览器开发者工具调试（基本断点、条件断点等）、debugger语句使用、Node.js调试（命令行、Chrome DevTools和VS Code三种方式）以及高级调试技巧。文章对比了不同调试工具的优缺点，并提供了常见问题的解决方案，帮助开发者更高效地定位和修复代码问题。内容涵盖前端和后端JavaScript调试，适合各级开发者参考。
破解js时的断点调试小结
GMBai的博客
08-21 652
引言: 为了破解js ， 在网上看了js的语法， 生出了学习js的想法， 是想系统的买书学习， 看了发现要重新学一门语言还是需要很大毅力的， 因为我总感觉学习JavaScript有些枯燥， 远没有当初学pyhton的热情，所以没办法了，还是学点实用的吧。 破解js就是硬刚， 用selenium还是有局限性的，而且我的电脑用起来真的太慢。 正文 ： 以前每当我打了一个断点 然后想要看看这行代码的含义...
chrome debugger 调试
weixin_30511107的博客
10-19 158
debugger 使用chrome调试时，html页面的js代码中可能不好打断点(因为在jvm中才会有代码) 我一开始是故意在需要断点的后面或前面写个错的alert，通过jvm找到此处，然后在需要的地方打上断点，再把错的注释，刷新页面，就可以断点调试了 但是后来不知道为什么这种方法没用了，不管怎么样打断点，虽然执行了这段代码，但就是不会进入断点 后来，找到一种更好用的方法 直接在需要断点...
Chrome DevTools 本地修改 JavaScript 深入全面讲解
07-20 2185
通过以上方法，您可以高效利用 Chrome DevTools 动态修改 JavaScript，实现快速调试、测试和临时修复。
如何使用VSCode调试JS？
weixin_49669470的博客
09-10 1373
序言 做前端开发的朋友经常需要使用Visual Studio Code编辑代码，很多朋友就想在VSCode调试JS代码，下面我们就介绍下如何配置操作。 一、环境准备 首先安装好VSCode，准备好一个JS项目，在VSCode中安装插件Debugger for Chrome （如下图操作搜索安装即可）。 二、修改配置文件 1. 使用VSCode打开项目 没有可以测试项目的可以使用HBuilder等工具新建一个Web项目进行测试，如下： 然后，使用VSCode打开上述项目，如下： 2. 设置断点 按F5
chrome调试动态js
ccecwg的专栏
01-24 1246
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#breakpoints-dynamic-javascript 在js文件中加以下注释：//@ sourceURL=jsName(随便取)，就可以在chrome中显示对应的js文件，方便debug 注意：空格不能少
vscode 启动服务和js的debug
zhansan的博客
06-18 2688
vscode 启动服务和js的debug
调试视频网页js脚本的方法
雪峰流云
12-23 2153
1.按F12，在chrome中打开开发者工具，选择Source，打开侧边栏，点击你想要调试的js脚本，打开源码 参见下面的图示 2.使用右下角的{}工具，将压缩后的js代码变成整齐对齐的代码，便于阅读和分析，参见下图 3.在指定代码处设置断点，按Ctrl+F5，强制刷新网页，观察设置代码处的数据变化。
chrome浏览器如何断点调试
06-24 3752
js前端必不可少的需要用到浏览器调试，而chrome是前端开发者们较常用的浏览器，那么chrome断点调试技能的掌握必不可少。 工具/原料 chrome浏览器 方法/步骤 首先我们在需要调试的界面按 F12 打开开发者工具 打开成功可以看到上图所示的弹出工具。本经验是如何调试，所以直接进入正题，点击 Sources 标签 左边 Page 标签下显...
如何使用ndb：提升Node.js调试效率的终极指南
最新发布
gitblog_00452的博客
03-24 893
ndb 是一款基于 Chrome DevTools 的 Node.js 调试增强工具，它为开发者提供了更高效、更直观的调试体验。无论是断点调试、性能分析还是异步代码追踪，ndb 都能帮助你轻松应对 Node.js 应用开发中的各种挑战。 ## 快速安装 ndb 的两种方法 ### 全局安装（推荐新手） 通过 npm 或 yarn 可一键全局安装 ndb： ```bash # 使用 npm np
如何调试Javascript代码
weixin_34293911的博客
11-09 177
转自原文如何调试Javascript代码 目前，常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能。作为我们.NET 阵营，学会如何在IE中调试JS就足够了，在掌握了IE中的调试方法以后，Chrome和Firefox中的调试方法也变得相当简单了。 在F12开发人员工具中进行调试 打开IE浏览器，按下F12键，就会打开开发人员工具...
如何调试JS中鼠标悬停事件影响的元素？
ice breaker's blog
07-21 3849
鼠标悬停俗称hover，它会在鼠标指针悬停在被选元素上时触发。一般前端开发会利用css中的hover伪类选择器，来给被选元素应用不同的样式，从而增强用户的体验感。最常见的例子就是Button。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值