http://www.w3cplus.com/tools/dev-tips.html

一、Sources 面板介绍:

Sources 面板分为左中右 3 部分
左:Sources 当前页面加载的资源列表,Content scripts 是在 Web 页面内运行的 js 脚本资源列表,同常是开发调试插件时使用。
中:代码面板,这里展示选中的脚本代码。
右:执行控制面板,可以在这里查看、控制断点以及一些运行的详细信息。

二、设置断点:

通过点击代码面板(中)侧边的行号来设置、取消断点,刷新页面即可看到效果:

进入断点调试状态后,就可以在执行控制面板(右)查看相应的信息:

1、调用栈(Call Stack):当遇到断点时,Call Stack 会显示当前断点所处的方法调用栈,调用栈中的每一层叫做一个 frame,点击任意 frame 可以跳到该 frame 的调用点上。在 frame 上反键可以选择 Restart Frame 可以重新执行该函数,配合变量修改和编辑代码等功能,可以在当前 frame 中反复进行调试。
2、作用域变量(Scope Variables):在这里可以查看此时局部变量和全局变量的值。
3、断点列表(Breakpoints):这里会列出你设置的所有断点,点击即可跳转到对应断点位置。

除了可以给 js 脚本设置断点外,还可以为 DOM 节点、XHR 请求、响应事件设置断点。

DOM 断点:

DOM 断点(DOM Breakpoints)可以监听某个 DOM 被修改情况,在元素审查的 Elements Panel 中在某个元素上右键菜单里可以设置三种不同情况的断点:子节点修改、自身属性修改、自身节点被删除。设置后 Sources Panel 中的 DOM Breakpoints 列表中就会出现该 DOM 断点。

当监听的 DOM 被修改时,断点就会定位到执行修改操作的代码,这对于绑定了多个事件的 DOM 调试有很大的帮助。

XHR 断点:

XHR 断点(XHR Breakpoints)可监听 Ajax 请求情况,点击 + 并输入 URL 即可监听该 URL 的 Ajax 请求,也可以什么都不填,那么就监听所有 XHR 请求,一旦 XHR 调用触发时就会在 request.send() 的地方中断。

事件断点:

事件断点(Event ListenerBreakpoints)可监听事件响应,在右侧的列表里列出了各种可能的事件类型,勾选对应的事件类型就会开始监听,当触发了该类型的事件的 JavaScript 代码时就会自动中断。

三、即时修改代码:

在代码面板中可以对代码进行修改,通过 ctrl(command) + s 保存后可即时生效,这样我们在免去修改代码、刷新浏览器、看结果的繁冗过程,更加直接快速的调试代码。

四、其它技巧

查找代码:

ctrl(command) + o 查找文件
ctrl(command) + shilt + o 查找函数

格式化代码:

大多 js 代码是压缩过的,可读性很差,Chrome 开发者工具提供格式化代码功能,通过代码面板(中)底部的『{}』按钮开启,开启后会加入换行和缩进。

Chrome 开发工具 Javascript 调试技巧的更多相关文章

  1. Chrome 开发工具指南

    Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...

  2. Chrome 开发工具之Sources

    Sources面板主要用于查看web站点的资源列表及javascript代码的debug 熟悉面板 了解完面板之后,下面来试试这些功能都是如何使用的. 文件列表 展示当前页面内所引用资源的列表,和平常 ...

  3. Chrome 开发工具之Console

    前段时间看git的相关,记的笔记也大致写到了博客上,还有些因为运用不熟,或者还有一些疑惑点,暂时也不做过多纠缠,之后在实践中多运用得出结论再整理分享吧. 工欲善其事,必先利其器.要想做好前端的工作,也 ...

  4. Chrome开发工具之Console

    Chrome开发工具-Console 看了别人的博客,才发现在百度主页用开发工具“Console”可以看到百度的招聘信息 前端调试工具可以按F12打开,谷歌的开发工具中的Console面板可以查看错误 ...

  5. [转帖]CHROME开发者工具的小技巧

    CHROME开发者工具的小技巧 https://coolshell.cn/articles/17634.html 需要仔细学习看一看呢. 2017年01月19日 陈皓 评论 58 条评论  64,08 ...

  6. Chrome 开发工具之 Memory

    开发过程中难免会遇到内存问题,emmm... 本文主要记录一下Chrome排查内存问题的面板,官网也有,但有些说明和例子跟不上新的版本了,也不够详细...   !!! 多图预警!!!    简单的内存 ...

  7. 实用Javascript调试技巧

    摘要: 高效调试JS代码. 原文:实用Javascript调试技巧分享 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 见过太多同学调试Javascript只会用简单的con ...

  8. Chrome 开发工具之Timeline

    之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...

  9. JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻 ...

随机推荐

  1. 流媒体一些server

    (1)darwin stream server (2)red5 (3)nginx rtmp

  2. CSS 指定选择器(十一)

    一.指定选择器 有时个会希望控制某个元素在一定范围内的对象样式,这时就可以把元素与Class或者Id选择器结合起来使用 <!DOCTYPE html PUBLIC "-//W3C//D ...

  3. 蓝牙Ibeacon室内定位和微信摇一摇周边原理分析

    苹果推出Ibeacon室内定位技术是为了弥补GPS无法覆盖室内定位这种场景.苹果意味着创新,在其推动下,蓝牙Ibeacon得到了极大的应用.而腾讯则是利用蓝牙Ibeacon在场景体验方面进行了创新,实 ...

  4. C语言的判断语句

    // // main.c // homeWork1222 //// #include <stdio.h> int main(int argc, const char * argv[]) { ...

  5. 常用的JSTL函数

    下面是JSTL中自带的方法列表以及其描述 函数名 函数说明 使用举例 fn:contains 判断字符串是否包含另外一个字符串 <c:if test="${fn:contains(na ...

  6. .Net 三款工作流引擎比较:WWF、netBPM 和 ccflow

    下面将对目前比较主流的三款工作流进行介绍和比较,然后通过三款流程引擎分别设计一个较典型的流程来给大家分别演示这三款创建流程的过程.这三款工作流程引擎分别是 Windows Workflow Found ...

  7. jQuery DataTables 行获取

    datatables的官方例子中似乎没有提到表格双击和获取相应行号的功能; 经过探索可以按照以下方式实现:  $("#example tbody tr").dblclick(fun ...

  8. 方程ax2+bx+c=0;一元二次方程。求根

    <body>方程ax2+bx+c=0;一元二次方程.求根请输入a:<input type="number" id="a"/><br ...

  9. C#拖放实现餐饮系统转台操作

    转台是餐饮系统中常用的操作,一般系统都是右键选择弹出目标台界面,然后选择目标台确定,现在我们把需要转的台通过拖动到目标台图标上面就可以实现前面的操作,简单快捷. 转台操作时: 转台成功后: /// & ...

  10. jQuery Form 表单提交插件-----ajaxSubmit() 的应用

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍  立即通过AJ ...