chrome的console讲解 Chrome 的开发者工具已经强大到没朋友的地步了，特别是其功能丰富界面友好的 console，使用得当可以有如下功效： 更高「逼格」更快「开发调试」更强「进阶级的 Frontender」 Bug 无处遁形「Console 大法好」 console.log # 大家都会用 log，但鲜有人很好地利用console.error?,?console.warn? 等将输出到控制台的信息进行分类整理。他们功能区别不大，意义在于将输出到控制台的信息进行归类，或者说让它们更语义化。各个所代表的语义如下： console.log：普通信息 console.info：提示类信息 console.error：错误信息 console.warn：警示信息 当合理使用上述 log 方法后，可以很方便地在控制台选择查看特定类型的信息。console.log('一颗红心向太阳', '吼吼~'); console.info('楼上药不能停！'); console.warn('楼上嘴太贱！'); console.error('楼上关你毛事？'); 如果再配合console.group? 与console.groupEnd，可以将这种分类管理的思想发挥到极致。这适合于在开发一个规模很大模块很多很复杂的 Web APP 时，将各自的 log 信息分组到以各自命名空间为名称的组里面。console.group('app.foo'); console.log('来自foo模块的信息 blah blah blah...'); console.groupEnd(); console.group('app.bar'); console.log('来自bar模块的信息 blah blah blah...'); console.groupEnd(); 而关于console.log，早已被玩儿坏了。一切都源于 Chrome 提供了这么一个 API：第一个参数可以包含一些格式化的指令比如%c。比如给hello world做件漂亮的嫁衣再拉出来见人：console.log('%chello world', 'font-size:25px;color:red;'); 如果你觉得不够过瘾，那就把你能写出来的最华丽的 CSS 样式都应用上吧，比如渐变。于是你可以得到如下华丽丽的效果：console.log( '%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;' ); 各种招大招的节奏啊~看着上面密集的代码不用惊慌，上面console.log()第二个参数全是纯 CSS 用来控制样式的，你不会陌生。而第一个参数里可以带用百分号开头的转义指令，如上面输出带样式的文字时使用的%c指令。更详细的指令参见官方 API 文档的这个表格。如果还不够过瘾，那咱们来 log 一些图片吧，甚至。。。动图？对，你得先有图，我们拿这张图为例。console.log( '%c', "padding:50px 300px;line-height:120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;" ); 看着上面摇摆的豆比兔是不是有种抽它一脸的冲动。除此，console.table? 更是直接以表格的形式将数据输出，不能赞得太多！ 借用之前写过的一篇博文里的例子：var data = [ { 品名: '杜雷斯', 数量: 4 }, { 品名: '冈本', 数量: 3 }, ]; console.table(data); 另外，console.log()? 接收不定参数，参数间用逗号分隔，最终会输出会将它们以空白字符连接。console.log('%c你好', 'color:red;', '小明', '你知道小红被妈妈打了么'); console.assert # 当你想代码满足某些条件时才输出信息到控制台，那么你大可不必写if或者三元表达式来达到目的，cosole.assert便是这样场景下一种很好的工具，它会先对传入的表达式进行断言，只有表达式为假时才输出相应信息到控制台。var isDebug = false; console.assert(isDebug, '开发中的log信息。。。'); console.count # 除了条件输出的场景，还有常见的场景是计数。当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑，内置的console.count可以很地胜任这样的任务。function foo() { //其他函数逻辑blah blah。。。 console.count('foo 被执行的次数：'); } foo(); foo(); foo(); console.dir # 将 DOM 结点以 JavaScript 对象的形式输出到控制台而console.log是直接将该 DOM 结点以 DOM 树的结构进行输出，与在元素审查时看到的结构是一致的。不同的展现形式，同样的优雅，各种体位任君选择反正就是方便与体贴。console.dir(document.body); console.log(document.body); console.time & console.timeEnd # 输出一些调试信息是控制台最常用的功能，当然，它的功能远不止于此。当做一些性能测试时，同样可以在这里很方便地进行。比如需要考量一段代码执行的耗时情况时，可以用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'); 当然，我们也可以选择自己写代码来计时：var start = new Date().getTime(); var array = new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); } console.log(new Date().getTime() - start); 相信你也看到了，用内置的console.time是多么地方便，省去了自己写代码来计算的工作量。另外值得一提的是，通过调用内置的console.time得到的结果要比自己手动计算的时间差更精确可靠。 console.profile & console.timeLime # 当想要查看 CPU 使用相关的信息时，可以使用console.profile配合 ?console.profileEnd来完成这个需求。这一功能可以通过 UI 界面来完成，Chrome 开发者工具里面有个 tab 便是Profile。与此类似的功能还有console.timeLine配合 ?console.timeLineEnd,它的作用是开始记录一段时间轴，同样可以通过 Chrome 开发者工具里的Timeline? 标签来进行相应操作。所以在我看来这两个方法有点鸡肋，因为都可以通过操作界面来完成。但至少他提供了一种命令行方式的交互，还是多了种姿势供选择吧。 console.trace # 堆栈跟踪相关的调试可以使用console.trace。这个同样可以通过 UI 界面完成。当代码被打断点后，可以在Call Stack面板中查看相关堆栈信息。上面介绍的都是挂在window.console这个对象下面的方法，统称为Console API，接下来的这些方法确切地说应该叫命令，是 Chrome 内置提供，在控制台中使用的，他们统称为Command Line API。 $ # 似乎美刀总是被程序员及各种编程语言所青睐「你看看 PHP 代码就知道 PHPer 有多爱钱了」，在 Chrome 的控制台里，$用处还真是蛮多且方便的。$\_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的，但它可以做为一个变量使用在你接下来的表达式中：2 + 2; //回车，再 $_ + 1; //回车得5 上面的$_需要领悟其奥义才能使用得当，而$0~$4 则代表了最近 5 个你选择过的 DOM 节点。 什么意思？在页面右击选择审查元素 ，然后在弹出来的 DOM 结点树上面随便点选，这些被点过的节点会被记录下来，而$0会返回最近一次点选的 DOM 结点，以此类推，$1 返回的是上上次点选的 DOM 节点，最多保存了 5 个，如果不够 5 个，则返回undefined。另外值得一赞的是，Chrome 控制台中原生支持类 jQuery 的选择器，也就是说你可以用$加上熟悉的 css 选择器来选择 DOM 节点，多么滴熟悉。$('body'); $(selector)返回的是满足选择条件的首个DOM元素。剥去她伪善的外衣，其实$(selector)是原生JavaScript document.querySelector() 的封装。 同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合，是对document.querySelectorAll()? 的封装。$$('div'); copy # 通过此命令可以将在控制台获取到的内容复制到剪贴板。copy(document.body); 然后你就可以到处粘了：看完此条命令行，机智的你是不是跟脑洞全开的我一样，冒出了这样一个想法：那就是通过这个命令可以在 JavaScript 里进行复制操作从而不用依赖 Flash 插件了。But 现实是残酷的，如之前所述的，这里的控制台命令只能在控制台中环境中执行，因为他不依附于任何全局变量比如window，所以其实在 JS 代码里是访问不了这个copy方法的，所以从代码层面来调用复制功能也就无从谈起。但愿有天浏览器会提供相应的 JS 实现吧~ keys & values # 这是一对基友。前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组。具体请看下面的例子：var tboy = { name: 'wayou', gender: 'unknown', hobby: 'opposite to the gender', }; keys(tboy); values(tboy); monitor & unmonitor # monitor(function)，它接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。而 unmonitor(function)便是用来停止这一监听。function sayHello(name) { alert('hello,' + name); } monitor(sayHello); sayHello('wayou'); unmonitor(sayHello); sayHello('wayou'); debug & undebug # debug 同样也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试，类似于在该函数的入口处打了个断点，可以通过 debugger 来做到，同时也可以通过在 Chrome 开发者工具里找到相应源码然后手动打断点。 而undebug? 则是解除该断点。而其他还有好些命令则让人没有说的欲望，因为好些都可以通过 Chrome 开发者工具的 UI 界面来操作并且比用在控制台输入要方便。 REFERENCE # Styled console logging in the Chrome DevTools (Canary) Chrome Console API Chrome Console Command Line API Feel free to repost but keep the link to this page please!原地址：Chrome 控制台不完全指南

