使用debugger语句调试JS

最新推荐文章于 2024-05-27 09:57:58 发布
转载 最新推荐文章于 2024-05-27 09:57:58 发布 · 234 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/sharesuiyue/blog/787911
文章标签：

#python

本文介绍了如何利用谷歌浏览器中的debugger语句进行前端调试。只需在JS代码中加入debugger;语句，即可在Chrome浏览器的开发者工具中设置断点，方便查看变量值、DOM结构及跟踪自定义JS函数等。

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

debugger是谷歌浏览器提供的调试语句，它的使用方法很简单， 在我们的JS语句中， 插入一行debugger; 即可

102415qihfhrcuhafp4oh0.png 

我们将谷歌浏览器设为默认浏览器， 然后预览这个模板，然后打开谷歌浏览器的开发者工具窗口（快捷键为F12)
接下来， 我们触发js程序段，在上面的例子中， 是点击该按钮
于是，谷歌浏览器的开发者窗口 就在debugger语句处停下， 我们可以查看各个变量的值，帆软自定义的JS函数，DOM结构 等等
然后，点击“继续运行按钮”（快捷键F8） 就可以继续运行了
103419o0d8tlm8etzwwaf0.png 
 

​

转载于:https://my.oschina.net/sharesuiyue/blog/787911

