Chrome 中的 JavaScript 断点设置和调试技巧 (转载)
原文地址:http://han.guokai.blog.163.com/blog/static/136718271201321402514114/
你是怎么调试 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 断点设置和调试技巧 (转载)的更多相关文章
- 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 公司开发的一款 ...
随机推荐
- 调用系统api修改系统时间
一:截图 二:代码 using System; using System.Collections.Generic; using System.ComponentModel; using System. ...
- UNITY3D 破碎 shatter
convex mesh collider + shatter rigidbody ,
- Shapely介绍及用户手册
本文主要是基于shapely官方文档翻译而成 shapely主要是在笛卡尔平面对几何对象进行操作和分析. 性能 Shapely中所有的操作都是使用GEOS库.GEOS是用C++写的,也被用在许多应用程 ...
- 2012 A 《中国近现代史纲要》课程期末考试试卷
湖南人文科技学院2012—2013学年第1学期公共课 2011级<中国近现代史纲要>课程期末考试试卷 考核方式:(开卷) ...
- 平衡二叉树(AVL)java实现
数的节点 package com.ydp.tree.AVLTree; public class Node{ private int data = 0; private Node lchild = nu ...
- Eucalyptus安装包的功能列表
aoetools 是一个用来在以太网上运行 ATA 存储协议的软件,相当于一个网络存储功能.euca2ools eucalpytus客户端杜昂管理工具axis2c SOAP引擎,同 ...
- GitLib
http://www.360doc.com/content/15/0603/14/21631240_475362133.shtml 原文 http://blog.csdn.net/williamwan ...
- 双系统如何正确的使用修复BCD工具分享
安装双系统时候,用于种种原因会导致开机启动只显示一个系统,此时需要修复下BCD即可. 下面介绍下两个修复BCD工具软件: 1.easybcd(双系统引导修复工具) v2.2.0.182 汉化版 下载地 ...
- cocos2d-x 3.0 利用python脚本在文件夹Classes内创建class
因为VS2012创建默认文件是在proj.win32下,新建类不在VS的classes于是编译时找不到类.直接写个脚本帮助新建类(cpp和h文件),还能够在里面加上一些预先写好的代码. 批处理文件Cr ...
- Monkeyrunner入门示例
准备工作1.安装Android SDK2.熟悉MonkeyRunner的API(http://article.yeeyan.org/view/37503/164523)3.一部Android手机或模拟 ...