谷歌断点调试(转载)

断点,调试器的功能之一,可以让程序中断在需要的地方,从而方便其分析。也可以在一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,同时节省了时间。 ——百度百科

简单地说,断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。

Sources面板

Sources面板是chrome developer tool中的断点调试面板。我们打开Sources面板后其实会在界面中看到如下内容,我们跟着逐一看看都是什么意思:

1.左上蓝色模块  网站文件目录树。

2.右上黄色模块  左侧所选文件的具体内容展示区

3.右下绿色模块  这一模块有俩个可切换区域:

  • scope :显示当前断点的作用域
  • watch :点击+号可添加你所需要监控的变量或者表达式

4.左下红色模块  主要核心功能区

  • Call Stack 显示当前断点的环境调用栈
  • Breakpoints 当前js断点列表,添加的每个断点都会出现在此处,点击列表中断点就会定位到内容区的断点上
  • DOM Breakpoints 当前DOM断点列表列表
  • XHR Breakpoints 当前xhr断点列表,可点击右侧+添加断点
  • Event Listener Breakpoints 事件监听器断点设置处
  • Event Listeners 当前事件监听断点列表

设置断点

断点调试的首要条件当然是添加断点,js断点添加的方式有俩种:

1.JS断点

  • Sources断点 Sources断点添加的流程是“F12(Ctrl + Shift + I)打开开发工具”——“点击Sources菜单”——“左侧树中找到相应文件”——“点击行号列”即完成在当前行添加/删除断点操作。当断点添加完毕后,刷新页面JS执行到断点位置停住,在Sources界面会看到当前作用域中所有变量和值,只需对每个值进行验证即可完成我们题设验证要求。
    • 条件断点 在Sources里还可以设置条件断点,在断点位置的右键菜单中选择“Edit Breakpoint...”可以设置触发断点的条件,就是写一个表达式,表达式为 true 时才触发断点。
  • Debugger断点 Debugger断点的添加就是通过在代码中添加"debugger;"语句,当代码执行到该语句的时候就会自动断点。

2.DOM断点 DOM断点,顾名思义就是在DOM元素上添加断点,进而达到调试的目的。而在实际使用中断点的效果最终还是落地到JS逻辑之内。 DOM断点的添加流程为:打开Elements面板——定位到相关DOM节点——单机鼠标右键,弹出侧边栏——鼠标移动到Break on...上,选择相应选项subtree modifications/attributes modifications/node removal即可。

  • 子节点变化断点 (subtree modifications) 主要针对子节点增加、删除以及交换顺序等操作,但子节点进行属性修改和内容修改并不会触发断点。
  • 节点属性断点 (attributes modifications)
  • 节点移除断点 (node removal)

3.XHR断点(XHR Breakpoints) 我们可以通过“XHR Breakpoints”右侧的“+”号为异步断点添加断点条件,当异步请求触发时的URL满足此条件,JS逻辑则会自动产生断点。

4.事件监听器断点(Event Listener Breakpoints) 事件监听器断点,即根据事件名称进行断点设置。当事件被触发时,断点到事件绑定的位置。事件监听器断点,列出了所有页面及脚本事件,包括:鼠标、键盘、动画、定时器、XHR等等。

断点调试

断点调试主要用到以下功能键,从左到右依次为:

  • Pause/Resume script execution:暂停/恢复脚本执行(程序执行到下一断点停止)。
  • Step over next function call:执行到下一步的函数调用(跳到下一行)。
  • Step into next function call:进入当前函数。
  • Step out of current function:跳出当前执行函数。
  • Deactive/Active all breakpoints:关闭/开启所有断点(不会取消)。
  • Pause on exceptions:异常情况自动断点设置。

注:原文地址  http://www.cnblogs.com/yzg1/p/5578363.html

支持原创!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart 4.0 高级-安全

本页面介绍了Angular内置的针对常见的Web应用程序漏洞和跨站脚本攻击等攻击的内置保护。 它不包括应用程序级别的安全性,如身份验证(此用户是谁?)和授权(此...

10720
来自专栏DeveWork

Web 前端性能优化相关内容解析

Web 前端性能优化相关内容,来源于《Google官方网页载入速度检测工具PageSpeed Insights 使用教程》一文中PageSpeed Insigh...

271100
来自专栏技术博客

ExtJs十一(ExtJs Mvc图片管理之一)

图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内。因而,将图片管理做成一个扩展比较方便。当然,做成MVC模式也行,不争...

15130
来自专栏偏前端工程师的驿站

打造高效前端工作环境 - tmux

打造高效前端工作环境 - tmux 前言  现在前端开发可不容易啊,先打开个VIM,然后再打开个lite-server,一不小心写个ES2015还要打开个gul...

28160
来自专栏开源项目

项目推荐 | 基于 Vue2.0 的 App 轻量框架

vue app,基于 Vue2.0 开发用于快速搭建 App 的轻量框架。 项目说明 JTaro 是一款基于 Vue2.0 开发的轻量级 SPA(单页应用)框架...

37650
来自专栏韩东吉的Unity杂货铺

零基础入门 7: 创建自己的菜单

在上一篇菜单介绍分享之后,有一些小伙伴在后台留言说能不能分享下如何创建自定义的菜单栏?怎么创建?

11240
来自专栏salesforce零基础学习

salesforce零基础学习(七十四)apex:actionRegion以及apex:actionSupport浅谈

我们在开发中,很难会遇见不提交表单的情况。常用的apex:commandButton,apex:commandLink,apex:actionFunction,...

28070
来自专栏美丽应用

ChromePie:单手搞定Chrome

19030
来自专栏Youngxj

js实现网页弹出窗口的代码详细教程

79450
来自专栏HTML5学堂

深入剖析iframe跨域问题

HTML5学堂:本文当中我们介绍了跨域的基本知识,讲解到了跨域的相关种类,并讲解了解决跨域中的一种方法——如何使用iframe跨域。讲解了iframe跨域的基本...

2.1K40

扫码关注云+社区

领取腾讯云代金券