JavaScript debugger调试
weixin_52682120的博客
05-09 2152
debugger F10 ： 一行行执行，看到方法一步执行完，无法看到方法的执行情况。 F11： ～～进去方法内部，可以看到方法的执行。 F12：进入调试模式。 <script> input.onkeyup=function(){ debugger; show.style.display="block"; //2 元素匹配 // input.value 和 arr数组中的每一位进行匹配 indexOf() 匹配不到就-1 let str=
【JavaScript】使用debugger语句快速开启浏览器调试代码工具
qq_2511276124的博客
03-14 546
有的时候我们想开启浏览器代码调试功能，这个时候应该使用debugger语句。
调试Javascript代码(浏览器F12及VS中debugger关键字)
10-27
目前，常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能下面我就介绍如何在浏览器/VS中调试我们的JS代码,感兴趣的你可不要走开啊，希望本文对你有所帮助
使用debugger语句调试JScript的郁闷
weixin_34112208的博客
08-21 139
    在JScript3.0中，微软引入了一个叫debugger的关键，用来帮助我们调试脚本代码。这样一来，我们就可以摒弃使用错误语句来触发调试的土方法了。结果在使用debugger语句的时候，发现它的一个优点居然同时也成为了一个缺点，在某些时候还没有土方法好用，真是郁闷。    debugger关键字的作用是在JScript处于调试状态下运行时，为我们挂起当前执行并唤起脚本调试器。比如在我的机...
js调试技巧（通过debugger调试）
热门推荐
iilegend的博客
11-29 10万+
通常我们在网站开发的过程中会用到很多JavaScript代码，js代码智能提示和检错机制又很差，这时候就需要我们自己来进行调试，调试方法有很多，以前用的是火狐浏览器的调试工具，但是后来版本等等的原因不能用了，现在就用debugger在谷歌浏览器中进行调试。 如下一段js代码： //查询方法实现 function search(){ debugger； var
js的debugger工具调试技巧
daponi的博客
07-02 9081
    .java文件可以在开发环境里打断点来调试，而.jsp文件也可以打断点来调试。但.jsp文件加断点的方法与.java文件加断点的方式不同，.jsp是在要调试的代码处加入debugger;语句来标识断点的位置，而当前端页面点击触发到该代码处时，就会自动弹出调试的消息。 1.在代码处加入debugger； //查询方法实现 function se...
Pure JS (6.1)：使用 Rhino Shell 和 Debugger 运行和调试 JS
07-31
**标题解析：** "Pure JS (6.1)：使用 Rhino Shell 和 Debugger 运行和调试 JS" 这个标题表明我们将深入探讨如何利用Rhino Shell和JavaScript的调试工具来执行和调试纯JavaScript代码。Rhino是Mozilla开发的一个开源...
JS debugger 调试
04-26
JavaScript（简称JS）调试是开发过程中不可或缺的一部分，它帮助开发者找出代码中的错误、性能瓶颈以及逻辑问题。在本文中，我们将深入探讨JS调试的各种方法、工具和技术，以便于提升您的编程效率。 首先，我们来看...
JS——错误调试与处理debugger&try catch
LT的博客
06-27 1130
一、语法错误 原因：不符合JS语法。 查询方法：出现语法错误，控制台（console）会进行报错并告知出错的行号（但行号不一定准确）；在浏览器中按F12键，会出现控制台。 如图： 常见的语法错误： 符号漏打、多打、少打、错打。 使用了不合法语法的变量名（例var for； var function，变量名规则：以字母、下划线、美元符号开头；区分大小写；由字母、下划线、$或数字组成；不能使用关键字和保留字）。 语句写错，没写完。 二、运行时错误 运行错误（Running Error），是指代码没有语法
debugger
jinghongdaxiong的博客
04-06 876
debugger debugger是谷歌浏览器提供的调试语句，它的使用方法很简单， 在我们的JS语句中， 插入一行debugger; 即可   我们将谷歌浏览器设为默认浏览器， 然后预览这个模板，然后打开谷歌浏览器的开发者工具窗口（快捷键为F12) 接下来， 我们触发js程序段，在上面的例子中， 是点击该按钮 于是，谷歌浏览器的开发者窗口 就在debugger语句处停下， 我们可
java报表插件FineReport在开发过程中如何调试插件详细教程
08-03
FineReport在开发过程中如何调试插件详细教程
前端debug调试方式
java技术博客
03-03 9430
前端debug调试方式 debug , 手动打断点 , 大壮(console.log , alter) , IDE
javascript之debugger与断点调试
weixin_68160847的博客
01-11 9535
程序就是函数堆砌起来的，程序的运行就是函数的执行过程。而通过JS调试，我们可以更为直观的追踪到在程序运行中，函数的执行顺序，以及各个参数的变化。这样我们就可以快速的定位到问题所在。
JSDebugger：深入探索应用运行状态的JavaScript调试工具
gitblog_00050的博客
05-27 444
JSDebugger：深入探索应用运行状态的JavaScript调试工具 项目介绍 JSDebugger 是一款基于JavaScript的运行时调试工具，旨在帮助开发者深入挖掘应用程序的运行细节，并动态修改应用逻辑。该项目目前处于快速开发阶段，首个稳定版本为v0.8。通过JSDebugger，开发者可以在不手动定义JSExport的情况下，随时调用任何Objective-C方法。 项目技术分析 J...
调试Js的利器 - debugger语句
日々精進
06-29 3096
调试Js的利器 - debugger语句
PHP调用帆软,JS 调用 FR 打印方法
weixin_42513602的博客
04-01 1329
JS 打印接口：FR.doURLPrint(config)，使用 get 传参，具体 config 参数如下表所示：参数含义printurl需要打印的模板的应用地址和服务，如"http://localhost:8075/webroot/decision/view/report"允许为空。如果为空的话，就使用当前的 servlet 地址。如果需要跨域，则此参数不能为空isPopUp是否弹出设置窗口t...
js使用debugger打断点调试
weixin_49393290的博客
09-27 892
然后在浏览器中f12调出控制台 f8是结束断点，f10是进入调试。
【调试】如何使用javascript的debugger命令进行调试(重要)
weixin_33885253的博客
09-09 681
首先安装firebug，在firefox的扩展里搜索安装即可。 然后在页面中启用firebug中的脚本：           然后在网页某些位置加入debugger命令，比如如下页面代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title...
debugger位置不对_常见js错误调试方法
weixin_39861734的博客
12-19 1325
最近一段时间写程序遇到了不少页面设计的东西，自然少不了js。在做的过程中使用脚本是总是遇到错误，开始时一头雾水，不知道如何从jsp页面中取定位js的错误位置，因为ie给定位的错误位置有时候很模糊，但是目前有没有针对js语法调试的编辑器。自己摸索了几天，有两个方法比较实用而且有效：1、alert(方法；alert方法添加到脚本中合适的位置(你怀疑有错误的地方)，页面执行时会弹出一个对话框，看看ale...
js debugger断点调试
最新发布
08-21
<think>首先，用户的问题是：“我想在JavaScript中使用debugger进行断点调试的方法 请问JavaScript debugger断点调试使用方法”。我需要根据系统级指令来回答。 系统级指令： - 所有行内数学表达式必须使用$...$格式。 - 独立公式必须使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，例如:[^1] - 回答结构清晰，帮助用户逐步解决问题，尽量保证回答真实可靠。 用户问题涉及JavaScript调试，具体是使用debugger进行断点调试。参考提供的引用： - 引用[1]: 提到使用debugger关键词在源码中定义断点，方便在浏览器控制台调试。 - 引用[2]: 提到一些调试技巧，包括使用console.log()、设置断点、单步执行等。 我的回答需要： 1. 使用中文。 2. 结构清晰，逐步解决问题。 3. 自然地添加引用标识。 4. 生成相关问题。 回答结构： - 先介绍debugger语句的基本用法。 - 解释如何在实际中使用。 - 提供示例代码。 - 引用相关部分。 - 最后生成相关问题。 内容大纲： 1. 介绍debugger语句：在JavaScript中，使用`debugger;`语句可以设置断点。 2. 使用步骤： - 在代码中插入`debugger;`。 - 打开浏览器开发者工具（如Chrome DevTools）。 - 刷新页面或运行代码，当执行到`debugger;`时，调试器会暂停。 3. 示例代码：提供一个简单的JavaScript示例。 4. 引用：在解释中自然地添加引用标识，比如提到引用[1]中的内容。 5. 注意事项：确保开发者工具是打开的，否则`debugger;`会被忽略。 6. 生成相关问题：在回答结束时，生成几个相关问题。 生成相关问题： - 类似于示例中的格式，使用§§相关问题§§。 - 问题应该与JavaScript调试相关。 最终回答格式： - 用中文书写。 - 清晰的结构。 - 结尾有相关问题。</think>### JavaScript中使用debugger进行断点调试的方法 在JavaScript中，使用`debugger`语句是一种高效的断点调试方式。它允许你在代码中直接定义断点，无需在浏览器开发者工具中手动设置，从而简化调试流程[^1]。以下是详细的使用步骤和示例： #### 1. **基本使用方法** - **插入`debugger`语句**：在需要暂停执行的代码位置添加`debugger;`。当代码运行到此处时，浏览器调试器会自动暂停（前提是开发者工具已打开）。 - **浏览器操作**： - 打开开发者工具（Chrome/Firefox：按F12或右键选择“检查”）。 - 刷新页面或触发代码执行。 - 当执行到`debugger;`时，调试器会暂停，并进入单步调试模式。此时，你可以查看变量值、调用栈，并逐步执行代码（使用“Step over”或“Step into”按钮）。 - **注意事项**：如果开发者工具未打开，`debugger;`语句会被忽略，不会影响代码运行。建议在开发环境中使用，生产环境中应移除或禁用。 #### 2. **示例代码** 以下是一个简单示例，演示如何在函数中插入`debugger`进行调试： ```javascript function calculateSum(a, b) { debugger; // 执行到此行时暂停，可检查a和b的值 let sum = a + b; console.log("Sum is:", sum); return sum; } // 调用函数触发调试 calculateSum(5, 3); ``` - **步骤说明**： 1. 将上述代码保存为HTML文件或在浏览器控制台运行。 2. 打开开发者工具（确保“Sources”或“Debugger”面板可见）。 3. 运行代码后，调试器会在`debugger;`处暂停。 4. 在暂停状态下，可以： - 查看变量（如`a`, `b`, `sum`）的值。 - 单步执行（点击“Step over”按钮逐行运行）。 - 修改变量值实时测试。 #### 3. **高级技巧** - **条件断点**：结合`if`语句实现条件暂停，例如： ```javascript if (errorCount > 5) { debugger; // 仅在错误次数超过5时暂停 } ``` - **与开发者工具结合**：在暂停状态下，使用“Watch”面板监视变量变化，或使用“Console”面板执行临时代码[^2]。 - **性能优化**：避免在循环中频繁使用`debugger;`，以免影响执行效率。调试完成后，务必移除所有调试语句。 #### 4. **常见问题解决** - **调试器不暂停**：确保开发者工具已打开，且未禁用断点（检查开发者工具中的“Deactivate breakpoints”选项）。 - **跨浏览器兼容**：`debugger;`在所有现代浏览器（Chrome、Firefox、Edge）中均支持，语法一致。 - **替代方法**：如果`debugger;`不适用，可在开发者工具中手动设置断点（在“Sources”面板点击行号），但`debugger;`更快捷[^1]。 通过以上方法，你可以高效地定位和修复代码错误。debugger语句是JavaScript调试的核心工具之一，结合浏览器开发者工具能大幅提升开发效率[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值