文档章节

Chrome 开发工具之Sources

_野兽
 _野兽
发布于 2016/06/19 11:34
字数 1170
阅读 5
收藏 0

Sources面板主要用于查看web站点的资源列表及javascript代码的debug

熟悉面板

了解完面板之后,下面来试试这些功能都是如何使用的。

文件列表

展示当前页面内所引用资源的列表,和平常的文件tree一样。

内容区域

可在该区域查看打开的文件的脚本,也可以在区域内下断点,打断指定执行代码行。

断点方式:

1.在脚本中写入debugger

2.在Sources面板文件内标注断点。

debugger:

var num = 1; console.log(num); debugger;

效果图:

标注断点:

在下断点的代码行前点击左键/或者点击右键选择"Add breakpoint"。

效果图:

在下断点的代码行前右击可操作断点状态,也可使用"Edit breakpoint"控制断点条件。

如上图,仅当满足 num = 5 时触发断点。

在执行到断点的时候,脚本不会继续向下执行,而这时,将鼠标放到想查看的变量名上,即可显示该变量信息。

按钮组介绍

continue:继续执行代码,直到遇到另一个断点。

step_over:按正常步骤,应该会一行一行的执行相关代码,以便深入探索哪些代码影响着正在更新的变量。如果你的代码中调用了另一个函数,点击此按钮将不会进入该函数,而是直接略过,将焦点留在当前函数上。

step_into:进入被调用的函数并且调试器将将其执行到该函数定义中的第一行。

step_out:在已进入一个函数后,单击此按钮将导致函数定义的其余部分的运行,调试器将将其执行到父函数。

disable-breakpoints:控制断点开/关的按钮。

pause-gray:在异常处产生断点。

此处elem是错误的,应该为ele,所以触发了异常断点。

变量监听

对加入监听列表的变量进行监听,在该面板的右侧有添加变量和刷新变量列表的按钮。

在断点1,2,3时所监听到的值分别是undefined,0,1。

堆栈跟踪

一般喊作调用堆栈的,不过感觉用堆栈跟踪来形容更好些。堆栈跟踪显示了一条完整的导致代码被暂停的执行路径,让我们深入了解导致错误的原因。

上图在fnC下断点,该面板显示fnC函数的执行路径,分别是从fnA调用fnB,fnB再调用fnA,并且堆栈跟踪列表中还有每一步调用分别在哪个文件和在文件的第几行。

作用域

当前断点所在函数执行的作用域内容。

当前作用域里的对象是本地参数_obj和Global,this指向window,之后我们执行下一步,去下一个断点看看。

现在作用域对象是本地对象和Global,this指向obj。

断点列表

展示断点列表,将每个断点所在文件/行数/改行简略内容展示。

DOM断点列表

给DOM加断点,在达到规定条件时触发断点,截断javascript的执行并且定位到断点处。详情可参考"Chrome 开发工具之Elements"中的介绍。

请求断点列表

对达到满足过滤条件的请求进行断点拦截,点击该面板右侧加号按钮,会跳出"Break when URL contains"以填写过滤条件。

当满足url拦截条件时,便会在该请求执行发送处进入断点。下面换个不满足条件的url测试。

和预料中的一样,并没进入断点。

可断点的事件监听列表

打开这个列表,可以在监听事件并且在触发该事件时进入断点,调试器会停留在触发事件代码行。只需要展开事件列表,选择要监听的事件打上勾即可。

代码格式

当文件是压缩文件的时候,代码往往是一行的,点击该按钮即可显示规范的代码格式。

代码位置

显示当前焦点在几行几列。

细心的朋友看到这应该发现,Async和Event Listeners(测了下,好像跟Elements面板的Event Listeners对应不上)的介绍是没写的。这部分google了好多资料,感觉都不是想要的答案,包括在chrome官网的dev tools介绍里也只是略过,没找到案例,于是暂未下定论。希望有会的朋友给出补充~ 当然,本兽也在寻找答案中...

© 著作权归作者所有

共有 人打赏支持
_野兽
粉丝 3
博文 68
码字总数 93670
作品 0
衢州
程序员
私信 提问
React Native / React调试技巧

React Native / React调试技巧 做过原生APP开发的同学们都清楚,我们在Xcode和studio中就可以直接对编写的代码进行断点调试,很方便,但是web开发断点调试就不能直接在开发工具中完成了,需要...

光强
09/12
0
0
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传...

peakedness丶
11/25
0
0
【Chorme】前端调试工具之Chorme专篇

【相关来源】 Browser-Sync:响应式Web开发调试利器 开发者调试工具Chrome Workspace Chrome中的 workspace 工具(官方) Chrome调试工具developer tool技巧 【Chrome开发,debug的使用方法。...

呢喃的猫咪
2013/02/27
0
1
[译] 源代码映射(Source Map)简介

原文地址:An Introduction to Source Maps 原文作者:Matt West 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:EmilyQiRabbit 校对者:calpa, Raoul1996 源代码映射...

玉儿Qi
10/29
0
0
chrome使用技巧(看了定不让你失望)

chrome是我比较喜欢的一个浏览器,本文作者通过图文并茂的方式向我们展示了Chrome的13个基础使用技巧,我从中发现跟使用Sublime Text2中有很多类似的快捷键,希望你也能从中有所收获。 1.快速...

codeGoogle
08/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

09.ajax局部渲染---《Beetl视频课程》

本期视频实现分类实时获取; 内容简介:使用了局部渲染技术,实现分类的实时获取 一起学beetl目录:https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598 作者:GK Beetl满足了更...

Gavin-King
4分钟前
0
0
同步访问共享的可变数据(66)

关键字synchronized 保证同一时刻,只有一个线程执行某一个方法或代码块 当一个对象被一个线程修改时,可以阻止其他线程看到其内部的不一致状态 正确的使用同步可以避免任何对象看到其不一致...

Java搬砖工程师
6分钟前
0
0
银行卡二要素真实性查询

验证用户的银行卡号、持卡人姓名是否真实。 示例代码: private static String host = "https://bank.market.alicloudapi.com";private static String path = "/bank2";private sta...

貔貅叔
10分钟前
0
0
iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码

iOS精选源码 JHAlertView - 一款黑白配色的HUD之沙漏效果 继承UIButton的自定义按钮SPButton 用递归算法实现iOS补位动画 iOS 长按移动UITableViewCell JHLikeButton - 有趣的点赞动画 兼容X...

Android爱开源
21分钟前
0
0
上币至iamToken

https://github.com/consenlabs/token-profile 点击Fork按钮,插入到自己的github项目中 cd /Users/shijun/Desktop/blockChain/iamToken git clone https://github.com/yellmi1983/token-pro......

八戒八戒八戒
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部