chrome调试折腾记_js断点调试技巧

crper      2022-02-06     17

关键词:

JS调试技巧

技巧一:格式化压缩代码

技术分享
技术分享


技巧二:快速跳转到某个断点的位置

右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该断点的位置

技术分享


技巧三:查看断点内部的作用范围【很实用】

右侧的scope可以看到相当多实用的信息,比如this的指向,是否有值,断点是对象还是其他等。。
技术分享


技巧4:监听事件断点

右侧的Event Listener Breakpoints可以选择性的监听某类行为事件,比如键盘输入,拖拉等。。勾选前面的checkbox就可以生效,当你触发改行为的时候就会跳转到触发的JS

技术分享


技巧5:DOM及 XHR监听跳转

DOM Breakpoints : 是你Elements页,感觉要监听某段dom的可能有一些行为,但是又不具体知道确切位置就可以用了
技术分享
技术分享

XHR Breakpoints: 向服务器请求的,ajax的核心要点
默认勾选了,所有XHR行为,可选项是判断URL。。。我用的不多
技术分享


技巧6:单步执行、单步进入、强制进入、单步退出

这个东东是调试中必不可少的,其实用过firebug的小伙伴,对这个就有一个清晰的认识你。基本一样;先上图;

技术分享

功能名词依次,不懂的可以看看我firebug那个系列的

  • Pause script excution 【单步执行,在断点处暂停,等待调试–不是直译】 : 暂停后这个按钮会变成 Resume script excution 【继续执行】 , 快捷键 【F8 或者 Ctrl + 】
  • Step over next function call【单步跳过】 : 会跳到下一个断点,快捷键 【F10 或者 Ctrl + `】
  • Step into next function call【单步进入】 : 会进入函数内部调试,快捷键【F11 或者 Ctrl + ;】
  • Step out of current function 【单步跳出】: 会跳出当前这个断点的函数,快捷键【Shift + F11 或者 Ctrl + Shift + ;】

后面的就是chrome的特色功能

  • Deactivate breakpoints : 使所有断点临时失效,快捷键【Ctrl + F8】
  • Don’t Pause on exceptions: 不要在表达式处暂停,还有一个可选项【Pause On Caught Exceptions– 若抛出异常则需要暂停在那里】

总结

这篇文章就到此处,更深入的及一些效率的小操作就到下篇文章再介绍,,,啦啦啦







js调试必备的5个debug技巧

...; debugger语句用于停止执行JavaScript,并调用(如果可用)调试函数。使用debugger语句类似于在代码中设置断点。通常,你可以通过按下F12开启调试工具,并在调试菜单中选择"Console"。进入断点后,可以双击下面的某行代码,设新断... 查看详情

有哪些js调试技巧?

...。主要的技巧取决于你使用的调试工具,这里以我使用的chrome为例。首先跳出chrome的调试工具,右键选择检查。。接着弹出开发者窗口,如图这个就是调试页面了,然后单击顶头的source,找到你的js脚本,如图:图片中那个蓝色... 查看详情

参考博客:java断点调试技巧

Java断点调试技巧:如何调试Java程序?大家最开始学习Java,都会觉得IDE调试好高端有木有,其实很简单了。下文会尽量简单直观的教会你在Eclipse中调试,其他的IDE调试步骤也是类似的。1.在你觉得有错的地方设置断点。在代码行... 查看详情

javascript调试技巧

...最喜欢、快速且肮脏的调试工具。一旦执行到这行代码,Chrome会在执行时自动停止。你甚至可以使用条件语句加上判断,这样可以只在你需要的时候运行。愚人码头注:本人实在觉得这种调试方面很不好,因为后续的调试步骤和... 查看详情

转:windbg-跳过初始断点(调试技巧)

推荐:windbg调试驱动设置断点在对windows的驱动做双机调试时,总会需要在自己编写的驱动代码上设置断点。 1这需要首先,在windbg上设置工作空间(workspace)              &nbs... 查看详情

使用 Chrome 开发工具进行 JS 调试 [重复]

】使用Chrome开发工具进行JS调试[重复]【英文标题】:JSdebuggingusingChromedevtools[duplicate]【发布时间】:2019-02-0622:17:07【问题描述】:有没有办法在所有JS代码中设置断点?例如,假设我有一个按钮,当我点击它时,会执行一些JS代... 查看详情

如何进行html调试和js脚本调试

工具/原料chrome浏览器  Mozillafirefox  电脑方法/步骤1、以chrome为例,首先打开需要调试的页面,按F12快捷键打开调试工具。2、选择指定的dom节点进行查看和编辑。3、js断点调试:chrome非常强大,在chrome调试工具栏中... 查看详情

eclipse的debug调试技巧

一、Debug视图 调试中最常用的窗口是:  窗口说明Debug窗口主要显示当前线程方法调用栈,以及代码行数(有调试信息的代码)断点Breakpoints窗口=>断点列表窗口,可以方便增加断点,设置断点条件,删除断点等变量Variabl... 查看详情

idea--ideadebug断点调试技巧

...、计算表达式五、智能步入六、断点条件设置七、多线程调试八、回退断点九、中断DebugDebug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生的位置,以及在运行过程中参数的变化... 查看详情

eclipse的debug调试技巧大全

一、Debug视图调试中最常用的窗口是:窗口说明Debug窗口主要显示当前线程方法调用栈,以及代码行数(有调试信息的代码)断点Breakpoints窗口=>断点列表窗口,可以方便增加断点,设置断点条件,删除断点等变量Variables窗口=>显... 查看详情

ideaidea调试技巧异常断点断点之前显示异常字段(代码片段)

1.概述除了阅读源码,一定是遇到了异常我们才开始调试代码,代码在抛出异常之后会自动停止,但是我们希望:代码停在抛出异常之前,方便我们查看当时的变量信息这时我们就用到了ExceptionBreakpoints,当抛出异常时,在catch的... 查看详情

ideadebug断点调试技巧

Debug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生的位置,以及在运行过程中参数的变化。通常我们也可以启用Debug模式来跟踪代码的运行流程去学习三方框架的源码。一、Debug... 查看详情

4-8flutter调试技巧

安卓的错误代码在借助LogcatIOS接入XCode如何调试flutter代码首先是debug模式下运行代码断点可以设置表达式。这就是表达式断点。继续运行项目,运行到下一个断点。调试的时候查看变量的值有三种方式鼠标放在变量上二是变量的... 查看详情

vscode调试node.js

...,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试。其步骤有四,详情不表,粗略概括如下:打开Chrome开发者工具;点击进入Sources标签页,在页面的左侧就能看到JS代... 查看详情

继续分享5个实用的vs调试技巧(代码片段)

继续分享5个实用的vs调试技巧原总结调试vs2019vs前言我在上一篇文章《5个非常实用的vs调试技巧》中分享了5个我认为非常值得了解的vs调试技巧,本周继续分享5个很基础但同样实用的调试技巧。1.条件断点作用简介:顾名思义,... 查看详情

chrome如何调试js

是可以调试js的。使用的工具:谷歌浏览器、测试的网站;可以按照下面的方法进行调试:1、f12打开开发者工具,控制台介绍:Elements:页面元素,可以进行编辑,保存后实时查看页面效果;Network:查看js模拟的http请求,例如下... 查看详情

#前端浏览器调试工具使用技巧(代码片段)

前端浏览器调试工具使用技巧文章目录前端浏览器调试工具使用技巧调试hover后出现的元素方法一方法二JS断点调试debugger方式直接在调试窗口打断点浏览器快捷键Console使用Overrids使用本地Js替换服务上的JsF12ctrl+shift+p调出命... 查看详情

idea的一些使用技巧(调试篇)

....1、EvaluateExpression表达式求值。Alt+F82、RuntoCursor。Alt+F93、调试过程中手动改变值。在debug区选中参数,按F2.快捷键运行:ctrl+shift+F10查看历史运行列表:alt+shift+F9 查看详情