使用console进行招聘 在上一篇【chrome 的 console 讲解】我们讲解了 console 的详细使用，如果我们在浏览网站的时候，时不时的打开那个网站的 console，或许就能发现一些奇妙的东西。一些比较大型的公司网站都会在 console 里发布招聘信息，这样就能更精确的定位到前端开发人员，通常呢，也就前端程序员有事没事的乱翻别人网站的 console，想看看人家网站的脚本执行情况或者其他比如页面架构、样式等。现在收集了一些网站的 console 招聘信息，有兴趣的可以投下简历：百度搜索：百度知道:百度地图:百度新闻:天猫:知乎:豆瓣最后的最后，你也可以打开本博客的 console 看下！

2015年2月份总结 哇靠靠，2月份在随着春运的到来与退去中结束了，因为公司有一个301周年庆，年前所有的人都是在弄这个周年庆，有一段时间特别的忙，也有好几次都是在晚上10点后才下班回家。不过，在快春节放假时，所有的活儿都弄完了，轻松了很多，在假期里也没有什么负担。2月10日参加了公司的年会，年会还行吧，不能说特别好，但是也没差到哪儿去。白天上来一天的班，下午5点半左右坐着大巴去了年会的地方。年会的视频转播弄得很像专业似的的样式。年会刚开始的CEO讲话是不能少的，“总结过去，展望未来”，反正我是没听出什么有用的信息。年会里最不能少也是最重要的就是抽奖了，不过我毛线都没有得到，部门里的一个同事倒是抽到一个iPhone6。春节放假回家前，从网上给父母买了点零食。其实春节过得也挺没意思的，就那样了，看个春晚，吃吃饺子，然后就过去了。空间里看到有些人抱怨现在的春节没什么年味了，其实“年味一直都在，只是不在我们身上罢了”，看看现在的小孩子，他们不是过得很开心吗？年后，坐着初五晚上的火车回到了北京，羊年的春节就这么结束了。半夜回到住的地方睡了4，5个小时，然后起床把房间收拾一下。收拾着的时候想起了最近上映的几部电影，因为高中时曾经看过《狼图腾》这本书，因此特别期望看到电影会拍成什么样子，狠狠心买了张3D的电影票。说来也特别的尴尬，一个人的票，孤零零的坐在那儿等着电影的开始，其他的都是情侣或者一家子的那种结伴而来，我只能默默低下头玩我的手机！《狼图腾》这部电影，不想过多的评论，只是简单地说下自己的看法：没有原著里的好。不过也是可以理解的，90分钟的电影再怎么拍，也不可能把原著里所有的东西都表现出来。当然，这部电影依然有很多可取可看的地方， 电影从2009年就开始着手准备，2015年的2约19日正式上映 保留了原著中大部分场景，且有超过95%的场面是真实的，而不是用电影特效。比如狼羊大战，狼马大战，入侵羊圈等。 大自然的美景，精致的3D效果。 前几天，自己win8重装win7时，没成功，只能周末去电脑城了！

