修炼debug
常用方法:
- alert
- console.log
- 行号手工打breakpoints
- 手工加入debugger;配合条件if(){debugger;}
- break on dom modify
- eventListener breakpoints
- try { throw new Error(10,asdasdasd) } catch (e) { }
1. Scripts 面板下面有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件.
2. Elements 面板右侧的 Event Listeners 会按类型出这个元素事件捕获和冒泡阶段经过的这个节点的事件.
在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件
展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行
3. Ajax 时中断(XHR Breakpoints)
点右侧的 + 会添加一个 xhr 断点, 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax, 这个匹配只是简单的字符串查找, 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求
4. Event Listener Breakpoints
它还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件.
5. Javascript 异常时中断
Pretty print 左侧的按钮是开启 js 抛异常时中断的开关, 有两种模式:在所有异常处中断, 在未捕获的异常处中断.
6. Break on subtree modifications, Break on attributes modifications 对应 DOM Level 3 Event
7. 所有 js 文件中搜索&查找 js 函数定义
- 在 chrome developer tool 打开的情况下, 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用, 查找支持正则表达式
- 查找函数定义: ctrl + shift + 0 (在 Scripts panel 下)
- 查找文件: ctrl + o (在 Scripts panel 下)
- 更多快捷键: 在 chrome developer tool 中按 ? 查看帮助
8. command line api
- $(id_selector) 这个与页面是否有 jQuery 无关
- $$(css_selector)
- $0, $1, $2, $3, $4
- Elements 面板中最近选中的 5 个元素, 最后选择的是 $0
- 这个 5 个变量时先进先出的
- copy(str) 复制 str 到剪切板, 在断点时复制变量时有用
- monitorEvents(object[, types])/unmonitorEvents(object[, types])
- 当 object 上 types 事件发生时在 console 中输出 event 对象
- 更多 console api 请 console.log(console) 或 点击
- 更多 command line api 点击
9. 实时修改 js 代码生效
- 页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 会立即生效
- 注意
- 经测试不支持 html 页面中 js 修改
- 经过 Pretty print 格式化的脚本不支持修改
10. console 中执行的代码可断点
在 console 中输入代码的最后一行加上
//@ sourceURL=filename.js
会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样了
function hello() {
alert('say hi');
}
//@ sourceURL=hello.js
上述10点引用自http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool/
快捷键常用的也就:
单步执行 F8 或 Command+反斜杠
进入文件 F11 或 Command+分号
跳过文件 F10 或 Command+单引号
跳出文件 Shift+F11或 Command+Shift+分号
轮巡断点 Command+B
可输入?查看settings面板中的Shortcuts:
熟练掌握所用框架中的各种对象的各种方法,才能把console运用自如。
比如,appframework的app.currController对象会显示当前的win,
又如进入一个画面可以直接命令行app.route("Caution")
人家console的过程记不太清楚了,需要自己到时候实践。
修炼debug的更多相关文章
- jmeter sampler maven项目排错记
eclipse 创建的maven项目,引入jar包之后出现红色叹号,一直找不到原因,连main方法都无法运行,提示找不到类: 错误: 找不到或无法加载主类 soapsampler.SoapSample ...
- Java程序员修炼之道 之 Logging(1/3) - Logback 配置(转)
转自紫风乱写:http://www.blogjava.net/justfly/archive/2014/08/10/416768.html,建议大家去原处学习 写在前面的话: 作为<Java程序 ...
- Node程序debug小记
有时候,所见并不是所得,有些包,你需要去翻他的源码才知道为什么会这样. 背景 今天调试一个程序,用到了一个很久之前的NPM包,名为formstream,用来将form表单数据转换为流的形式进行接口调用 ...
- 《软件调试修炼之道》Part 1(CH1~5)读书笔记 PB16110698 第八周(~4.26)
编程中,调试几乎是必不可少的,一劳永逸.一次完成预想功能而完全不出bug的情况凤毛麟角,出现bug→调试→再出现bug→再调试……基本是软件工程中的常态.可以说,软件调试是每个coder的必修课,而& ...
- SpringBoot源码修炼—系统初始化器
SpringBoot源码修炼-系统初始化器 传统SSM框架与SpringBoot框架简要对比 SSM搭建流程 缺点: 耗时长 配置文件繁琐 需要找合适版本的jar包 SpringBoot搭建流程 优点 ...
- 记一次debug记录:Uncaught SyntaxError: Unexpected token ILLEGAL
在使用FIS3搭建项目的时候,遇到了一些问题,这里记录下. 这里是发布搭建代码: // 代码发布时 fis.media('qa') .match('*.{js,css,png}', { useHash ...
- .NET Core的日志[3]:将日志写入Debug窗口
定义在NuGet包"Microsoft.Extensions.Logging.Debug"中的DebugLogger会直接调用Debug的WriteLine方法来写入分发给它的日志 ...
- 设置tomcat远程debug
查看端口占用情况命令: netstat -tunlp |grep 8000 tomcat 启动远程debug: startup.sh 中的最后一行 exec "$PRGDIR"/& ...
- Android NDK debug 方法
最近又频繁遇到 NDK 的错误,记录一下debug调试的一些经验,以备后续查看 一般来说,在Android Studio中的Monitor中将过滤器的 LOG TAG 设置为 "DEBUG& ...
随机推荐
- Cocos2d-X中字符串的处理
CCString 用惯了NSString,你会严重高估自己处理字符串的能力.使用Cocos2d-X后只能用char*或者string来代替.诸如字符串的拼接,替换,查找都比NSString麻烦不少. ...
- SecureCRT使用教程
Secure CRT是一款支持 SSH2.SSH1.Telnet.Telnet/SSH.Relogin.Serial.TAPI.RAW 等协议的终端仿真程序,最吸引我的是,SecureCRT 支持标签 ...
- PHP安全外延
接下来,我们讲一下:php语言与Apache等中间.MySQL等数据库结合使用时所产生的一些安全问题. 1.文件解析漏洞分析 2.编码注入漏洞分析 3.is_numeric漏洞分析
- Java 反射学习笔记
要学反射,先要了解Class这个类,Class是所有Java类的一个总称,Class的实例中存储的是一个类的字节码,获取Class的实例有三种方式: System.class new Date().g ...
- Android(java)学习笔记170:Activity的生命周期
1.首先来一张生命周期的总图: onCreate():创建Acitivity界面 onStart():让上面创建的界面可见 onResume():让上面创建的界面 ...
- char nvarchar varchar
1. char 固定长度,最长n个字符. 2. varchar 最大长度为n的可变字符串. (n为某一整数,不同数据库,最大长度n不同) char和varchar区别: ...
- Java基础--继承方法调用顺序
最近因为面试的原因,回过头来复习基础的知识,都忘光了,准备买本面试书回来啃. 我先把自己测试的结论总结写出来,以后忘记再来看看 如果b类继承自a类,在main方法中new出b的对象(不带参数),那么他 ...
- 自己做的demo---关于java控制台输入跟类型转化跟处理异常的demo
package exception; import java.util.InputMismatchException; import java.util.Scanner; /*public class ...
- H TML5 之 (4) 小项目一 时钟
这里做一个HTML5 入门的练手,一个小时钟项目,可以再上面拓展很多,程序员培养的就是思想 <!DOCTYPE HTML> <html> <head> <ti ...
- MyXLS案例
using System; using System.Data; using org.in2bits.MyXls; namespace Maticsoft.Common { /// <summa ...