上次在《天天见的URL，我想了解你多一点》的结尾说会写一篇关于 Chrome 控制台的文字，哒哒，今天就来啦~
我第一次使用Chrome浏览器是在2011年读研一的时候，老师在课上强烈的安利，回去就安装了Chrome，又快又简洁。第一次接触Chrome控制台（DevTools），是在2014年做wap页面产品的时候，站在开发座位前，看他在Chrome里演示移动端的页面给我确认。
当时就觉得好神奇！回去之后自己也研究了下，对于PM来说，虽然不会像开发那样使用控制台调试代码，但是也有很多实用的功能！一起来看看吧~
首先，Chrome如何打开控制台？
Mac用户使用快捷键 Cmd+Option+I，或者浏览器右上方更多功能>更多工具>开发者工具。
可以用来做什么？
一、模拟手机上的WAP界面
使用控制台可以模拟网页在多种型号的手机及微信上的展示效果，如果需要测试线上问题、上线前的测试和验收、截取wap页面等情况下，无需再在手机浏览器中打开网页，直接在Chrome里搞定，而且可以测试多种机型。
首先点击控制台的位置1，表示切换到手机展示模式，然后再右侧位置2处，将控制台的位置调到两侧，方便页面展示，图中我选择了右侧。
设置好了之后，打开知乎wap 页面，https://m.zhihu.com/ ，显示效果如下图。点击位置1可以切换不同的手机型号，点击位置2可以配置List里的手机型号。
配置手机型号的页面，也支持自定义设备，是不是很强大~！
二、页面元素
1、修改文案，测试一行文案的字数。点击控制台左上方的选择图标，或者在页面上右击菜单>点击审查元素后，页面的元素可以被选择。如图，Hover到所需文案，并点击，在控制台会高亮对应的元素，双击高亮区域，就可以编辑啦。你所输入的内容，在页面上会实时同步修改。所有页面元素的修改，在刷新浏览器之后，页面会恢复。
2、编辑文案/元素的颜色/大小等，如图，选择文案后，在控制台右侧Styles里，可以编辑文本的大小Font-size、颜色Color，自己测试效果。
3、保存禁止转载的文案或图片。有时候网站会限制用户复制文本或保存图片，直接在页面上操作是无法保存的，这时候使用控制台就发挥作用啦。比如下图，作者的答案设置了禁止转载，只需要利用控制台选中对应元素，在控制台里就可以复制啦。注意涉及版权的内容不要滥用哦。
4、取色和保存。点击Styles里的color设置，打开颜色面板，再点击取色工具(位置1)，可以在取页面任何的颜色(位置2)，取色的同时也会显示颜色代码。点击位置3的加号，就可以保存到色板里。以后遇到喜欢的颜色，都不会错过啦。
三、测试网络访问速度
在控制台>Network里，可以选择访问页面的网络环境，测试不同环境下页面的打开速度、加载情况，比如在下图模拟在无网络的情况下，页面展示情况。
如图，可以切换不同的网络，比如3G、4G、GPRS等等，也可以自定义网络环境。
四、赋能插件
有的插件利用控制台作为自己的内容区，例如，如果有爬虫需求的小伙伴可以尝试 Web Scraper，插件地址 http://t.cn/RSXFAKQ ，如图，第一个爬虫抓的是豆瓣电影排名前
250的电影，第二个抓的是知乎上所有关注自己的用户。具体的使用方法这里就不说啦，有兴趣的可以自己研究一下；
下面是另一个插件 AdBlock，可在控制台看到页面上拦截的广告。
以上四点仅仅是Chrome控制台九牛一毛的功能，感兴趣的小伙伴可以去查看官方文档，地址http://t.cn/RfyjYCU 。
————————正文完—————————
哈哈，你一定注意到了，本文里面所给的链接都是短链接，YES！它们都是用urlShorter生成的，urlShorter 今天更新到了 V1.1.0，一是加了谷歌的短链服务，若判断用户在海外则优先使用谷歌短链，二是进行了国际化处理，总之，海外的朋友可以愉快地使用啦。
优化持续进行中，走过路过不要错过，再次附上插件地址：http://t.cn/RaEykTX 。(__)
微信扫一扫关注该公众号哦，mua
网友评论