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里面还有很多其它功能,拿出你体验产品的好奇心,前去挖掘吧,说不定还能发现什么惊喜呢。

猜你喜欢

转载自blog.csdn.net/hopewtc/article/details/50599842