实用的 Chrome Developers Tools
做前端的,都喜欢 chrome , 里面的开发工具也很实用,网上看到文章不错,部分摘来分享
-------------------------------
console.log,中包含一些格式化的指令比如%c。
比如给hello world 做件漂亮的嫁衣再拉出来见人:
除此,console.table 更是直接以表格的形式将数据输出
---------------------
console.time & console.timeEnd
当做一些性能测试时,同样可以在这里很方便地进行。
比如需要考量一段代码执行的耗时情况时,可以用console.time与 console.timeEnd来做此事。
这里借用官方文档的例子:
|
1
2
3
4
5
6
|
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");
|

------------------------
Chrome Developers Tools基础篇 转自:http://xgfe.github.io/2016/05/16/scliuyang/ChromeDevTools1/
实用的 Chrome Developers Tools的更多相关文章
- Chrome Dev Tools :成为更高效的开发人员
原文出处 http://blog.jobbole.com/22065/ 实时CSS Style编辑 选择一个Dom,可以对Dom进行编辑和操作,实时修改Css Style, 同时CssStyle可以保 ...
- Chrome Developer Tools:Network Panel说明
官方资料:Chrome Developer Tools: Network Panel 一.chrome Developer Tools:Network Panel 从网络面板中可以获取很多有用信息,如 ...
- chrome dev tools
chrome dev tools介绍一下Chrome dev tools 的基本使用和一些意想不到的小技巧.\\Chrome Developer Tools 是Chrome内嵌的一系列编辑和调试的工具 ...
- Web前端开发实用的Chrome插件
Web前端开发实用的Chrome插件 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录 ...
- 掌握Chrome Developer Tools:下一阶段前端开发技术
Tips 原文作者:Ben Edelstein 原文地址:Mastering Chrome Developer Tools: Next Level Front-End Development Tech ...
- Chrome的开发者工具(Chrome Developer Tools)
Chrome的开发者工具(Chrome Developer Tools) 按F12 https://developer.chrome.com/devtools/index http://www.w3s ...
- Chrome development tools学习笔记(5)
调试JavaScript 随着如今JavaScript应用的越来越广泛,在面对前端工作的时候,开发人员须要强大的调试工具来高速有效地解决这个问题.我们文章的主角,Chrome DevTools就提供了 ...
- Enabling Chrome Developer Tools inside Postman
Chrome's Developer Tools are an indispensable part of the modern web development workflow. However, ...
- Chrome Developer Tools 中的 Preview 不显示 HTML 的问题
Chrome Developer Tools 中的 Preview 不显示 HTML 的问题 最近升级到 Chrome V64,发现 Chrome Developer Tools 中的 Preview ...
随机推荐
- UITableView 头部效果/放大/移动跟随效果
[self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOp ...
- ReactNative 打包 APK
ReactNative打包步骤: 1.在项目的根目录执行下面这行命令: keytool -genkey -v -keystore my-release-key.keystore -alias my-k ...
- dp--2019南昌网络赛B-Match Stick Game
dp--2019南昌网络赛B-Match Stick Game Xiao Ming recently indulges in match stick game and he thinks he is ...
- [Xamarin] 透過 IsolatedStorageFile儲存資料(转帖)
開發手機App通常都會遇到想要儲存資料的,舉個例來說,像是 (圖片來源:http://docs.xamarin.com/guides/android/application_fundamentals/ ...
- (转)Mysql占用过高CPU时的优化手段
Mysql占用CPU过高的时候,该从哪些方面下手进行优化?占用CPU过高,可以做如下考虑:1)一般来讲,排除高并发的因素,还是要找到导致你CPU过高的哪几条在执行的SQL,show processli ...
- C# 文件读写系列二
读取文件原则上非常简单,但它不是通过FileInfo和DirectoryInfo来完成的,关于FileInfo和DirectoryInfo请参考C# 文件操作系列一,在.Net Framework4. ...
- shiro学习笔记_0400_自定义realm实现身份认证
自定义Realm实现身份认证 先来看下Realm的类继承关系: Realm接口有三个方法,最重要的是第三个方法: a) String getName():返回此realm的名字 b) boolean ...
- Microsoft Power BI Desktop概念学习系列之Microsoft Power BI Desktop的官网自带示例数据(图文详解)
不多说,直接上干货! https://docs.microsoft.com/zh-cn/power-bi/sample-datasets 后续的博文系列,将进行深入的剖析和分享. 欢迎大家,加入我的微 ...
- MySQL存储引擎 InnoDB与MyISAM的区别
来源:http://www.jb51.net/article/47597.htm 基本的差别:MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.MyISAM类型的表强调的是性能,其执行 ...
- Go语言学习笔记一: Hello World
Go语言学习笔记一: Hello World 听说Go语言又快又简单.即具有C语言的运行速度,又具有Python语言的开发效率,不知道真的假的.所以特意来学学这门"老"语言. 下载 ...