按F12打开开发者工具,网页点Network标签页,网页刷新页面,网页随便点一个请求,网页往下翻到Request Headers区域。网页这大概是网页能找到headers最快的方法,比任何教程都直接。网页
但问题来了——会打开和会看是网页两码事。我见过太多人在这一步卡住,网页盯着那一大串键值对发懵。网页其实headers没那么玄乎,网页它就是网页浏览器替你写的一封自我介绍信,告诉服务器:“我是网页谁,我从哪来,网页我想要什么”。网页
拿最常见的Chrome举例。你按下F12后,那个Network面板一开始是空的,因为浏览器只记录打开工具之后发生的请求。所以你得先刷新页面,让所有资源重新加载一遍。这时候你会看到几十个请求密密麻麻地列出来,图片、脚本、样式表,还有最重要的那个——主文档请求,通常排在最上面,名字和你访问的网址差不多。
点开它,右侧会弹出详情面板。默认显示Headers标签,往下拉,你会看到Request Headers这一栏。这里藏着浏览器发给服务器的所有元信息。User-Agent告诉你用的是哪个浏览器什么版本,Cookie是服务器之前留在你电脑上的身份凭证,Referer则暴露了你从哪个页面跳转过来。
有些时候,你要找的headers不在浏览器里。比如你写爬虫,需要用Python模拟请求,这时候就得用代码手动构造headers。我当年第一次写爬虫时,直接把浏览器里的headers全复制过去,结果还是被服务器拒绝了。后来才明白,有些字段是浏览器特有的,比如Accept-Encoding里的gzip压缩,还有Sec-Fetch-Site这种现代浏览器才有的安全标识。服务器会根据这些判断你是不是真人操作。
还有个更隐蔽的场景——移动端调试。手机浏览器没法按F12,但你可以在电脑上打开Chrome的远程调试功能,用USB连上手机,在电脑的DevTools里看手机页面的网络请求。操作路径是:地址栏输入chrome://inspect,勾选Discover USB devices,然后你的手机页面就出现在列表里了。点inspect,就能像调试电脑页面一样看headers。
对了,如果你只想看某个特定请求的headers,不用在列表里乱翻。Network面板顶部有个筛选框,输入你的API地址关键词,能快速过滤出目标请求。还有个小技巧——点击请求后,按F5刷新页面,能看到所有请求的加载顺序,headers也随之更新。
最后说个实战例子。上个月我调试一个支付接口,回调一直报签名错误。查了半天,发现是服务器要求的X-Timestamp字段没传,而这个字段藏在一个第三方SDK的拦截器里,根本不显示在浏览器Network面板上。最后我是用抓包工具Charles才逮住它。所以你要明白,浏览器DevTools只是工具之一,真正的headers可能比你看到的更复杂。但无论如何,从F12开始找,永远是第一步。