了不起的Chrome Dev Tools

chrome
较早接触前端的人可能最开始使用的都是Firebug调试工具,不过后来由于Chrome的强势逆袭以及移动端开发的兴起,大部分开发者开始转战使用Chrome自带的开发者工具(F12或Ctrl+Shift+I),本文接下来就会介绍一些你平常开发中也许没有注意到的关于Chrome Dev Tools的奇技淫巧。
chrome
刚才说了通过Ctrl+Shift+I可以打开开发者工具,但是你知道吗?在开发者工具中继续按Ctrl+Shift+I还可以继续打开开发者工具的开发者工具,所以实际上这个开发者工具也是通过Web来构建的。
chrome

DevTools能给我们带来什么

通过开发者工具可以检查、调试以及优化你的应用程序,让你的程序运行地更加顺畅,如果你可以很好地使用它,甚至可以把开发者工具变成一个所见即所得的编辑器,同时,作为一个优秀的前端工程师,娴熟地使用开发者工具必定会为你的工作提供一臂之力。

说了这么多,我们究竟能用开发者工具做什么呢?下面分别按照开发者工具的几个面板一一介绍大家平常不怎么注意到的一些诀窍。

强大的console

大家最常用的应该就是console.log了,但是console还有很多其它的方法如

console.warn('warningtext');//警告提示
console.info('infotext');//信息提示
console.error('errortext');//错误提示
console.dir(document.body);//显示对象的所有属性和方法
console.dirxml(document.body);//用XML的表达方式打印指定对象
console.assert(false, 'text');//当第一个参数为false时打印错误信息
console.table([{name: 'Adam', age: '10'}, {name: 'Eric', age: '20'}]);//将数组格式化输出
console.group('分组');
console.log('something');
console.groupEnd('分组');

chrome

console.log还可以使用字符串替换以及格式化输出,这个经常能在一些网站上看到在控制台中打印招聘广告,那是怎么做到的呢?
chrome

其实很简单就可以实现了:

console.log("I'm %s, I'm %d years %cold.", "Adam Lu", 10, "color: red");//I'm Adam Lu, I'm 10 years old. 

如果你想看你某段代码运行的时间,可以使用console.time和console.timeEnd,

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");

