本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议，欢迎转载、或重新修改使用，但需要注明来源。 [署名 4.0 国际 (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/deed.zh)

本文作者: 苏洋

创建时间: 2012年11月21日
统计字数: 1561字
阅读时间: 4分钟阅读
本文链接: https://soulteary.com/2012/11/21/easy-to-use-broswer-console.html

-----


# 浏览器控制台的简单使用

![op-console](https://attachment.soulteary.com/2012/11/21/op-console.png "op-console")

很多人感觉浏览器的控制台(console)，好像是深不可测，但是实际上，我们可以使用它来直接操作页面内容，或者获取你要的任何信息，并输出出来。

这个功能非常适合调试和动态获取信息。

下面有3个简单的例子，更多的例子，你可以自行发觉哦，而且通过输入代码动态回馈的方式，可以快捷的编写要实现的需求和浏览器插件。

因为手头还有别的事情，行文仓促，不慎不详之处见谅，欢迎拍砖。 

## 正文

比如我想要得到VMWARE的菜单中的中文和对应的URL中的英文翻译，那么我可以利用CONSOLE。

首先发现VMWARE使用了jQuery，那么就更加方便了。

```js
<script type="text/javascript">var menuList = $('.nav ul li a');
var newLink = '';

for (oo in menuList){
	if(typeof(menuList[oo])=='object' && menuList[oo].href){
		if(menuList[oo].href.match(/http:\/\/www\.vmware\.com\/cn\/(.*)/i)){
			newLink = menuList[oo].href.match(/http:\/\/www\.vmware\.com\/cn\/(.*)/i)[1];
			console.log(menuList[oo].innerHTML,"\n",newLink,"\n\n");			
		}
	}
}</script> 
```

那么输出结果就是:

```txt
云计算 
 cloud-computing/ 

云计算概述 
 cloud-computing/ 

云计算之旅 
 cloud-computing/cloud-journey/overview.html 

VMware IT 之旅 
 solutions/vmware-it-journey/index.html 

私有云计算 
 cloud-computing/private-cloud/datacenter-challenges.html 

构建私有云 
 cloud-computing/private-cloud/how-to-build-private-cloud.html 

公有云/混合云计算 
 cloud-computing/public-cloud/index.html 

灾难恢复到云 
 solutions/datacenter/disaster-recovery-to-cloud.html 
```

再比如说我想获得我腾讯微博所有的收听的信息，直接用程序爬，一页一页的搞的话，我觉得程序和我都太苦逼了。

在输入框里输入了一个@，发现会出现一个列表，好吧，这时数据应该是通过接口取出来的。

你可以选择调用页面中的接口来再次回去数据并保存，不过不用想也知道，调用的时候，肯定是加了很多限制和参数。

如果不想去了解这些，该怎么最简单的获取想要的内容呢。

首先是苦逼的观察法：

通过观察chrome的resources发现，数据内容被缓存了下来。（localstorage) 那么在console中使用如下代码就可以列出所有的收听的人信息了。

```js
//你的博客ID
var user = 'soulteary';
//读取LOCALSTORAGE
var follower = localStorage.getItem('follow_0_'+user);
//读出的数据前面带有其他的字符,所以要剔除
    follower = follower.substring(follower.indexOf('{"'))
    //转换为JSON OBJECT
    follower = JSON.parse(follower)
    for(var oo in follower.info){
        //小达哥,用你做展示，给你加粉丝-，-...
        console.warn('粉丝: '+follower.info[oo][1] + '\r\r\r[@' + follower.info[oo][0] + ' http://t.qq.com/' + encodeURI(follower.info[oo][0]) + ']' );
    }

//最后输出结果:
//粉丝: 朱小达[@aballam http://t.qq.com/aballam]
//... ...
```

再比如说，我们想知道当前登录QQ的用户的昵称。正好发现QQ音乐给了一个接口。

那么只需要在控制台里输入下面的代码，就可以查看是否有登录QQ，以及当前的用户的昵称了。

```js
<script type="text/javascript">//动态创建对象
var sy = document.createElement('script');
    sy.src = 'http://portalcgi.music.qq.com/fcgi-bin/music_mini_portal/cgi_getuser_info.fcg';
    document.getElementsByTagName('body')[0].appendChild(sy);
//悄悄的用QQ音乐接口
var MusicJsonCallback = function(resp){
    console.log(resp.nickname + '同学你好');
}</script> 
```