Chrome console命令整理
console.dir (这个方法是我经常使用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等
在页面右击选择 审查元素
,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而 $0
会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回 undefined
。
Chrome 控制台中原生支持类jQuery的选择器 ,也就是说你可以用 $
加上熟悉的css选择器来选择DOM节点
copy 通过此命令可以将在控制台获取到的内容复制到剪贴板
如copy(document.body)
(从控制台复制的body里面的html可以任意粘贴到哪 比如记事本 )
keys和values 前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组
var myObj={name:'user1',sex:"female"}
keys(myObj)
["name", "sex"]
values(myObj)
["user1", "female"]
高级Javascript调试——console.table()
试想一下,假如你创建了一个编程语言以及其文件后缀名列表:

var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
]; console.log(languages);

console.log()会显示如下信息:
该树视图对于调试是非常有用的,但我们不得不手动打开每个折叠的对象来查看,比较麻烦。我们可以使用console.table()得到更好的体验。
通过console.table()打印数组
现在我们使用console.table()进行打印。
console.table(languages);
你可以看到如下表格:
整齐漂亮,不是么?
当然表单最适合表单数据呈现。如果每个对象都拥有不同的结构,那么最后会发现有很多单元是undefined。尽管如此,属性值都是整齐排列的,并给你很好的概述。
monitor & unmonitor
monitor(function),它接收一个函数名作为参数,比如 function a
,每次 a
被执行了,都会在控制台输出一条信息,里面包含了函数的名称 a
及执行时所传入的参数。
而unmonitor(function)便是用来停止这一监听。
function sayHello(name) { alert('hello,'+name); }
undefined
monitor(sayHello)
undefined
sayHello('me')
VM1299:1 function sayHello called with arguments: me
看了这张图,应该明白了,也就是说在monitor和unmonitor中间的代码,执行的时候会在控制台输出一条信息,里面包含了函数的名称 a
及执行时所传入的参数。当解除监视(也就是执行unmonitor时)就不再在控制台输出信息
、console.count(这个方法非常实用哦)当你想统计代码被执行的次数
function myFunction() { /*其他函数逻辑*/ console.count("myFunction被执行次数"); }
undefined
myFunction()
VM1671:1 myFunction被执行次数: 1
undefined
myFunction()
VM1671:1 myFunction被执行次数: 2
Chrome console命令整理的更多相关文章
- chrome console 命令简记
1.快速迭代元素 $$('tr.dispute-num td strong a').map(function (el) { return el.innerHTML; }) 2.复选框选中/取消选中 c ...
- 【F12】Console命令,让js调试更简单
Console命令,让js调试更简单 一.显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("informa ...
- [转]九个Console命令,让js调试更简单
转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...
- js调试工具Console命令详解
这篇文章主要介绍了js调试工具Console命令详解,需要的朋友可以参考下 一.显示信息的命令 复制代码 代码如下: < !DOCTYPE html> < html> &l ...
- 9 个让 JavaScript 调试更简单的 Console 命令
一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> < ...
- 常用git命令整理
花了一点时间来熟悉和整理git常用命令. 推荐的git学习资料:1.搜“Git Community Book 中文版.pdf”,git社区书,内容全面且简明扼要,第一推荐2.搜“Git权威指南.pdf ...
- 九个Console命令,让 JS 调试更简单
一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> < ...
- chrome console 调试xpath
chrome console F12->$x(“//title”) [<title>Online Tools for Software Developers (Free)</t ...
- 常用的shell命令整理
工作快一年了,shell命令也玩了一年了.还是有点积累的,下面是本人常用的. 1.pwd | xargs -i basename {} 获取当前所在目录的名称 2.ps -ef|grep -w ...
随机推荐
- 全站 HTTPS 来了
!版权声明:本文为腾讯Bugly原创文章,转载请注明出处腾讯Bugly特约作者:刘强 最近大家在使用百度.谷歌或淘宝的时候,是不是注意浏览器左上角已经全部出现了一把绿色锁,这把锁表明该网站已经使用了 ...
- 单色半透明-兼容IE7
background: #000; width: 100%;height: 100%; filter: alpha(opacity=30); opacity: 0.3;
- php实现数据库数据读取生成缓存文件
有些时候我们希望减少对数据库的 查询来提高程序的性能,因为这些数据不是经常变更的,而是会在很长一段时间内都不会变化,因此,我们每连接一次数据库,都会把相应的结果用文件的形式保存 起来.比如对于一个商城 ...
- iOS--UIScrollView图片动画切换【实现每次只加载3张图片,进而减少占用内存,可循环滚动】
#import "ViewController.h" #define IMAGENUMBER 5 #define SIZE self.view.bounds.size @inter ...
- XVI Open Cup named after E.V. Pankratiev. GP of Eurasia
A. Nanoassembly 首先用叉积判断是否在指定向量右侧,然后解出法线与给定直线的交点,再关于交点对称即可. #include<bits/stdc++.h> using names ...
- BZOJ4078 : [Wf2014]Metal Processing Plant
设$D(A)\leq D(B)$,从小到大枚举$D(A)$,双指针从大到小枚举$D(B)$. 那么对于权值不超过$D(A)$的边,可以忽略. 对于权值介于$(D(A),D(B)]$之间的边,需要满足那 ...
- ZeroMQ接口函数之 :zmq_send_const – 从一个socket上发送一个固定内存数据
ZeroMQ API 目录 :http://www.cnblogs.com/fengbohello/p/4230135.html ——————————————————————————————————— ...
- Struts2基础数据校验和框架校验
一:三种校验的方式 1.用validate()方法实现数据校验 2.用execute()方法实现数据校验 3.用validateXxx()方法实现数据校验 1.用validate()方法实现数据校验 ...
- 那些年一起用过的iOS开发利器之Code Pilot
本系列所有工具的简介见:http://www.cnblogs.com/lloydsheng/p/3637606.html 什么是Code Pilot? Code Pilot是一个Xcode的扩充套件, ...
- iOS 循环引用
1.循环引用一般是指:A持有B,B同时持有A,从而导致死循环无法释放对象. 2.一般循环引用出现在block和delegate中,而一般解决方法就是将self变成weakSelf(强引用变成弱引用), ...