使用javascript / jquery

Question

使用javascript或jquery，有没有办法跟踪网页发送的http请求（包括标题，参数等）？我想要达到的目标类似于Google Chrome开发者控制台的“网络”标签功能。我发现的所有解决方案都是跟踪Ajax请求或使用javascript（使用XMLHttpRequest Object）发出的请求。此功能还应与浏览器兼容。

Answer 1

你有三个选择。

1. 确保您知道可以触发请求的所有地方，并附上一个事件，例如RequestFired。并在JavaScript / jQuery代码中绑定onRequestFired事件。

2. 浏览网络开发者文档或每个浏览器并根据浏览器执行它。在Internet Explorer 7和8等旧版浏览器中可能无法使用此功能。

   • Google Developers Doc
   • Firefox Network Information API
   • NetworkInformation.connection

3. 如果是特定服务器，请使用服务器端脚本读取服务器日志，并使用端点访问它。您可以使用长轮询方法并获取日志的内容，可能就是这样：

   ＆＃13;

   ＆＃13;

       // jQuery
       $(document).ready(function () {
         setInterval (function () {
           $("#log").load("/path/to/endpoint.log");
         }, 5000);
       });

   ＆＃13;

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
       <h3>Logs</h3>
       <div id="log"></div>

   ＆＃13;

   ＆＃13;
   ＆＃13;

Answer 2

您无法追踪所有内容。

例如，Xmlhttprequest中的一些调用是透明的（301 HTTP代码），并且无法由javascript客户端处理。

请参阅XMLHTTrequest规范：http://www.w3.org/TR/XMLHttpRequest/#infrastructure-for-the-send-method

这是其中一些原因。如果你想跟踪“网页”的请求，最好使用该浏览器的开发工具或数据包捕获。

在用户体验方面，你只能做有限的事情。

Answer 3

如果您使用AngularJS这样的框架实现单页Web应用程序，则可以这样做。你可以使用HTTP interceptors。

来做到这一点

除此之外，您只能跟踪Ajax请求，但不能跟踪JavaScript请求。