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– 若抛出异常则需要暂停在那里】

原文:https://blog.csdn.net/weixin_41829196/article/details/83501881

Chrome开发者工具详解(二)之使用断点调试代码下的更多相关文章

  1. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

  2. Chrome开发者工具详解(4)-Profiles面板

    Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...

  3. Chrome开发者工具详解(3)-Timeline面板

    Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...

  4. Chrome开发者工具详解(2)-Network面板

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

  5. Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...

  6. 【转】Chrome开发者工具详解

    https://www.jianshu.com/p/7c8552f08e7a Chrome开发者工具详解(1)-Elements.Console.Sources面 Chrome开发者工具详解(2)-N ...

  7. Chrome开发者工具详解(1)

    Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...

  8. Chrome开发者工具详解(2)

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...

  9. 【Tools】Chrome开发者工具详解

    作为一名前端开发者,打交道最多的可能是和浏览器.市面上各种浏览器多不胜数,主流的有Chrome,Firefox,Safari,IE,Opera,非主流的如360,遨游,QQ浏览器,搜狗浏览器,据说淘宝 ...

  10. Chrome开发者工具详解(1):Elements、Console、Sources面板

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...

随机推荐

  1. MongoClient类

    在2.10.0版本中引入了MongoClient类,同时在其API中也说明了Mongo类会在将来的版本中被MongoClient替换(Note: This class has been superse ...

  2. 洛谷 P5022 旅行——题解

    发现大部分题解都是O(n^2)的复杂度,这里分享一个O(n)复杂度的方法. 题目传送 首先前60%的情况,图是一棵无根树,只要从1开始DFS,每次贪心走点的编号最小的点就行了.(为什么?因为当走到一个 ...

  3. (79)【按键】[独立按键] - 1: 单击,双击,三击以及N击

    此按键程序的实现的功能是单个独立按键的[单击],[长按],[双击],[三击]以及[多击].本文分为三个部分, 第一个部分是说[单击],[长按]的程序: 第二部分是讲[双击]: 第三部分是讲[三击],[ ...

  4. yield return的使用。。。

    因为要取两个集合不同的元素,所以写了个拓展方法,用到了yield这个关键字,然后就学习了一波.先上代码 public static IEnumerable<T> NoRetainAll&l ...

  5. python面向对象之设计模式

      概念: 设计模式(Design Pattern)是一套被反复使用.多数人知晓的.经过分类的.代码设计经验的总结.使用设计模式的目的:为了代码可重用性.让代码更容易被他人理解.保证代码可靠性. 设计 ...

  6. (转)openssl 命令: openssl req 命令详解

                                      openssl req命令主要的功能有,生成证书请求文件, 查看验证证书请求文件,还有就是生成自签名证书.本文就主要记录一下open ...

  7. JavaScript apply

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply The ...

  8. C++嵌入lua

    需要在C++程序里面嵌入lua 下面是代码,怕忘记,记录一下 #include <stdio.h> #include <stdlib.h> extern "C&quo ...

  9. kurento搭建以及运行kurento-hello-world

    搭建环境的系统是ubuntu 1.kurento服务器搭建 运行如下脚本即可完成安装 #!/bin/bash echo "deb http://ubuntu.kurento.org trus ...

  10. leetcode-mid-design-297. Serialize and Deserialize Binary Tree¶-NO -??

    mycode 将list转换成树的时候没有思路 参考: deque 是双边队列(double-ended queue),具有队列和栈的性质,在 list 的基础上增加了移动.旋转和增删等 class ...