Chrome 中的 JavaScript 断点设置和调试技巧--转自hanguokai.com
你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容。嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题。不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了。本文主要介绍其中的 JavaScript 断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts)。如果你精通 Eclipse 中的各种 Java 调试技巧,那么这里的概念都是类似。写作本文时使用的 Chrome 版本为 25.0.1364.172。
最上面是 f(),然后是 g()。调用栈中的每一层叫做一个 frame,点击每个 frame 可以跳到该 frame 的调用点上。
Call Stack 列表的下方是 Scope Variables 列表,在这里可以查看此时局部变量和全局变量的值。
在断点调试时,可以用鼠标选择想要查看的变量或表达式,然后右键菜单执行“Evaluate in Console”,就可以看到该表达式的当前的值了。
- 默认遇到异常不中断
- 遇到所有异常都会中断,包括已捕获的情况
- 仅在出现未捕获的异常时才中断
try{
throw'a exception';
}catch(e){
console.log(e);
}
上面 try 里面的代码会遇到异常,但是后面的 catch 代码能够捕获该异常。如果是所有异常都中断,那么代码执行到会产生异常的 throw 语句时就会自动中断;而如果是仅遇到未捕获异常才中断,那么这里就不会中断。一般我们会更关心遇到未捕获异常的情况。
在 DOM 元素上设置断点
如图所见,在元素审查的 Elements Panel 中在某个元素上右键菜单里可以设置三种不同情况的断点:
- 子节点修改
- 自身属性修改
- 自身节点被删除
所有开发工具中的快捷键都可以在界面右下角的设置中查到。断点调试时一般用的是 F8、F10、F11或 Shitf+F11,但在 Mac OS 上 F10 等功能键可能与系统默认的快捷键冲突。没关系,它们分别可以用 Cmd+/ 、Cmd+'、Cmd+; 、Shift+Cmd+; 代替。
var coffee =CoffeeScript.compile(code.value)+"//@ sourceURL="+(evalName.value ||"Coffeeeeeeee!");
eval(coffee);
美化前
美化后
Chrome 中的 JavaScript 断点设置和调试技巧--转自hanguokai.com的更多相关文章
- Chrome 中的 JavaScript 断点设置和调试技巧 (转载)
原文地址:http://han.guokai.blog.163.com/blog/static/136718271201321402514114/ 你是怎么调试 JavaScript 程序的?最原始的 ...
- Chrome 中的 JavaScript 断点设置和调试技巧
Console:此功能是模拟js控制台,直接写代码,查看结果.高级功能使用时开启断点,查看变量的变化过程.还可以条用函数. Resources:次功能是查看加载页面所用的资源,链接的数据库,域名下保存 ...
- javascript断点设置和调试
JS调试必备的5个debug技巧http://www.jb51.net/article/47812.htm Chrome 中的 JavaScript 断点设置和调试技巧http://www.xuebu ...
- Visual studio 2017 中的Javascript智能提示与调试
1.智能提示 对于JS文件中的API,你若需要让那个JS文件中的方法能够在你写的那个JS文件中能够智能显示的话,直接把它拉进你的JS文件中就好了. 举个例子:你想 在你正在写的a.js文件中引用b.j ...
- java与.net比较学习系列(1) 开发环境和常用调试技巧
最近因为公司项目要由.net平台转到java平台的原因,之前一直用.net的我不得不开始学习java了,刚开始听到说要转java的时候很抗拒,因为我想专注在.net平台上,不过这样也并不完全是坏事,通 ...
- 深入学习 Intellij IDEA 调试技巧
程序员的日常工作除了写代码之外,很大一部分时间将会在查找 BUG,解决问题.查找 BUG,离不开在 IDE 中调试代码.熟练的掌握调试技巧,可以帮助我们减少查找时间,快速定位问题. 在 IDEA 中调 ...
- P2PSearcher云点播设置和使用技巧
P2PSearcher是一款基于ED2K网络的资源搜索工具,资源丰富,小巧轻便.资源搜索结果最丰富.智能排序定位精准,立即找到想要的资源.新版可突破服务器封杀限制,一个能用的P2PSearcher.整 ...
- Chrome - JavaScript调试技巧总结(浏览器调试JS)
Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习 ...
- [No0000194]聊聊 Chrome DevTools 中你可能不知道的调试技巧
对于前端开发者来说,ChromeDevTools 绝对是不可或缺的调试工具,我们常用的调试方法包含一些console等,而ChromeDevTools 其实很强大,下面来聊聊一些你可能不知道的debu ...
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...
随机推荐
- golang流程控制if,switch分支
if 分支 if 单分支 if 条件表达式 { 逻辑代码 } package main import "fmt" func main() { //var a int = 9 //i ...
- 运行springboot的时候访问本地图片地址的问题
@Configuration public class MyConfigrauration implements WebMvcConfigurer { /** * 当有请求经过[/myUpload/* ...
- Mac的Dock栏是什么?Mac Dock栏使用技巧
Dock栏就是Mac电脑屏幕下方的那一排快捷键,我们可以把自己常用的程序放到Dock上面,这样可以帮助我们快速的打开自己想要打开的文件和程序,默认情况下,OS X 的 Dock 置于屏幕的底部.当 ...
- 钉钉获取群openConversationId方式以及企业内部机器人发送群消息
https://open-dev.dingtalk.com/apiExplorer#/jsapi?api=biz.chat.chooseConversationByCorpId 通过上述URL进入钉钉 ...
- Python的100个小技巧
文章转自:https://mp.weixin.qq.com/s/w5do8QYMkO_gLgPupDdJqg 分享100个Python小技巧,帮助大家更好的了解和学习Python. ▍1.for循环中 ...
- 【ADB命令】获取应用包名
打开cmd,输入命令,然后点击要查看的应用,即可获取对应包名. adb shell am monitor
- requests学习笔记01
一.发送请示 # 导入 Requests 模块 import requests # 获取某个网页 r = requests.get("http://www.baidu.com") ...
- Python自动发邮件(QQ为例)
import smtplib from email.mime.text import MIMEText from email.header import Header from email.mime. ...
- DP4398 是一个立体声 24 位/192kHz 数模转换芯片-替代CS4398
DP4398 是一个立体声 24 位/192kHz 数模转换芯片.该 D/A 系统包括数字去加重.半分贝步长音量控制.ATAPI 通道混频.可选择的快速和慢速数字插补滤波器和过采样多位增量 Sigma ...
- [转]Windows 批处理命令教程
第一章 批处理基础 第一节 常用批处理内部命令简介 批处理定义:顾名思义,批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩展名为BAT或者CMD.这些命令统称批处理命令.小知识:可 ...