做前端的,都喜欢 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. PTA 这是二叉搜索树吗?

    https://pintia.cn/problem-sets/994805046380707840/problems/994805070971912192 #include<iostream&g ...

  2. 南昌 Max answer

    https://nanti.jisuanke.com/t/38228 Alice has a magic array. She suggests that the value of a interva ...

  3. php7安装并apache

    1.下载php7 选择THREAD SAFE版本,如果是64位系统要下载x64的,x86的不行 2.解压到想要安装的目录 3.apache配置 1) 添加PHP模块 查找“Dynamic Shared ...

  4. hibernate多对多单向关联

    多对多单向,一个学生可以有多个老师,一个老师也可以教多个学生.老师可以找到他的学生,学生找不到教他的老师. 老师类Teacher: package com.oracle.hibernate; impo ...

  5. 【es6】let和const

    let 1.不存在变量提升      es5中var和function都存在变量提升,但let声明的变量不存在.     在代码块内,使用let命令声明变量之前,该变量都是不可用的.这在语法上,称为“ ...

  6. hadoop ——HDFS存储

    一.HDFS概念 二.HDFS优缺点 三.HDFS如何存储 一.HDFS概念 HDFS(Hadoop Distributed File System)是Hadoop项目的核心子项目,是分布式计算中数据 ...

  7. 使用 JFlex

    参数设置和声明段 %% 词法规则段 用户代码段这个段中的所有内容将被拷贝到生成的词法类的类声明之前.在这个段中,常见的是 package 和 import 语句.我们的词法说明在这个段中引入(impo ...

  8. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  9. MyBatis Generator 详解(转)

    MyBatis Generator中文文档 MyBatis Generator中文文档地址:http://mbg.cndocs.tk/ 该中文文档由于尽可能和原文内容一致,所以有些地方如果不熟悉,看中 ...

  10. vim入门之配色方案(colorscheme)设置

    系统版本:ubuntu 16.04 LTS 刚开始用vim的时候,大家可能会觉得默认的语法高亮的颜色不合心意,不过对于vim来说,这并不是一个问题.其实vim的配色方案是可以更改的,既可以选择系统自带 ...