Chrome控制台 JS调试的一些小技巧

$

$_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中。

$0~$4则代表了最近5个你选择过的DOM节点。在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined

Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节点

$(selector)返回的是满足选择条件的首个DOM元素。剥去她伪善的外衣,其实$(selector)是原生JavaScript document.querySelector() 的封装。
同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合,是对document.querySelectorAll() 的封装。

Copy

通过此命令可以将在控制台获取到的内容复制到剪贴板

因为我刚刚利用控制台选择了一个元素的ID,所以我就用$_,虽然控制台里面输出的是undefined,但是你新建一个记事本,ctrl+c试试,很神奇吧

keys&values

keys返回传入对象所有属性名组成的数据

values返回所有属性值组成的数组

monitor&unmonitor

monitor(function),它接收一个函数名作为参数,每次函数被执行时都会在控制台输出一条信息,里面包含了函数的名称及执行时所传入的参数。

而unmonitor(function)便是用来停止这一监听。

时间: 2024-10-11 03:23:53

Chrome控制台 JS调试的一些小技巧的相关文章

前端js调试的一些小技巧

===前言=== 此文根据本人长期js开发以及团队协作中遇到的一些问题的汇总.本文强调调试技巧,具体的代码逻辑实现本文不做深入讲解.本文所有场景均使用chrome作为开发浏览器. 掌握这些小技巧能有效的提高你的工作效率或降低低级错误出现的的几率.任何读者如果发现本文的任何错误请及时指出,也可以通过评论进行问题补充. ===场景=== A.表单提交 许多前端习惯按照以下流程编写表单程序. 1.编写html. 2.绑定form的submit事件,验证各表单项. 3.表单验证成功则提交表单,失败则提示

【转】js调试信息输出小技巧

原文地址:http://blog.csdn.net/jom_ch/article/details/864574 通常我们在做简单的js调试输出的时候习惯用 alert  函数,这个函数也能解决大多数问题,但遇到如循环输出,滚动条状态监控,鼠标位置等场景的时候,alert就相当的不方便了,下面这个函数可以解决这个问题: [javascript] view plaincopy <script type="text/javascript"> function __js_debug

chrome 控制台js调试与断点调试

这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的,因为 google 也在不断完善chrome developer tool,所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的,mac 下的应该大同小异. 常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了. 1. Beautify Javascript js 文件在上线前一般都会压缩

python 设计及调试的一些小技巧

在"笨办法学习python"中介绍了一些设计函数以及调试技巧: 参考网址:http://www.jb51.net/shouce/Pythonbbf/latest/ex36.html If 语句的规则? 每一个"if 语句"必须包含一个 else. 如果这个 else 永远都不应该被执行到,因为它本身没有任何意义,那你必须在 else 语句后面使用一个叫做 die 的函数,让它打印出错误信息并且死给你看,这和上一节的习题类似,这样你可以找到很多的错误. "i

【js】中的小技巧

本文主要介绍一些JS中用到的小技巧 1. 类型强制转换   1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN,或者使用 a !== a 来判断是否为NaN,因为 NaN !== NaN '32' * 1            // 32 'ds' * 1            // NaN null * 1            // 0 undefined * 1    // NaN 1  * {

Chrome 开发者工具的六个小技巧

下面是特邀Umar Hansa做的一篇文章.Umar有一个新闻组,我是他的粉丝,他很亲切地应我们要求把这篇约稿写成了新闻组的形式.我将让他介绍一下他自己. 嘿,我是Umar.我喜欢在Twitter(@umaar)上分享web开发相关的小技巧,同时也喜欢通过Dev Tips以gif的形式分享开发的小技巧.Dev Tips是开发者的一个新闻组.现在,它主要是Chrome开发工具相关的内容.开始之前,感谢CSS-Tricks给我机会为自己喜欢的一个组织做点贡献. 这篇文章将涵盖Chrome开发工具的六

Chrome 控制台 如何调试javascript

上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1.先说一下源码定位 大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示 我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车 直接点击上图标红的链接,控制台将定位到Sources面板

Chrome 35个开发者工具的小技巧

来源:w3cplus - 南北(@ping4god) 网址:http://www.w3cplus.com/tools/dev-tips.html 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具.大多数可能熟悉关于chorme的许多特点,例如使用console和debugger在线编辑CSS.在这篇文章中,我们将分享一些很酷的技巧,让你能够更好的改进工作流程. 通过 console 面板修改页面元素

js调试的一点小知识

1.如果想要js代码被XHTML和HTML解析,就可以使用如下方式 <script type="text/javascript"> //<![CDATA[ function(){ …… } //]]> </script> 2.在调试器中可以通过callStack看到函数执行的过程. 3.控制台比较有用的函数 console.log():输出日志 console.trace():堆栈函数,可以查看指定函数的调用关系 clear():清除控制台中的log