自制密码管理系统 现在越来越多的网站或者系统需要我们输入密码，通常我们会选择一种密码，这样记起来比较方便，一个密码闯天下。可是这样使用一种密码的也会出现其他的问题，比如： 不安全，若其中一个网站的密码被泄露了，其他网站也就不安全了； 有限制，有时候我们使用的密码在某个网站的限制规则下，并不能使用。比如我们常用的密码里都是小写字母和数字，可是这个网站要求我们的密码必须包含特殊字符。或者我们使用的密码是 20 位的，可是这个网站的密码要求最多只能 15 位。 网站太冷门，我们好长时间也访问不了一回。好不容易访问一回，结果第二次访问时忘记了密码。 考虑到上面的情况，我们需要再想一种密码，当遇到的情况多了，密码也就不好管理了。直接存储吧，怕被别人看到，不直接存储吧，也不知道放到什么地方。而现在网上也有很多的密码管理软件，只是我本人对这些东西不是很放心，因为它是把我们的密码加密后存储到他的服务器上，假如他的服务器被破解了，那我们所有的密码都会被泄露。因此我就想写一个属于自己的密码管理系统！当然，如果这个网站的找回密码更简单一些的话，那就使用这个网站提供的找回密码吧本来是想做出一种列表式的，把所有密码加密后存储到数据库中。可是因为没有现成的空间和数据库，如果使用本地数据库，那么在这个电脑上存储的密码，在另一个电脑上是获取不到的。因此就修改了一下策略，程序放在本地，只提供密码的加密和解密功能，使用邮箱、云盘等工具来存储加密后的字段。如果其他电脑要使用，那么就把该程序 clone 到本地，解密那个字段就能得到密码。讲解一下我存储密码的思路。需要的字段有： url : 要存储密码的网站，也可以是个单词或者字符，只要自己认识就行 password : 加密该密码的密钥； content : 存储的密码； 加密的方法采用的是公认的 AES。这种加密方式的复杂程度是全世界公认的，解密起来非常的复杂。AES 加密过程是在一个 4×4 的字节矩阵上运作，这个矩阵又称为“状态（state）”，其初值就是一个明文区块（矩阵中一个元素大小就是明文区块中的一个 Byte）。（Rijndael 加密法因支持更大的区块，其矩阵行数可视情况增加）加密时，各轮 AES 加密循环（除最后一轮外）均包含 4 个步骤： AddRoundKey — 矩阵中的每一个字节都与该次轮秘钥（round key）做 XOR 运算；每个子密钥由密钥生成方案产生。 SubBytes — 通过个非线性的替换函数，用查找表的方式把每个字节替换成对应的字节。 ShiftRows — 将矩阵中的每个横列进行循环式移位。 MixColumns — 为了充分混合矩阵中各个直行的操作。这个步骤使用线性转换来混合每列的四个字节。 最后一个加密循环中省略 MixColumns 步骤，而以另一个 AddRoundKey 取代。当然，里面的很多原理其实我们不用了解的很深，但是我么应该学会怎么使用，AES 的加密和解密都需要两个参数：encrypt($input, $key), decrypt($sStr, $sKey)。第一个参数是我们要操作的字符串，第二个参数是加密和解密的 key 值，通常加密和解密需要的是同一个 key 值。关于 AES 的更多信息，可以点击这里【AES-百度百科】【AES-维基百科】从上面的内容我们可以看到，如果要加密的话则要两个字段：需要加密的字符串和 key 值；解密时需要的两个字段：需要解密的字符串和 key 值。因此，我的加密过程是这样的：1. 确定 key 值：$code = substr(md5(time()."wenzi".rand(1000, 9999)), 4, 10);// 需要记住 $key = md5($password.'wenzi'.$code); 从上面的代码可以看出，$key 值取决于我们输入的password值和由系统生成的code值。**2. 需要加密的字符串：**不是把密码直接进行加密，而是$url和$content 拼接起来进行加密，等解密时需要验证输入的 url 是不是当时加密时的 url，如果不是则获取不到密码。3. 加密：$content = encrypt($url.$content, $key);4. 确认解密时需要的字段：$url(当时加密时的网址), $code(第一步中随机生成的字符串), $password(密钥), $content(需要解密的内容)为了防止别人看到直接存储的 code 值，我们可以让程序按照我们的需要进行返回，我的程序里，code 值是长度为 10 的字符串， 返回时我们看到的 code 是：前 5 位是单数位，后 5 位是双数位，解密时需要交替输入。$e1=""; $e2=""; for($i=0; $idecrypt($content, $key); if(strpos($result, $url)>-1){ $msg = substr($result, strlen($url)); $s = array('status'=>0, 'msg'=>$msg); }else{ $s = array('status'=>2, 'msg'=>"验证错误"); } 首先通过$key和需要解密的字段$content 来把$content解密出来$result，解密出来后再判断$result里是否包含$url 字段，如果没有包含$url 则解密失败，否则就把密码返回给用户。假如有人获取到你了保存的加密串，如果他没有你的程序也是解不开的；即使加密串和程序都获取到了，他也没有你的密钥，因为密钥是存在你心里的，没有存放在其他任何的文件上。好了，或许有些人觉得这样保存密码很麻烦。我呢，就把它当做一次练手的项目了，顺便存储些比较偏僻网站的密码。在写这个系统时，主要学习了 AES 算法和 bootsrap 的使用。我的程序地址：github-password

