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. Spring Cloud云架构 - SSO单点登录之OAuth2.0登录流程(2)

    上一篇是站在巨人的肩膀上去研究OAuth2.0,也是为了快速帮助大家认识OAuth2.0,闲话少说,我根据框架中OAuth2.0的使用总结,画了一个简单的流程图(根据用户名+密码实现OAuth2.0的 ...

  2. 【转】C语言中数组名和指针的区别

    注:本文转自http://www.cnblogs.com/furaibo/archive/2010/03/19/1689710.html 魔幻数组名 请看程序(本文程序在WIN32平台下编译): #i ...

  3. [design pattern](6) Absract Factory

    前言 在前面的章节中,我们先后介绍了简单工厂模式和工厂方法模式.他们都是工厂模式大家族的一员,那么,本章将会接着上一章,来说一说工厂模式的最后一员,那就是抽象工厂模式. 思考题 首先,来思考下下面的问 ...

  4. java复制项目中的补丁,完整的包路径

    package com.bytter.audit.iface.util; import java.io.BufferedInputStream; import java.io.BufferedOutp ...

  5. sqli-labs(33)

    0X01构造闭合 发现‘ 被过滤了 那么 宽字节绕过 ?id=-%df%%20union%20,database(),%

  6. [BZOJ1059]:[ZJOI2007]矩阵游戏(二分图匹配)

    题目传送门 题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N×N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种 ...

  7. DataList是外部传入的子项数据列表

    //定义适配器类public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder>{ private C ...

  8. 使用mysql以及连接数据库

    MySQL Table of Contents 1. 安装与配置 2. 数据库与账户 3. 用户跟权限 4. 常用命令 5. 表的创建 6. 数据类型 7. 主键约束 8. 表的修改 9. 引擎(En ...

  9. c++实验7 二叉树

    二叉树数据结构表示及基本操作算法实现 1.所加载的库函数或常量定义及类的定义: #include<stdlib.h> #include<stdio.h> #include&qu ...

  10. Stream介绍

    一.Stream介绍 现在有这样的需求:有个菜单list,菜单里面非常多的食物列表,只选取小于400卡路里的并且按照卡路里排序,然后只想知道对应的食物名字. 代码: package com.cy.ja ...