按F12，你真的会准确定位前后端问题吗？

1.怎么找接口？

最好在谷歌浏览器按f12查看，主要看network，就可以定位前后端问题。

如果按f12以后，点击network，可以看到.js和.png这些结尾的都不是接口。

点击network-XHR，这里可以看到接口。

是过滤xhr请求。如果前后端分离了，数据会通过ajax请求获取，在很久以前，没有xhr的时候 ，页面不支持更新数据，需要刷新才行。有了xhr，页面支持局部更新数据。

但是这里能显示所有当前界面所有的接口么？

不一定。有些数据如果是跟页面一起带过来的就不在这。

并不是所有都是前后端分离的,不分离的时候后端会把页面渲染好 再抛出来,然后你按xhr一个接口都没有。

在xhr里面没有找到，就这里根据接口文档中的接口名字找。

一般没人在这找，几乎找不到。但是如果是接口，一般大多数是xhr，前后端分离的那种。

2.基础知识

ip和域名的作用是一样的，可以通过域名访问网站也可以通过ip访问网站，只不过发明了域名，是为了让你能够记住而已。

3.定位前端问题

4.定位后端问题

5.前后端怎么交互的？

比如你是前端，你妈是后端，你向你妈妈发送一个请求，POST /eat {"msg":“妈妈，我要吃饭！”},你妈给你一个响应 {"没得吃，滚"}

后端返回什么都可以，是它自己定的。你妈妈有自己的想法。

6.怎么分清前后端bug？

1）请求接口URL是否正确：如果请求接口URL不正确，为前端Bug；

2）http请求中的参数是否正确或为空：如果http请求中的参数不正确或为空，为前端Bug；

3）如果接口URL和参数都正确，查看响应内容是否正确或为空：如果这种情况下响应内容不正确或为空，则为后端Bug。

4）看下请求参数的值（value)是否和界面显示的一致，不一致就是前端Bug。

7.接口文档怎么看？

定位前后端Bug，不用管请求头信息。

我理解的是:接口的请求参数和返回值都是key和value的形式。

例如："flag_password":1

所以按f12定位前后端问题的时候。返回值：重点看key是不是为空的，key对不对，key对应的value值对不对，value值是不是为空的。意思差不多就行，比对能比对的。

返回值中，value值特别长的，只要它不为空就行，比对可以对比的参数就行。

后端报错不一定是后端导致的

报错是后端报出来的，前端传值错了，后端也有可能报404 5xx

在按f12之后，我觉得响应码的价值就是看服务器有没有响应，初步定位问题。然后想定位具体问题点，就对着接口文档，好好在对应的地方看看前端的参数对不对，有没有，后端的返回值对不对，有没有。

8.常用状态码

9.总结

1.网页端点击上传文件，弹出一个打开文件的窗口，窗口中的确定按钮延迟显示。（这个产品是在c/s端上传文件，网页端打开。）

因为确定按钮是前端开发写js代码，比如定义了一个函数就能实现。

而什么时候涉及接口呢？

1.我选择一个文件点击确定后，成功显示选择的这个图片，这就涉及接口，这是接口的查询作用。是前端利用接口发请求给服务器，服务器校验后，利用接口发请求给数据库，数据库利用接口返回请求给服务器，服务器利用接口再把返回的请求发给前端，展示出来。

所以这个当然不用抓包就知道是前端的问题啊。基本上看不到的操作都是后端的，能看见的都是前端的（根据实际情况，不能断章取义）。

2.c/s端软件，是要点击链接，发请求给服务器才能链接上。结果出现了，就我的电脑链接失败，别人都可以。为啥呢？

当我的电脑开着fiddler导致，因为开着代理，通过fiddler发出的请求，服务器可能不认识。

3.教训：自己工作中遇到问题，首先自己再三核实是不是自己粗心了，没看清导致，或者自己无意中开着什么软件导致。总之，自己再三确认是问题，再提。如果自己觉得很难的问题，别人两分钟就解决了，那就丢人了。一定要认真的过一遍，最好找到问题的根本再去问。

工作中尽量自己百度，学会自己解决问题。打字能沟通明白的问题就尽量打字沟通。