实用的 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使用Crypto实现AES/ECS/zero-padding加密
首先说一句,no-padding和zero-padding是一样的.他们指的是不够16位的情况补0至16位. 天知道网上为什么会出现两种叫法. 另附两个有用的网址 http://tool.chacuo ...
- CF917D. Stranger Trees & TopCoder13369. TreeDistance(变元矩阵树定理+高斯消元)
题目链接 CF917D:https://codeforces.com/problemset/problem/917/D TopCoder13369:https://community.topcoder ...
- [转] org.scalatest.FunSuite Scala Examples - Scala FunSuite 测试的例子
[From] https://www.programcreek.com/scala/org.scalatest.FunSuite org.scalatest.FunSuite Scala Examp ...
- 关于javascript的各种高宽
- 虹软人脸识别在 linux中so文件加载不到的问题
其实是可以加载到的,不过是so文件放的位置不一对,最简单的方式是放在 /usr/lib64 目录下,也可自己设置. so文件加载不到会报这个错误: .lang.UnsatisfiedLinkEr ...
- PTA (Advanced Level) 1023 Have Fun with Numbers
Have Fun with Numbers Notice that the number 123456789 is a 9-digit number consisting exactly the nu ...
- PTA (Advanced Level) 1016 Phone Bills
Phone Bills A long-distance telephone company charges its customers by the following rules: Making a ...
- 第十六章、例行性工作排程 (crontab)
1. 什么是例行性工作排程 1.1 Linux 工作排程的种类: at, crontab 1.2 Linux 上常见的例行性工作 2. 仅运行一次的工作排程 2.1 atd 的启动与 at 运行的方式 ...
- 关于css浮动框是否脱离文档流的分析
在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...
- vue 获取数据联动下拉框select ,并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误
公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...