文档章节

Chrome 开发工具之Sources

_野兽
 _野兽
发布于 2016/06/19 11:34
字数 1170
阅读 5
收藏 0
点赞 0
评论 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
衢州
程序员
chrome浏览器中 F12 功能的简单介绍

由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首先介绍Chrome开发者工具中,调...

m0_37724356 ⋅ 04/10 ⋅ 0

Chrome OS 新版已可运行 Linux 应用

导读 今年二月底,我们曾报道了 Chrome 开发人员正在开发一个名为 Crostini 的项目,暗示着 Chrome OS 即将支持运行 Linux 应用。 今年二月底,我们曾报道了 Chrome 开发人员正在开发一个名为...

linuxprobe16 ⋅ 05/20 ⋅ 0

Webstorm+Chrome plugins JetBrains IDE Support实现强大的JavaScript调试功能

前言 WebStorm是Jetbrains公司旗下一款JavaScript 开发工具,当你打开这款软件的时候会觉得特别的熟悉,因为它和itellj idea属于同款产品,界面和快捷键基本类似,而且功能非常强大,提示也非...

changyinling520 ⋅ 05/10 ⋅ 0

WEB前端开发学习:调试过很多次bug,你了解Chrome控制台的$符的用法吗?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 06/01 ⋅ 0

ChromeOS 终端应用程序暗示其即将支持 Linux 应用

Chromebook也可以运行Linux程序。这种可能性在去年2月已经暗示,但随着终端应用程序在Chrome操作系统的开发通道中出现,这种情况可能会很快到来。目前讽刺的是,这种基于Linux的Chrome操作系...

达尔文 ⋅ 04/25 ⋅ 0

Jerry和您聊聊Chrome开发者工具

Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用。不信? 用Chrome打开我们常用的网站,按F12,在Console标签页里看到这...

jerrywangsap ⋅ 04/16 ⋅ 0

ChromeOS终端应用程序暗示其即将支持Linux应用

Chromebook也可以运行Linux程序。这种可能性在去年2月已经暗示,但随着终端应用程序在Chrome操作系统的开发通道中出现,这种情况可能会很快到来。目前讽刺的是,这种基于Linux的Chrome操作系...

稿源:cnBeta.COM ⋅ 04/23 ⋅ 0

不止于 Android,Chrome OS 新版已可运行 Linux 应用

今年二月底,我们曾报道了 Chrome 开发人员正在开发一个名为 Crostini 的项目,暗示着 Chrome OS 即将支持运行 Linux 应用。昨日,外媒 Chrome Unboxed 证实,Chrome OS 开发者通道的最新版本...

王练 ⋅ 05/05 ⋅ 0

PWA(Progressive Web App)入门系列:(二)相关准备

前言 在上一章中,对PWA的相关概念做了基本介绍,了解了PWA的组成及优势。为了能够更快的进入PWA的世界,这一章主要对在PWA开发中,需要注意的问题,运行的环境及调试工具做介绍说明。 浏览器...

lecepin ⋅ 2017/12/26 ⋅ 0

开发者工具又加了什么好东西?(Chrome 68)

转载自 blog.vvvvvvvvvvvvvvv.com/2018/05/28/… 由 Chrome官方文章 翻译, 建议查看英文原文, 作为程序员, 读懂官方文档应当是必备的技能(因为译文包含了译者的思维, 不一定能精确的表达原文...

15v网技术负责人 ⋅ 05/31 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

BS与CS的联系与区别【简】

C/S是Client/Server的缩写。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、InFORMix或 SQL Server。客户端需要安装专用的客户端软件。 B/S是Brower/...

anlve ⋅ 39分钟前 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 59分钟前 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 今天 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部