如何在Chrome development tool里查看C4C前台发送的请求细节

我们可以在Chrome development tool的network tab里观察到从前台UI发送到后台的HTTP请求:

更多Chrome Development Tool的使用工具请查看我的博客Chrome Development Tool tips used in my daily work

但是直接查看到的是经过gzip之后的内容。如何查看压缩之前的请求体内容呢？

鼠标放在HttpRequest-dbg.js上，

会显示出调用栈，单击send:

在第34行设个断点:

重新到UI操作，断点出发之后，查看变量vRequestBody的内容即为请求压缩之前的值。

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

原文地址：https://www.cnblogs.com/sap-jerry/p/8527096.html

时间： 2024-08-03 19:07:17

如何在Chrome development tool里查看C4C前台发送的请求细节的相关文章

Chrome development tool

1. Chrome web tool: https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm 2. Responsive Web Design Tester: https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en%2

如何在Chrome下使用Postman进行rest请求测试

在web和移动端开发时,常常会调用服务器端的restful接口进行数据请求,为了调试,一般会先用工具进行测试,通过测试后才开始在开发中使用.这里介绍一下如何在chrome浏览器利用postman应用进行restful api接口请求测试. 工具/原料 chrome浏览器 postman 1.安装Postman 1 下载postman,这里提供两种方式. 1.通过postman官方网站直接点击百度搜索"postman" 就可以找到. 点击"get it now it's fre

Chrome development tools学习笔记(3)

(上次DOM的部分做了些补充,欢迎查看Chrome development tools学习笔记(2)) 利用DevTools Elements工具来调试页面样式 CSS(Cascading Style Sheets层叠样式表)定义了Web页面的表示层,是能够真正做到网页表现与内容分离的一种样式设计语言.本文主要是讲调试工具,关于CSS学习可以参考W3school的CSS部分:http://www.w3school.com.cn/css/index.asp. DevTools的Elements右边

Chrome development tools学习笔记(5)

调试JavaScript 随着如今JavaScript应用的越来越广泛,在面对前端工作的时候,开发人员须要强大的调试工具来高速有效地解决这个问题.我们文章的主角,Chrome DevTools就提供了这么个工具来帮助我们降低调试JavaScript代码的痛苦. 顺便说下,不同版本号的Chrome浏览器的DevTools可能稍微有所不同,除了数字递增的版本号号以外.Chrome浏览器包含Stable正式版.Beta測试版.Dev开发版.Canary金丝雀版以及鼻祖 Chromium版这几个分支.博

[转]chrome developer tool 调试技巧

这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异. 常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了. 1. Beautify Javascript js 文件在上线前一般都

chrome developer tool 调试技巧

这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异. 常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了. 1. Beautify Javascript js 文件在上线前一般都

【转】chrome developer tool 调试技巧

[注:本文转自:http://ued.taobao.com/blog/2012/06/03/debug-with-chrome-dev-tool/] 这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异. 常规的断点相关的 breakpoint/conditional-breakpoi

Chrome development tools学习笔记(1)

前言 Debug是每个程序员成长过程中必须会的一门技能.也是现在大学编程教育中缺失的一门课程,老师们往往更在乎让程序正确的运行,但可能对于学生来说只有10%的时候程序是直接运行成功输出正确结果的,90%的时候程序可能无法运行或者运行结果不正确.我周围的很多同学就是在一次次的程序出错中渐渐丧失了对编程的兴趣,我想,如果学校里可以在教会编程的时候,也传授下debug的方法,让学生能够自己去一步步找出bug,应该会让更多人喜欢上编程这门技能的. 在大学里,我们可能只知道debug是可以运行程序的,从来

Chrome插件Visual Event查看Dom元素绑定事件的利器

找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开源 Javascript 书签,能提供绑定在DOM元素上的事件调试信息.Visual Event能显示如下信息: 1.哪一个元素有事件绑定 2.某元素上绑定的事件类型 3.事件触发后运行的代码段 4.定义绑定函数的源文件和行号(仅限于WebKit和Opera浏览器) 除了对调试你自己的代码大有用途,