做前端的,都喜欢 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的更多相关文章

  1. Chrome Dev Tools :成为更高效的开发人员

    原文出处 http://blog.jobbole.com/22065/ 实时CSS Style编辑 选择一个Dom,可以对Dom进行编辑和操作,实时修改Css Style, 同时CssStyle可以保 ...

  2. Chrome Developer Tools:Network Panel说明

    官方资料:Chrome Developer Tools: Network Panel 一.chrome Developer Tools:Network Panel 从网络面板中可以获取很多有用信息,如 ...

  3. chrome dev tools

    chrome dev tools介绍一下Chrome dev tools 的基本使用和一些意想不到的小技巧.\\Chrome Developer Tools 是Chrome内嵌的一系列编辑和调试的工具 ...

  4. Web前端开发实用的Chrome插件

    Web前端开发实用的Chrome插件 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录 ...

  5. 掌握Chrome Developer Tools:下一阶段前端开发技术

    Tips 原文作者:Ben Edelstein 原文地址:Mastering Chrome Developer Tools: Next Level Front-End Development Tech ...

  6. Chrome的开发者工具(Chrome Developer Tools)

    Chrome的开发者工具(Chrome Developer Tools) 按F12 https://developer.chrome.com/devtools/index http://www.w3s ...

  7. Chrome development tools学习笔记(5)

    调试JavaScript 随着如今JavaScript应用的越来越广泛,在面对前端工作的时候,开发人员须要强大的调试工具来高速有效地解决这个问题.我们文章的主角,Chrome DevTools就提供了 ...

  8. Enabling Chrome Developer Tools inside Postman

    Chrome's Developer Tools are an indispensable part of the modern web development workflow. However, ...

  9. Chrome Developer Tools 中的 Preview 不显示 HTML 的问题

    Chrome Developer Tools 中的 Preview 不显示 HTML 的问题 最近升级到 Chrome V64,发现 Chrome Developer Tools 中的 Preview ...

随机推荐

  1. JS实现表格列宽拖动

    在数据表格中,有时候需要拖动表格宽度,查看完整的数据,是很常用的功能. 1 效果 可以用纯JS就可以实现,如下,是正常情况下的表格: 拖动表格标题中间线,拖动后效果如下: 查看DEMO 2 代码 HT ...

  2. 网络基础 02_TCP/IP模型

    1 TCP/IP参考模型概述   2 应用层 3 传输层 3.1 传输控制协议(TCP) 面向连接 可靠传输 流控及窗口机制 使用TCP的应用: Web浏览器:电子邮件: 文件传输程序 3.2 用户数 ...

  3. [JZOJ6088] [BZOJ5376] [loj #2463]【2018集训队互测Day 1】完美的旅行【线性递推】【多项式】【FWT】

    Description Solution 我们考虑将问题一步步拆解 第一步求出\(F_{S,i}\)表示一次旅行按位与的值为S,走了i步的方案数. 第二步答案是\(F_{S,i}\)的二维重复卷积,记 ...

  4. Neo4j使用简单例子(转)

    Neo4j Versions Most of the examples on this page are written with Neo4j 2.0 in mind, so they skip th ...

  5. Universal-Image-Loader完全解析(下)

    Universal-Image-Loader完全解析(下) 在这篇文章中,我会继续跟大家分享有关于Universal-Image-Loader框架的相关知识,这次主要分享的是框架中图片缓存方面的知识. ...

  6. Zip文件格式

    Overview This document describes the on-disk structure of a PKZip (Zip) file. The documentation curr ...

  7. orcale 之sql/plus set 命令

    set 命令用于设置系统变量的值.通过set 命令设置的系统变量有很多,下面把最常用的罗列出来: 1. arraysize 用于从数据库中一次提取的行数,其默认为 15. SQL> show a ...

  8. mysql经典查询

    建立数据库 1.建立一个数据库 create database work; 2.进入数据库work use work; 3.数据库默认编码可能不支持中文,可以在这里设置下 set names gbk; ...

  9. varchar(n) 和 int(n)

    mysql(测试版本为5.6) 的varchar必须加范围,否则报错: mysql> CREATE TABLE test ( -> id INT, -> name VARCHAR - ...

  10. js处理json数据,java处理json数据

    一.js处理json数据 处理办法之一是把本机json数据或远程返回json数据用eval函数,使之变成DOM对象. 例如: var people = { "programmers" ...