实用的 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 ...
随机推荐
- JS实现表格列宽拖动
在数据表格中,有时候需要拖动表格宽度,查看完整的数据,是很常用的功能. 1 效果 可以用纯JS就可以实现,如下,是正常情况下的表格: 拖动表格标题中间线,拖动后效果如下: 查看DEMO 2 代码 HT ...
- 网络基础 02_TCP/IP模型
1 TCP/IP参考模型概述 2 应用层 3 传输层 3.1 传输控制协议(TCP) 面向连接 可靠传输 流控及窗口机制 使用TCP的应用: Web浏览器:电子邮件: 文件传输程序 3.2 用户数 ...
- [JZOJ6088] [BZOJ5376] [loj #2463]【2018集训队互测Day 1】完美的旅行【线性递推】【多项式】【FWT】
Description Solution 我们考虑将问题一步步拆解 第一步求出\(F_{S,i}\)表示一次旅行按位与的值为S,走了i步的方案数. 第二步答案是\(F_{S,i}\)的二维重复卷积,记 ...
- Neo4j使用简单例子(转)
Neo4j Versions Most of the examples on this page are written with Neo4j 2.0 in mind, so they skip th ...
- Universal-Image-Loader完全解析(下)
Universal-Image-Loader完全解析(下) 在这篇文章中,我会继续跟大家分享有关于Universal-Image-Loader框架的相关知识,这次主要分享的是框架中图片缓存方面的知识. ...
- Zip文件格式
Overview This document describes the on-disk structure of a PKZip (Zip) file. The documentation curr ...
- orcale 之sql/plus set 命令
set 命令用于设置系统变量的值.通过set 命令设置的系统变量有很多,下面把最常用的罗列出来: 1. arraysize 用于从数据库中一次提取的行数,其默认为 15. SQL> show a ...
- mysql经典查询
建立数据库 1.建立一个数据库 create database work; 2.进入数据库work use work; 3.数据库默认编码可能不支持中文,可以在这里设置下 set names gbk; ...
- varchar(n) 和 int(n)
mysql(测试版本为5.6) 的varchar必须加范围,否则报错: mysql> CREATE TABLE test ( -> id INT, -> name VARCHAR - ...
- js处理json数据,java处理json数据
一.js处理json数据 处理办法之一是把本机json数据或远程返回json数据用eval函数,使之变成DOM对象. 例如: var people = { "programmers" ...