web端产品经理在日常操作系统时,难免会遇到BUG。
由于一个系统是由前端开发工程师和后端开发工程师共同开发的,产品经理在提BUG时,如果能定位到问题是出在前端还是后端,提供有价值的信息给到开发工程师,这样能大大提高彼此的工作效率。
![808b2dfa447ab79bbebef86477b6fbbc.png](https://i-blog.csdnimg.cn/blog_migrate/b960ada7c40055becc138dcaf5e6d021.jpeg)
运用“F12”键打开“开发者工具”,就能灵活定位系统前后端BUG。
开发者工具的基本介绍
“开发者工具”常用于网站界面测试、调试,分析网页所出现的问题,查看html元素以及查看响应事件等。
下面以谷歌浏览器(Google Chrome)为例:打开一个网页,再点击F12(部分电脑是fn+F12),或者在网页点击鼠标右键后选择【检查】,就可以打开“开发者工具”了。
![1135a1a11771ad16ea3096a8f27589da.png](https://i-blog.csdnimg.cn/blog_migrate/ae9f8bf41a21f766094dbe869adc10e8.jpeg)
需注意:不同浏览器的“开发者工具”在界面上会有差异,但功能基本一致。掌握某种浏览器的用法后,便可以操作其他浏览器了。
![33d56c14c65b079d2346079504801210.png](https://i-blog.csdnimg.cn/blog_migrate/477873d21ed8672af5037acfb7353f74.jpeg)
开发者工具,最常用的四个功能模块:ELements、Console、Sources、Network。
1、Elements(查看器/页面元素)
查看网页所有元素的代码和属性。
可以在Elements标签直接手动修改任一元素的属性和样式,修改后能立即在浏览器里面得到反馈。
2、Console(控制台)
控制台一般用于执行一次性代码,查看JavaScript对象、查看调试日志信息或异常信息。
简单理解:在页面出现BUG问题,一般情况下会在此处展示。
通常控制台有js报错,直接找到前端开发工程师,再由前端开发工程师根据具体问题进行调试,并解决问题。
3、Sources(源代码)
此处也称之为资源,当前打开的网页页面所涉及到的所有源代码都会出现在该栏目,包括:样式、css、图片、js文件等。
4、Network(网络)
用于查看网络信息,包括:请求地址、Status(响应状态码)、Type(响应数据类型)、Size(响应数据大小)、Time(响应时间)以及Waterfall(重要相关区域的请求耗时),也可以筛选出不同数据类型的URL。
![0f1e5625b155ff9f143c0dedef863dcd.png](https://i-blog.csdnimg.cn/blog_migrate/abb925575735964914dc474b09b99bc0.jpeg)
主要记录前端往服务器发的所有的http请求信息。
每个请求发送了什么数据,服务器是否正常响应请求;如果响应请求,在Network标签下看到响应状态码、响应数据等。
![0e66b80b4fc3e96096d7024814e41e0d.gif](https://i-blog.csdnimg.cn/blog_migrate/d086453ad9fd68678caaaa52e86eb1d5.gif)
其次,点击Dock Side,可以调整开发者工具的位置,下图4个图标分别对应:
![b3222df3edb2e82cc54deee0b8b37184.png](https://i-blog.csdnimg.cn/blog_migrate/b6058fc67847c3e3d629f48d9fc1144a.jpeg)
(1)将开发者工具独立窗口;
(2)停靠于左侧;
(3)停靠于底部;
(4)停靠于右侧;
如果是确认移动端(例如:H5)问题,采用左/右布局会比较方便;
如果是确认PC端问题,采用底部布局会比较方便。
开发者工具有什么作用?
1、定位BUG属于前端还是后端
在分析一个BUG是属于前端还是后端,通常看两个标签:Console(控制台)、Network(网络)。
例如:
(1)点击某个按钮,前台没有任何反应
在Console(控制台)处看到有看到js错误。
![45a261fc92130b6752aeec885619a784.png](https://i-blog.csdnimg.cn/blog_migrate/e08f95ba08b782e6c849a2ca10f38b6a.jpeg)
而在Network(网络)处,没有看到前端对后端的功能接口发起调用,即点击按钮时没有看到返回数据,大多数情况下,这个BUG属于前端的。
(2)点击某个按钮,前台没有任何反应
在Console(控制台)处看到没有js错误。
![c19945b62131f4af1df255f200deb865.png](https://i-blog.csdnimg.cn/blog_migrate/8a8bba9861c179c0692c753c5e870ad3.jpeg)
而在Network(网络)处,看到请求返回的状态码是500。
此时可以判断这个BUG是后端导致的,可以知道后端开发工程师直接解决问题。
常见的状态码:200、404、500,作为产品经理最好能去了解。
详细请看:作为产品经理,这些技术知识总该了解吧?
2、查看/编辑元素
![4e85ce08bd46fc44e2f1e2206b0c0672.png](https://i-blog.csdnimg.cn/blog_migrate/f0a2390532002aba72dd291844a9bd10.jpeg)
点击上图的【箭头】(或者使用快捷键Ctrl+Shift+C)进入选择元素模式,在页面中选择需要查看的元素,就可以在开发者工具Elements标签处直接定位到该元素源代码的具体位置 。
可以修改字体的大小、颜色、背景色,以及图片的高度、宽度等等,刷新页面之后就会恢复原状。
![b877f1664589dab513c3350a01333432.png](https://i-blog.csdnimg.cn/blog_migrate/f7733eff0f8fe9ca4139bde03549f0d9.jpeg)
例如:在日常工作中,希望调整一下某个页面的字体颜色,可以自行在Elements做调整,调整后可以在浏览器立即看到效果。
当知道需要如何调整之后,再将相关信息给到UI设计师/前端开发工程师,从而避免反复调整。
![3cf3210abdecbc8ae303e665f82ef826.gif](https://i-blog.csdnimg.cn/blog_migrate/26c54b8bbf94e9da4697e25a0324a81a.gif)
(图片源于网络)
3、查看移动端的适配问题
![e7ab1f7e066e5127a0f565e3c9123a57.png](https://i-blog.csdnimg.cn/blog_migrate/4ac4d11d3a7b839c39b71067eaf50099.jpeg)
点击上图的【手机图标】(或者使用快捷键Ctrl+Shift+M)可以换成模拟移动端浏览的状态。
![a4fd5cfccbf16958093d0e4600eb3b9a.png](https://i-blog.csdnimg.cn/blog_migrate/7b79add4d0fd53fd5583c889af12ce70.jpeg)
可选择不同型号手机,以及不同的分辨率样式来查看页面,从而观察页面在不同手机、不同分辨率下的显示效果。
4、复制“不可复制”的文字
在日常查阅资料时,如果存在某段文字不支持直接复制,可以通过“开发者工具”进行复制。
![09e18047acee6b51856c10e3b4a646d6.png](https://i-blog.csdnimg.cn/blog_migrate/7a2d398cf940f6556777ba052a863214.jpeg)
点击F12,再打开对应的页面,在Elements处按快捷键Ctrl+F,并在搜索框处输入想复制的那段文字的其中几个字,就可以找到对应文字的源代码并进行复制了。
5、下载“不可保存”的图片
在日常搜索图片时,如果存在某张图片不支持直接保存,可以通过“开发者工具”进行保存。
![90c813df28e5bcade104d432535dd0d9.png](https://i-blog.csdnimg.cn/blog_migrate/674ccb092f6898dfbe86a65fcd7c2cca.jpeg)
点击F12,再打开对应的页面,选择【Network】,再选择【Img】,能想要保存的图片,双击或者直接复制URL,打开对应的网址即可以下载图片。
写在最后
产品经理在日常工作中提BUG时,如果能提供有用的信息给到开发工程师,可以降低和开发工程师之间的沟通成本,从而减少沟通的矛盾。
巧用“开发者工作”,也能间接体现自身具备一定的技术专业性。