控制台还有一些额外的命令,例如,你可以在里面运行一些JavaScript表达式,操作当前页面的DOM,监听当前页面的事件等。使用$0-$4可以选择最近的5个DOM元素或JavaScript对象,使用$(选择器)可以选择元素,等价于document.querySelector()以及$$(选择器)等价于document.querySelectorAll(),$x(xpath)命令可以执行一个xpath查询,如$x(‘//img’);会找出页面中所有的图片,你也可以右键点击元素选择“在Elements面板显示”看对应的DOM,也可以通过inspect命令切换到审查元素模式
revealinelementspanel
$_可以访问最近的控制台结果,清除控制台可以使用clear()或console.clear()命令。
当你访问新页面时如果不想清除控制台的信息可以点击右键,选择“Preserve Log upon Navigation”
preserve

console.profile和console.profileEnd可以检测JavaScript占用的CPU信息
profile

在控制台中有用的快捷键有:
Ctrl+L 清除控制台
Shift+Enter 多行输入

Elements面板

Elements面板让你可以看到DOM树中所有的东西,并可以让你实时编辑DOM树,平常大家用的比较多,这里不多做介绍,有几个技巧如下。

移动元素

你可以直接拖拽元素来放置到DOM树中

删除元素

直接选择元素然后按delete键

滚动到视图内

想要把页面滚动到视图内,右键点击元素,选择”Scroll into View”

设置DOM断点

DOM断点和Source面板的断点类似,当指定的DOM属性、子元素发生变化时可以触发断点,在Elements面板的扩展面板里的DOM Breakpoints里可以看到设置断点的元素。
breakpoints

查看事件监听器

Elements面板的扩展面板里的Event Listeners里可以查看绑定在DOM节点的JavaScript事件监听器。

Style扩展面板

可以通过Ctrl+Click CSS属性来查看源代码的位置,还可以添加和触发伪类如鼠标滑过时的CSS。
style-addtoggle

在Elements中有用的快捷键有:
F2 以HTML格式来编辑切换
Esc 停止修改DOM
Ctrl+Z 撤销上一个操作
Up/Down CSS属性值增加1/-1
Alt + Up/Down CSS属性值增加0.1/-0.1
Shift+Up/Down CSS属性值增加10/-10
Shift+PageUp/PageDown CSS属性值增加100/-100

Network面板

XHRs

你可以右击XHR请求选择“Replay XHR”来重新运行一个XHR请求,还可以点击preview来预览资源的内容,如果响应是json格式的话比较有用。

清除网络缓存或cookie

在Network面板右击选择“Clear Browser Cache/Network Cache”来清除缓存或cookie

导出瀑布流

在空白处右击,选择“Save as HAR with content”保存为一个HAR文件,然后可以在一些第三方工具网站如http://ericduran.github.io/chromeHAR/导入这个文件重现网络瀑布流情况。
chrome-har-viewer

查看WebSocket

在网络面板,还可以使用filters按钮来查看WebSocket消息结构
websocket

例如,打开http://www.websocket.org/echo.html,通过这个面板可以看到websocket的消息结构以及连接状况。
websocket-frame

在Network中有用的快捷键有:
Ctrl+F 根据关键词查找你想要的请求
chrome://net-internals/ 可以查看网络状况

Source面板

格式化JavaScript

选择你想要格式化的脚本文件,点击按钮pretty就可以了。

调试XHR

打开Source面板的debugger,在“XHR Breakpoints”下指定XHR的URL或URL部分,当发生XHR请求时会开启断点调试。

SourceMap

点击设置->通用里的“Enable javascript source maps”或“Enable css source maps”可以调试
JavaScipt源代码、CoffeeScript,甚至Sass,只需要在你的源码加入类似 //@ sourceMappingURL=/path/to/file.js.map 即可。
sourcemap

Workspace

想让本地的文件夹在Source面板下可以编辑,右键单击Source面板选择“Add Folder to Workspace”,之后就可以直接编辑该目录下的任何文件,把Chrome当做一个编辑器来用。
workspace

Snippets

有时你想保存小段的脚本、书签或是你在浏览器中调试时经常用到的,都可以使用Snippets,你可以在Source面板里创建、存储和运行这些Snippets.
snippets

在Source中有用的快捷键有:
Ctrl+F 根据关键词查找你想要的请求
Ctrl+Shift+F 在所有加载的文件下查找
chrome://net-internals/ 可以查看网络状况

Timeline面板

Timeline有三种模式来观察记录:
* Events 根据事件分类显示所有记录的事件
* Frames 显示页面的渲染性能
* Memory 显示页面随时间的内存使用情况

布局是Chrome计算页面中所有元素的位置和尺寸的过程。一般来说,Chrome会“懒惰的”进行布局以响应你应用中的CSS和DOM更新,这允许Chrome批量处理样式和布局的变化而不是一次响应一个变化。然而,应用可以强制Chrome通过查询特定的布局独立元素属性(如element.offsetWidth)来立刻异步的实现布局。如果重复的太频繁或者对大型DOM树进行操作的话,这种所谓的“强制同步布局”是影响页面性能的一大瓶颈,当你的应用引起强制异步布局时,Timeline面板会识别出来并在旁边标记一个警告按钮(warning)。当你选中这条记录时,细节面板将会包含这段突兀代码的栈追踪信息。
timeline-trace

你还可以通过console.timeStamp()方法在Timeline记录中加入注释,这可以帮助你把你的代码和其它浏览器事件或活动联系起来。

在Timeline中有用的快捷键有:
Ctrl+E 开始/结束录制

Profile面板

Profile里面提供了三种类型,通过这三种分析可以查看内存泄露和占用情况。
* 收集JavaScript的CPU占用信息
* 获取堆的快照
* 录制堆的分配情况
profile
上面的Bottom UP视图列表通过对性能的影响列出了函数,它同时也允许你检查这些函数的调用路径。

在Profile中有用的快捷键有:
Ctrl+E 开始/结束录制

Resources面板

Resources可以让你检查应用的本地数据资源,包括indexedDB/WebSql DB,localStorage/sessionStorage,cookie以及AppCache,你还可以检查应用的视觉资源,包括图片、字体和样式等。
比如AppCache中,你可以检查Chrome已经缓存了当前文档的哪些资源以及AppCache的状态和浏览器连接情况。
appcache
图上缓存的资源包括以下属性:
* Resource – 资源的URL
* Type – 缓存资源的类型,可能是下面值的一种
* >Master – 这个资源的manifest属性表明这是它的缓存,这个资源也被加到了缓存中
* >Explicit – 这个资源被列在manifest文件中
* >Network – 这个资源被列在manifest文件中作为network访问
* >Fallback – 资源不可用时该资源被指定为fallback
* Size – 缓存资源的大小

其它

Drawer

通用里设置
drawer可以在控制台显示Drawer
或者按Esc可以显示或隐藏Drawer,
drawer

Drawer提供了一些适合移动调试的工具,可以模拟设备、模拟Touch事件以及GEO等相关信息。
drawer

Drawer里的History面板还会显示最近的修改记录,在source面板里选择“Local modifications”就会在history中显示
drawler-history

要想看浏览器的一些渲染特性,在Rendering面板可以勾选相应选项
drawer-rendering

设置

点击settings打开设置面板。
设置中有一个workspace选项,可以让你选择你的工作目录,之后就可以在Source面板中编辑,步骤如下:
workspace
还有一个Shortcuts选项包含了更多快捷键操作。

Dock

控制台右上角的按钮用于切换开发者工具在页面的位置是在右侧还是底部,长按会出现dock供选择新窗口打开。

其它设置中有用的快捷键有:
Esc 隐藏/显示Drawler
Ctrl+[/] 在不同面板间切换
? 打开设置面板
chrome://appcache-internals 看哪些页面有appcache以及他们的详细信息

结语

当然Chrome Dev Tools远不止这些,它还可以用来做android远程调试或NodeJs调试等,只要你去仔细探索,会发现它是多么地强大,一定会让你的开发效率大大提升。

参考资源

https://developers.google.com/chrome-developer-tools/
http://webzhao.github.io/sharing/slides.html?file=secrets-of-chrome-devtools
http://jankfree.org/
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

视差滚动(Parallax Scrolling)使用

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为今年网页设计的热点趋势,越来越多的网站应用了这项技术。
什么是视差滚动?来自百度百科
视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化,然而各个不同的元素位置变化的速度不同,导致网页内的元素有层次错落的错觉,这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品,从不同的空间角度和用户体验,起到了非常不错的效果。 目前这种视差滚动效果被越来越多的国外网站所应用, 成为网页设计的热点趋势。 通过一个很长的网页页面,其中利用一些令人惊叹的插图和图形,并使用视差滚动(Parallax Scrolling)效果,让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。完美的展示了一个复杂的过程,让你犹如置身其中。
视差滚动效果的主要特点1、直观的设计,快速的响应速度,更合适运用于单页面 2、差异滚动 分层视差 页面上很多的元素在相互独立地滚动着,如果我们来对其它分层的话,可以有两到三层 :背景层,内容层,贴图层。 3、差异滚动的实现规则:背景层的滚动(最慢) 贴图层(内容层和背景层之间的元素)的滚动(次慢) 内容层的滚动(可以和页面的滚动速度一致) 我们让三个图层的滚动速度不一致,就做出了漂亮的差异滚动效果
先来看看几个大家认为使用视差滚动的网站:
1.  简单的单页滚动,如iphone 5s介绍页面:http://www.apple.com/iphone-5s/
页面分为几个section,绝对定位,滚动时只改变了内容层的位置,如果想在实际项目中使用,可以参考这个库 one page scroll 
2. 基本的视差滚动,如QQ浏览器页面,http://browser.qq.com/index_m.html
利用CSS3的特性,在滚动时改变图层位置,设计的同时对低版本浏览器如ie做了降级处理,保证可用性。
3. 带有交互效果的视差滚动,如http://www.bagigia.com/
鼠标可用控制滚动的进度,并且回到滚动的某个状态,其中还有3D的展示,这种效果更加复杂,需要翻转的每一帧图片,同时还要考虑适配不同屏幕和浏览器。
虽然视差滚动目前很流行,但是很多人对它认识有一些误区,有些设计师可能还不太理解视差滚动是什么,或者没有正确地来实现,导致效果并不是那么美好。
在Medium看到了一篇文章“The Troublesome Misconception of Parallax in Web Design.”解答了很多我们对于视差滚动的困惑。
视差滚动的目的是为了让我们产生一种立体感(Stereopsis),在网站设计中,一般需要:
1. 观察者,或者初始的起点
2. 物体
3. 背景,或者远处的参考点
4. 最后触发运动之类的操作,
有些标称是“xx个让人兴奋的视差滚动效果网站”可能并不是真正的视差滚动。
物体在视差滚动中很重要,是我们的焦点也是视差滚动的轴,在滚动时将两个不同的层以不同的加速度移动可以产生一些立体感,但是如果加上关键的部分-物体,则效果会更好。如下图所示:
物体也可以有一些运动,但是应该保持自然。下面是一个有物体与没有物体的区别:
看看一个真正使用了视差滚动的网站:http://hotdot.pro/en/#bilet2u
如果你想使用真正的视差滚动,有一个简单轻量的视差滚动引擎 http://wagerfield.github.io/parallax/ 可供使用,这个引擎支持pc和智能设备,当陀螺仪和运动检测硬件不可用时,会使用鼠标的位置,这个引擎同时还提供了jQuery和Zepto的插件。
使用起来很简单:
html:
<ul id="scene">
  <li class="layer" data-depth="0.00"><img src="layer1.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer2.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer5.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer6.png"></li>
</ul>

javascript:

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

data-depth指定了这个元素在屏幕的深度,0的话保持不动,1的话和运动的距离一样,0到1之间的则是按照运动距离的比率来计算。

这个如果在不同设备上交互效果是不同的,如在iPad上会有一种重力感应的效果,而在pc上则是随着鼠标的移动页面元素发生变化,体验上确实与出传统的交互有所区别。

知道了什么是真正的视差滚动以后你就可以和PM以及UE一起来探讨到底你们需要什么样的效果,而不要盲目地去实现一种概念,同时在开发的时候可能还需要考虑到不同浏览器、不同分辨率以及不同设备的情况,他们是否可以接受低版本的浏览器没有这种效果以及是否要做优雅降级。

JingJs Highlighting

上周参加了京JS(http://jingjs.org/)的活动,下面是一些演讲的笔记:

Day1:
 
coinpunk

@kyledrake 讲了比特币相关的技术如加密中使用了cryptojs和randjs

 

Optimizing JS Games

@kennyluck提到了一个有意思的概念是在遍历对象属性时v8第26个后进入字典模式

 

My year with node.js

@jden提到了code+tests+documentations=module以及如何使用npm让整个社区实现生态化

 

Isaac Mao

我之前在twitter和facebook上关注过@isaacmao
他分享了sharingsm和big data方面的研究,我很赞同的一点是如果有这些社会化分享数据可供search的话也是很有价值的。

 

CPUJS

来自腾讯的@grz分享了Qzone在性能优化上的努力,通过前端监控CPU的性能来进行优化,提出了LTP(lag time percentage)的概念,同时为了防止卡顿可以通过Load task的方式来处理,算是一个亮点。

 

James Halliday

作为browersify的作者,来自California的@substack用其娴熟的电脑技能征服了现场所有观众,真不愧是geek,其介绍了node基本开发教程,通过获取placename的例子讲述了模块发布的过程,也鼓励大家要勇敢地发布npm模块。

 

Geddy

来自Yammer 的大叔Matthew(@mde)介绍了nodejs的轻量级web框架geddy,让人想不到的是他业余还有一个乐队,并且geddy也是因为著名贝斯手Geddy Lee而命名。

 

Bigpipe on Nodejs
@undozen简单地介绍了在node中怎么实现bigpipe

 

On Harmony
@be5invis介绍了ECMA中最新的语法以及特性如变量赋值和像altjs可能会给我们一种新的编码方式,不过个人感觉种编码方式还是有点太过于先进,对于那些喜欢尝鲜的同学可以试一下。

 

Pomelo
来自网易的Charlie(@xiecc)介绍了基于node的游戏服务端框架Pomelo,主要提供了realtime multiple user interface以及message push based on pomelo等功能。

 

Cloud.js
来自微软的@andrerod演示了使用Azure和kinect做的游戏,确实很酷。

 

Client-side data visualization
来自indeed.com@NickCarneiro介绍了数据可视化方面的历史以及他在可视化方面的研究,还介绍了一些可视化库如D3Raphael等。

 

Day2:

早上的几个没有听到,他们的github handles:@rednaxelafx@coderoshi@dominictarr@alyraz

Don’t panic
@oren简短地介绍了Node开发的一些基础。

 

Clouda
来自我厂的@tongyao介绍了Clouda的一些设计理念,像这种实时开发框架有不少如Meteor,而Clouda的特点则是将数据更加靠向前端开发工程师,如person.save();的同时将数据保存到数据库,使用者只需要了解api即可,从介绍中我觉得它的一个比较好的feature是通过Clouda构建的App可以被搜索引擎抓取到。

 

SELF
@johnnymugs介绍了JavaScript最原始的一些设计理念,没怎么听懂:(

 

Large-scale javascript Application
@kjbekkelund介绍了构建可扩展应用的一些模式,我觉得这也是本场的最佳干货分享,这个话题其实zakas之前就有提及,但是Kim从jQuery的反模式说起,人们一般会有两种文件组织方式:package by feature和package by layer,而他则建议前者,也就是按照模块来划分。在设计模式上一般人会说MVC,但是在前端开发中,C可以是任何东西,也即MV*,在写模块式要注意让模块:reused, testable and not access global variable,在数据绑定方面可以参考Emberjs,在包管理或处理文件dependency方面可以参考requirejsbrowersify以及bower,在componentnpm上也有丰富的资源。最后Kim分享了一个网站http://superherojs.com/,这个网站整理了构建大型JavaScript应用程序的最佳资源。

 

Lighting Talk
个人秀环节分别展示的项目有:ecllipse上的node集成开发环境,pubjs,mmclasspw-vim,gifme,baoz

 

Firefox Os
来自Mozilla的@PinZhang介绍了Firefox Os的架构,其对比传统的OS架构少了一层浏览器层,所有App都使用Web技术来开发,在隐私控制方面有不同的等级以访问不同的API,同时介绍了一些调试开发工具如rainbow,qemu仿真器,自适应设计视图等。

 

Automated css-testing
来自瑞典的帅哥@jakobmattsson首先介绍了比较流行的declarative programming(声明式编程),然后从三个方面来剖析CSS开发中遇到的问题,给出了一些测试要点如语法检查、代码风格和是否通过校验等,可以通过截图(如PhantomCSS)的方式来测试,他也给了我们开发中的一些建议如:创建你喜欢的设计、去除重复的代码、确保一致性和兼容性。

 

totoro
支付宝的@fool2fish介绍了他们团队开发的一个单元测试工具totoro,这种探索的精神值得我们学习。

 

Advanced Grunt.js
@jacobbubu介绍了Grunt的一些基础功能,虽然没有讲完,但是PPT还是值得刚接触Grunt的人来学习的。

编码规范

最近组内讨论了一些相关开发规范,其中有一些好的编码规范值得借鉴,例如:

1. PHP编码规范

http://www.cnblogs.com/lida/archive/2011/05/24/2055131.html,提到了

三、编码风格
1. php 代码必须以完整的形式来定界(<?php … ?>),即不要使用php 短标签(<? … ?>),且保证在关闭标签后不要有任何空格。
2. 当一个字符串是纯文本组成的时候(即不含有变量),则必须总是以单引号(’)作为定界符。

 

2. CSS编码规范

https://github.com/chadluo/CSS-Guidelines/blob/master/README.md,我也根据自己的开发习惯整理了https://github.com/adamlu/javascript-style-guide/blob/master/CSS%20Style%20Guide.md,这里提到了

CSS 简写应当谨慎使用。
编写像 background:red; 这样的属性的确很省事,但是你这么写的意思其实是同时声明 background-image:none; background-position:top left; background-repeat: repeat; background-color:red;。虽然大多数时候这样不会出什么问题,但是哪怕只出一次问题就值得考虑要不要放弃简写了。这里应当将其改为 background-color:red;。

都说的很好,这里说到了选择器的性能,可以参考http://josh.github.io/css-explain/,可以把你的选择器放这里看看权重。

https://github.com/styleguide/css - GitHub的CSS规范

通过http://csslint.net/来校验你的CSS

 

3. HTML编码规范

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml - Google HTML/CSS规范

通过http://validator.w3.org/来校验你的HTML是否符合W3C规范

 

4. JavaScript编码规范

http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml - Google JavaScript规范

https://github.com/darcyliu/google-styleguide/blob/master/JSONStyleGuide.md - Google JSON规范

通过http://jsonlint.com/校验你的JSON

https://github.com/hiwanz/javascript-style-reference 中提到

函数表达式(有别于函数声明,如:function x(){})必须用分号结束,下面是错误的范例,第三行漏掉分号,后面的函数被当作参数传递给myMethod,导致解析错误:

var myMethod = function() {
return 42;
}
(function() {
// 一个匿名函数,在这里会被错误解析当作参数调用导致报错
})();
警惕jquery xss,禁止这样的写法:$(window.location.hash);

https://github.com/airbnb/javascript 我翻译的中文版:https://github.com/adamlu/javascript-style-guide

通过http://www.jslint.com/http://www.jshint.com/来校验你的JavaScript

还有更多其它Language的编码规范参见:https://code.google.com/p/google-styleguide/

通过借鉴别人的一些规范,从而提出适合自己团队自身的规范,可以保证团队整体效率的提升和一致性,这样在新人接触代码时能够感觉不会那么风格不一致,感觉像是同一个人所写的一样,同时在读别人代码的时候也不会觉得那么晦涩难懂。

无觅相关文章插件,快速提升流量