腾讯前端：产品如何用浏览器DevTools提升工作效率

旅途驿站07：技术知识-Chrome的小技巧

本文作者来自大雄背起行囊，专栏作者lemon。

笔者刚入门时，对产品实现所需的技术知识真的是一窍不通，所以常常会发生各种尴尬。为了让各位同学少交一点技术认知税，在此，給各位邀请来腾讯前端工程师lemon，来分享相关系列文章：从开发视角产品经理必备的技术知识。以下为第1篇。

前言：

可能有产品经理已经知道浏览器有个开发者工具，其中Chrome，firefox等可以通过快捷键F12打开，也可以在网页点击鼠标右键，然后点击“检查”打开。IE浏览器的话就要点击右键，选择“检查”打开。那么这个工具有什么作用呢？为什么看到web前端开发们经常是打开这个工具？其实这个工具是他们调试代码用的。但是掌握这个工具的一些技巧，对产品经理的用处很大的。这里建议大家用谷歌浏览器~，下面讲的内容都是谷歌浏览器的开发者工具。

一、修改网页内容

1.使用场景

在已开发页面上，产品经理的需求发生了变更，但是改动的点，原型图上的标注是较难识别出来的，这时候可以直接在页面上做调试。

2.具体用法

F12打开开发者工具。按照下图操作，先点击下图的箭头，处于激活选中状态，然后在网页上选择要改变的文字，选择完后，右边的代码就会选中（蓝色选中部分），然后双击蓝色选中部分的文字，就可以改文字了。

除了改文字，还可以改样式，如下图2（看红色箭头指向），双击箭头指向的空白区域，然后写上“color:red”就可以改变字体颜色了，如果你想把它变成其他颜色也可以，“color:yellow”,"color:green"等

二、看手机模式的网页

1.使用场景

想看手机版本的网页或者是想看这个网站是否做了PC版本跟手机版本的兼容。

2.具体操作

如图3，点击红色箭头指向的长方形，网页就进入了手机模式，然后点击标识1还可以选择，手机的类型，iphone6,iphone7,iphone7plus,androd等等。

三、查看报错信息

1.使用场景

产品想快速定位是前端出了错误还是后台报了错误，找对人来跟进。

2.具体操作

可以从2个方面来查看错误信息，但是也不是绝对的准确，因为有些业务逻辑错误，在这里是不会有报错的。

第一，点击Console，看图4，如果报错信息是从前端的文件报的错，（图4的右边有显示报错的文件），那么很可能就是前端的错误。

第二，点击NetWork->选中左边某个请求 -> Preview，如果数据都能正常返回，表示后台没有报错，如果返回了500，或者504等状态，那么很可能是后台报了错。

四、不使用缓存

1.使用场景

缓存问题经常是产品遇到的尴尬问题，有时候开发说改了，产品说没改。在开发者工具选择不使用缓存，那么每次浏览器都会去请求新的内容。

2.具体操作

选择NetWork,然后在Disable cache打勾，就可以啦，是不是很简单~

有一个厉害的前端朋友确实是产品人的荣幸，这样可以极大提升需求澄清时的沟通质量。

好了，本次小技巧的分享就到这里了，后面会陆续分享一些产品必备的前端知识，如果觉得有用，欢迎分享给你身边的小伙伴哟！