Console

chrome 控制台

July 16, 2017
Web, Http, Console

chrome是一个非常好用的Web开发的工具,而不仅仅是个好用的浏览器。 按下就可以调出控制台,控制台可以与页面分离成为一个单独的窗口。这个在调试大屏效果的时候很方便,但是我不是搞前端设计的,所以不管这个。 这里可以看到有很多选项,常用的有以下几个:Elements、Console、Sources、Network。 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…