Chrome DevTools学习笔记
---恢复内容开始---
chrome和firefox的开发者工具大同小异,都非常强大。今天在博客园上看了这篇文章(http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html)才发现自己原来对chrome的控制台所知甚少。以后一定多看博客,多写笔记。
下面就是我对Chrome DevTools学习的小小总结。
1.console.log&console.info&console.warn&console.error
用于插入待调试程序返回相关信息,本质上四个命令相同,只不过为了语义化所以才在名称上有所区别。
与alert()函数的不同点在于,以上四个函数并不会打断程序。
顺便说一下,console里的换行是shift+enter。一开始不会换行我苦恼了好久。。。
还有,注意是console.warn不是console.warning。
还有括号中的参数可以加css代码进去,比如:
console.log('%chello world','font-size:25px;color:red;');
盗图了:
2.console.group&console.groupEnd
用于将控制台信息分组显示,用法同括号或html的双标签。
括号中的参数用于匹配和标示。
3.console.table
表格形式的参数输出。例:
var data=[{"name":"jack","score":1},{"name":"taoshen","score":4}];
console.table(data);
4.console.assert
console.assert相当于带有判断的console.log,只有在某一条件不成立/为假时才可执行。
5.console.count
计数器。例:
6.console.dir
以JS对象形式输出DOM节点。
与console.log不同console.log是以DOM树形式输出。
7.大杀器来了,console.time&console.timeEnd
性能测试必备武器。是一个计时器,使用方法同括号与HTML双标签。用于函数执行计时。
可以以直接手写计时器:
显然console.time&console.timeEnd方便和精确多了。
8.$
类JQuery的选择器。
$('selector')相当于原生JS的document.querySelecter()的封装;
$$('selector') 相当于原生JS的document.querySelectorAll()的封装;
另外,$_作为命令表示返回上一次结果,功能上与方向键向上+回车相同;作为变量就表示上一次的结果,如:
下面直接搬运一下:$0~$4则代表了最近5个你选择过的DOM节点。
什么意思?在页面右击选择审查元素
,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0
会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined
。
9.copy
这个命令用来复制选定的DOM树结构。可是在我的chrome里这条命令已经失效了,不知为何。搬运一下别人的图片做例子吧
10.keys&values
【键-值】形式输出对象的属性名与属性值。例:
注意是keys不是key,是values不是value。
11.monitor&unmonitor
一个函数监听器。monitor()接收一个函数名作为参数,输出结果为该函数函数名与该函数参数。unmonitor()用于停止监听。
Chrome DevTools学习笔记的更多相关文章
- chrome控制台调试学习笔记 暂未整理
15:03 2015/12/7chrome控制台调试学习:推荐博客:http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html ...
- Chrome DevTools 调研笔记
1 说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2 Elements 2.1 功能 检查和实时更新页面的HTML与C ...
- chrome插件学习笔记
manifest.json { "name": "test1", "description": "test1", &qu ...
- chrome 插件学习笔记(一)
主要是屏蔽cnbeta中屏蔽广告之后的弹出层 manifest.json文件 { "js": ["jquery-1.7.2.min.js","cnbe ...
- Chrome development tools学习笔记(5)
调试JavaScript 随着如今JavaScript应用的越来越广泛,在面对前端工作的时候,开发人员须要强大的调试工具来高速有效地解决这个问题.我们文章的主角,Chrome DevTools就提供了 ...
- Chrome development tools学习笔记(3)
(上次DOM的部分做了些补充,欢迎查看Chrome development tools学习笔记(2)) 利用DevTools Elements工具来调试页面样式 CSS(Cascading Style ...
- Chrome扩展,应用开发学习笔记之2---恶搞百度一下
Chrome扩展,应用开发学习笔记之2 恶搞百度一下 前面我们介绍了一个最简单的chrome扩展时钟,如今我来介绍一下一个恶搞百度一下的chrome扩展程序. 前面说过,manifest.json文件 ...
- 转)delphi chrome cef3 控件学习笔记 (二)
(转)delphi chrome cef3 控件学习笔记 (二) https://blog.csdn.net/risesoft2012/article/details/51260832 原创 2016 ...
- Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
随机推荐
- kafka版本0.8.2.0-Producer Configs之request.required.acks
This value controls when a produce request is considered completed. Specifically, how many other bro ...
- JS escape()、encodeURI()和encodeURIComponent()的区别
1.实例说明: var url='http://wx.jnqianle.com/content/images/冰皮月饼.jpg?name=张三丰&age=11'; console.info(w ...
- cookie防篡改
概述: 除了 session 外,一般不会在客户端的 cookies 里保存过于重要的凭据,但电商应用有时候不可避免地存储了一些敏感数据到客户端,当然不希望被篡改. 目的: 让服务器端能识别cooki ...
- How to Make LastPass Even More Secure with Google Authenticator
Google Authenticator LastPass supports Google Authenticator, which is officially available as an app ...
- Oracle主键自动生成_表and存储过程
-- Create table create table T_EB_SYS_DN_SEQUENCE_CONFIG ( sequence_id VARCHAR2(36) default sys_guid ...
- helloServlet
创建第一个web程序 用myeclipse创建一个web项目,继而创建一个servlet 自动帮助你创建了一个web.xml文件 <servlet>....<servlet>指 ...
- 【POJ2482】【线段树】Stars in Your Window
Description Fleeting time does not blur my memory of you. Can it really be 4 years since I first saw ...
- python使用VBA:Excel创建图表(转)
# -*- coding: utf-8 -*- """ Created on Thu Mar 06 11:22:03 2014 @author: Administrato ...
- 计算机天才Aaron Swartz 名作 《如何提高效率》——纪念真正的“hacker"!
如何提高效率 <HOWTO: Be more productive>(如何提高效率)作者:Aaron Swartz 肯定有人跟你说过这样的话,“你有看电视的那么长时间,都可以用来写一本书了 ...
- [转载]ecshop 实现订单导出功能 指定订单导出 EXCEL 数据文件
当下很多功能都觉得理所当然,但是实际作为2012年停更的ECSHOP来说,很多功能其实都是缺少的,好比今天的要说的功能 订单导出 这个功能对于现在的产品设计来说,应该属于一个比较常规的功能,但是ECS ...