Google Chrome调试js代码
你 是怎么调试 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);
美化前
Google Chrome调试js代码相关推荐
- Google Chrome调试js入门
平常在开发过程中,经常会接触到前端页面.那么对于js的调试那可是家常便饭,不必多说.最近一直在用火狐的Firebug,但是不知道怎么的不好使了.网上找找说法,都说重新安装狐火浏览器就可以了,但是我安装 ...
- Google Chrome 调试JS简单教程[更新]
题外话,刚开始我写这篇内容只是将自己了解的一些知识放上来,不巧的是我分析了我的来访日志,很多朋友都有这个需求,为了大家没有白来,我决定充实下这篇文章.最近更新时间2014-02-14 chrome版本 ...
- Google Chrome 调试JS利器
我是一名忠实Chrome迷,使用它已经快有2年的历史了,整体给我的感觉就是清爽,快速,简洁.又打小广告了--^_^,虽然我知道IE8+也有调试工具,包括火狐的什么XXBUG,但是我用过之后,个人还是十 ...
- chrome浏览器断点调试js代码 和 idea断点调试java代码
文章目录 chrome调试js代码 idea调试java代码 chrome调试js代码 Chrome调试快捷键总结 快捷键 功能 F10 (step over) 单步调试.步过,遇到函数时也当成一个语 ...
- debug idea js_IntelliJ IDEA 配置chrome插件调试js代码 - 狂奔的熊二 - 博客园
调试js代码,每次都在要在代码中写debugger,或者在chrome中打断点,而且chrome的断点信息不人性化.偶然发现idea竟然有这个功能,简直神器啊.研究了半天终于搞定了,哈哈,开心.下面是 ...
- IntelliJ IDEA 配置chrome插件调试js代码
调试js代码,每次都在要在代码中写debugger,或者在chrome中打断点,而且chrome的断点信息不人性化.偶然发现idea竟然有这个功能,简直神器啊.研究了半天终于搞定了,哈哈,开心.下面是 ...
- Chrome谷歌浏览器在DevTools中调试JS代码格式化
大家在Chrome浏览器中调试JS代码时经常看到的是被压缩后的JS代码,可读性很差,在DevTools中js页面最下面有个格式化的图标**{}**,如下图所示: 点击格式化后会打开新的视图,新js名称 ...
- chrome调试js
[原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html ] 在Google Chrome浏览器出来之前,我一直使用F ...
- Google Chrome浏览器JS调试工具
作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...
最新文章
- 淮阴工学院计算机期末考选择题题库,淮阴工学院计算机导论题库.doc
- jQuery 插件 jSlider 图片轮播
- c#一个分页控件的例子
- 宏观相似性与惯性质量
- Jenkins+Gradle+Git自动打apk包,并上传到ftp
- 【大会】网络性能、安全与成本之困
- 别看360完成私有化 仍有三因素阻碍中概股回归
- fopen如何保存西里尔文文件名_如何下载微信视频号的视频?
- android 线程池 阻塞队列,【Android框架进阶〖02〗】ThinkAndroid线程池机制
- ANTLR实现的SQL解析器 - OQL
- BIOS 的详细介绍
- 各大IT公司 技术博客汇总
- java 简单框架_最简单的Java框架
- ubuntu mysql快捷键_ubuntu快捷键设置大全
- python爬取音乐网站排行榜_通过Python轻松访问音乐网站歌曲,python,爬取
- 谈谈PHP中的trait
- 新站长如何做淘宝客单品推广
- UEFI+GPT模式下安装win 10系统——生命不止,折腾不息
- NVIDA CUDA
- 文末送书 | 图灵宇宙:用漫画讲述图灵奖背后的计算机科学发展简史
热门文章
- mysql统计各部门人数_2021各省份电网报名人数统计!会不会比考研还难?有些省份人数还就多的离谱了。。。...
- android R vendor.boot-hal-1-1启动失败问题分析
- android R编译OTA时报“ExternalError: Invalid ro.product.property_source_order”解决方法
- 数据结构之树与二叉树的应用:哈夫曼树(最优二叉树)
- 3-4:一个简单的HTTP服务器
- linux下安装TensorFlow(centos)
- 内网渗透,横向移动总结(mimikatz域控)
- Redis Flushdb 命令
- Python字典类型内部做判断赋值
- 浅谈ORB-SLAM3