placehold.it-在线图片生成器 placehold 的介绍 # 当我们进行网页设计时，经常会使用各种尺寸的图片。有时候我们用一个固定宽和高的 div 来进行代替，可是这样的效果不是很明显，而且还要进行各种各样的文字说明；或者我们得从网上寻找各种尺寸的图片然后上传上去，比较麻烦。此时如果有了 placehold，就不用那么的麻烦了。placehold 能够根据用户的需要生成各种尺寸的图片，同时配上自己的文字，而且还能根据自己的需要修改图片的背景颜色和文字颜色。当然，此时肯定会有很多人说，dummyimage也是提供一模一样的功能的，可是很可惜，我们的梯子不够高。在我寻找 dummyimage 的替代工具时，无意间看到了 placehold.it 这个网站，虽然使用起来没 dummyimage 那么顺手，但是了解之后其实也蛮不错的。 placehold 的使用 # 上面简单的介绍了下 placehold，现在来说下这个是如何使用的。 格式说明 # 首先来简单的说下这个网站中图片的地址格式：http://www.placehold.it/widthxheight/bgcolor/textcolor[&text=hello+world] 组成说明： http://www.placehold.it: 网站地址。 widthxheight: 图片的宽(width)和高(height)，注意 width 和 height 的中间是x，而不是*,如 350x200；同时，height 可以缺省，那么就默认 height=width，此时生成的是边长为 width 的正方形图片。 bgcolor: 图片的背景颜色，值为 6 位的 16 进制数字，如 ffffff, 7d7d7d 等。 textcolor: 文字的颜色，可以单独缺省，也可以与 bgcolor 同时缺省，值与 bgcolor 相同。 &text=hello+world: 如果想要在图片上添加文字的话，那么就在整个 url 的最后追加上&text=文字，如果文字中间有空格的话，用+代替；该字段可以缺省，默认显示的是图片的宽和高。 需要特别注意的是： widthxheight 必须是第一个参数； bgcolor/textcolor 中，两个参数必须连着，中间不能不能插入其他的参数； &text= 如果有的话，必须是最后一个参数。 例如：http://www.placehold.it/350x150/http://www.placehold.it/350x150/8B7355/B23AEE/http://www.placehold.it/350x150/8B7355/B23AEE/&text=love+wenzi 图片的格式后缀 # 图片有着各种各样的格式后缀：.gif, .jpeg, .jpg, png 等。placehold 也能添加图片的格式后缀，这些可以后缀可以添加到 widthxheight, bgcolor 或 textcolor 的任意一个参数后面，如：http://www.placehold.it/350x150.png/8B7355/B23AEE/ http://www.placehold.it/350x150/8B7355.gif/B23AEE/ http://www.placehold.it/350x150/8B7355/B23AEE.jpg/ 最后提供一个颜色表，搭配自己喜欢的颜色：http://www.114la.com/other/rgb.htm