chrome F12开发者工具之preview 与response的区别

chrome F12开发者工具之preview 与response的区别

问题描述:
我们在Chrome浏览器按F12调试程序的时候会查看Network里的Preview和Response的结果,不管是请求页面还是请求js还是请求css，二者的结果似乎看起来都一样,那么这两者到底有什么区别呢?
❤把鼠标移到Perview上会显示(response preview) 即:响应-预览

❤把鼠标移到Response的意思是:(Raw response data)即:原始-响应-数据

二者的区别:
❤在Preview(预览功能)中，控制台会把发送过来的json数据自动转换成javascript的对象格式,而且可以层层展开，方便前端工程师遍历调用。

❤而 Response中的数据是没有进行格式化的.

这里所讲的的格式化是指:对后台传输过来的json、html、css等数据进行格式上的转换.
总结:
Perview的意思是(response preview)：响应-预览 (响应资源进行了格式处理的内容)
Response的意思是:(Raw response data)：原始-响应-的数据(响应资源未进行格式处理的内容)

chrome F12开发者工具之preview 与response的区别相关推荐

谷歌Chrome浏览器开发者工具教程—基础功能篇
Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英文界面,且没有中文,这让很多朋友都不知道怎么用.下载吧小编为大家带来Chrome开发者工具基础 ...
chrome浏览器开发者工具F12中某网站的sources下的源码如何批量保存？
目录 chrome浏览器开发者工具F12中某网站的sources下的源码如何批量保存 1. 常用保存Sources源码的两种方法 1.1单个文件 1.2 单个页面 2. 问题 3.解决方案 chro ...
Chrome浏览器开发者工具介绍；（包括，Network面板介绍，XHR等等）
为什么写了这篇博客: (1)原因一在[OA系统二十三:请假审批四]这篇博客中,加载[请假审批这个内嵌页面]后,这个内嵌页面中需要显示[待审批请假数据]的列表数据,而这些列表数据,是通过ajax请求从 ...
谷歌Chrome浏览器开发者工具教程—JS调试篇
上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主 ...
浏览器开发者工具修改html后执行,谷歌Chrome浏览器开发者工具教程—JS调试篇
上一篇咱们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是最经常使用到的Chrome功能面板,也是解决通常问题 ...
如何使用浏览器的F12开发者工具调试页面？
一,背景介绍通常前端程序员在按照UI效果图编辑网页时,不可能一口将全部的代码全部写好,通常情况是编写边调,经过反反复复的调试后才能达到要求的效果,这时候用Chrome浏览器的F12开发者工具能形象直 ...
手机怎么打开f12_手机网页F12开发者工具eruda
手机上要对网页进行调试真的很麻烦,尤其是iOS系统,你还得有个苹果电脑还得装的是苹果系统,真难了. 还好现在有js模拟的F12开发者工具,虽然并不能和Chrome的比,但是一般调试使用也足矣了,前端福 ...
浏览器F12开发者工具
浏览器F12开发者工具 1.介绍 2.工具附录 1.介绍 F12常用于网站界面测试.调试,分析问题,查看HTML元素.查看响应事件和数据等,还可帮助测试工程师定位前后端Bug: 其中使用最多的功能页 ...
[译]通过使用Chrome的开发者工具来学习JavaScript
原文:https://gist.github.com/4158604 本文作者是Peter Rybin,Chrome开发者工具团队成员. 本文中,我们将通过使用Chrome的开发者工具,来学习Java ...

chrome F12开发者工具之preview 与response的区别

chrome F12开发者工具之preview 与response的区别相关推荐

最新文章

热门文章