做前端的,都喜欢 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. canvas+js+面向对象的矩形封装

    效果: Rect.js /* 1. 封装属性: x, y w , h, fillStyle strokeStyle rotation opacity 2.render */ function Rect ...

  2. SSAS 收藏

    1.多事实表 SQL实现和SSAS中MDX实现的差异 2.层次结构 3.MDX常用几种查询对比 4.一段话理解 MDX中的Select .轴.COLUMNS.ROWS 5.[转载]MSDN-MDX#0 ...

  3. Mac 10.12安装FTP工具FileZilla

    说明:在Windows估计用的比较多,在Linux基本不用了,CRT和Xshell基本可以完成上传. 下载: (链接: https://pan.baidu.com/s/1bpaxmeN 密码: uuw ...

  4. Mac OS X中Launchpad的图标添加删除方法(添加方法别试了,和Linux很大区别)

    说明:在Mac下的Launchpad图标添加和删除都与应用程序的app文件有关,如果单纯的只想在Launchpad添加自定义的图标,然后指定要某条命令运行时,建议不要这么干,Launchpad的图标管 ...

  5. 开源一个C# Class实现Openfire登陆、推出、消息发送,方便其他系统集成IM功能了

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. python描述符学习

    目录 一.对象属性的访问控制 二.描述符基本理解 三.基本使用 四.使用描述符完成property.classmethod.staticmethod自定义实现 1.property的自定义实现 2.c ...

  7. WCF系列教程之WCF服务配置

    文本参考自:http://www.cnblogs.com/wangweimutou/p/4365260.html 简介:WCF作为分布式开发的基础框架,在定义服务以及消费服务的客户端时可以通过配置文件 ...

  8. VMware虚拟机配置

    VMware虚拟机配置 背景 在做学习Linux时经常会在win环境下安装虚拟机,这其中涉及到一些细节操作,需要对虚拟机工作模式加以理解. 本文在学习hadoop分布式环境搭建时写作. 1.虚拟交换机 ...

  9. C#的托管和非托管的简单理解

    应该说“托管”一词是和.net概念一起出生的, 我们都知道以前的开发工具无论是Delphi.VB编译出的dll或exe文件都是二进制文件, 可以被操作系统直接识别.而微软为了和JAVA火拼,实现跨平台 ...

  10. The servlets named [create_subscription] and [servlet.create] are both mapped to the url-pattern [/create] which is not permitted [duplicate]

    原因,代码中在public前已经有了默认的配置路径: 如: @WebServlet("/ShowUser")public class ShowUser extends HttpSe ...