chrome 控制台

chrome是一个非常好用的Web开发的工具,而不仅仅是个好用的浏览器。
按下就可以调出控制台,控制台可以与页面分离成为一个单独的窗口。这个在调试大屏效果的时候很方便,但是我不是搞前端设计的,所以不管这个。

这里可以看到有很多选项,常用的有以下几个:ElementsConsoleSourcesNetwork

Elements 审查元素

这里可以看到你的HTML源码,和对应的css。在前端工程师的工作中经常会用到,不过现在自动化的工具越来越多了,也不一定非用这个了,但是这个一定是很强大的功能。
在这个框的最左上角有一个鼠标箭头的标志,点一下就可以到页面上定位某个元素的代码,很好用。
这一块没有什么技术含量

Console 控制台

这是一个命令交互的控制台,语言是Javascript。下面就介绍一下常用的几个命令。

console.log()

这是一组四个命令分别是:console.log()console.info()console.error()console.warn()。其作用就是在控制台中打印信息,在编写前端工程的时候可以这样在js代码中打印log信息来排查问题。

$.cookieStorage.set(‘id’, 1234)

这是一个cookie操作函数。可以对应的设置cookie的参数值,如上,如果某个网站的用户登录验证使用cookie来做的,你又猜到了其参数的名字,就直接设置cookie就可以登录上去了,免密码呢。

Sources

这个在调试的时候可以看到自己的页面的每个资源的加载情况,包括时间、来源、是否加载成功等,也可以把资源down下来。

NetWork

这个我感觉是最好用的一个,他会记录你的异步请求。可以记录请求的地址,参数,返回值等等。

Anything more?

Nothing more…

Talk is not cheap.