Chrome DevTools的使用

今天要聊的开发技巧并不是要让各位产品大拿们转岗成为开发，来抢我的饭碗。只是想告诉大家，如果知道这些技巧，也许会对你的工作带来一些方便，就像学会了茴香豆的茴字有四种写法。

Chrome DevTools是Chrome浏览器自带的一个调试工具，在浏览器里面按下F12键或者在设置-更多工具里面就能找到它。这个工具主要是给前端工程师调试页面用的，但是我们也可以利用它来做一些和开发无关的事情，下面来看看：

1. 修改页面内容

   你或许有这种需求，要改动网页上的一段文案或者字体颜色，看一下效果是否满意，或者说为了装逼，想秀一下自己支付宝8千万的余额，这些都可以通过简单地修改页面内容来实现。

   操作方法：选择Elements这个Tab，点击左边小箭头，移动箭头到你要更改的地方点击，对应页面元素你就找到了，修改里面的内容会立刻显示到页面上

   
   

2. 查看手机版网页

   有时候想看某个H5页面在手机浏览器里或者在微信里面打开是什么样子的，并不需要拿出手机来看，只需要在开发工具里面，使用模拟屏幕工具，照样可以达到目的，这样是不是更方便截图呢？

   操作方法：点击左边的手机图标，选择你想要的机型，输入网址，手机版页面就会展现在你面前

   

3. 下载图片、视频、音频

   有很多网页限制了你右键另存图片或者音视频，不要灰心，毕竟你是懂技术的产品经理，这张图片已经被你的浏览器拉到本地了，你肯定能把它找出来的。

   操作方法：选择Resources这个Tab，如何找到Images目录，下面是这个页面中用到的全部图片，只需要找到你想要的图片，就可以右键保存了；如果你还懂一些代码，也可以用方法1中查找页面元素的方法去找到图片URL

   
   

4. 模拟低网速用户

   也许偶尔会收到用户的抱怨，说你家网站在2G/3G下打开速度很慢，或者说很费流量，但是平时你的体验却感受不到这些，这个时候你可以用DevTools的模拟网速工具，来体验一下低速环境自家网站的效果。同时你还能看到每个请求耗费的时间和流量，如果发现一些比较夸张的现象，可以立马截图去找开发优化，这时开发哥绝对不会拒绝你的需求。

   操作方法：选择Network这个Tab，右上方可以选择一个想要模拟的网络环境，然后输入网址，所有网络请求耗时和流量都展现下方列表里了

   

先介绍这4个小技巧，Chrome DevTools里面还有很多其它功能，拿出你体验产品的好奇心，前去挖掘吧，说不定还能发现什么惊喜呢。