如何模拟特定用户代理发送请求验证Angular服务端预渲染功能

方法1：使用curl命令（最快捷） #

直接在终端执行指定了爬虫User-Agent的curl请求即可，示例命令如下：

curl -A "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" https://你的站点地址/需要验证的页面路径

执行后直接查看终端返回的HTML内容即可判断预渲染是否触发。

方法2：通过浏览器开发者工具模拟 #

适合需要直观看到页面渲染效果的场景，操作步骤：

• 打开Chrome/Edge等浏览器，访问需要验证的站点页面
• 按下F12打开开发者工具，点击右上角三个点图标，选择「更多工具」-「网络条件」
• 在「网络条件」面板的用户代理区域，取消勾选「使用浏览器默认值」
• 下拉选择预设的「Googlebot」，或者手动粘贴Googlebot的User-Agent值
• 刷新页面后右键查看页面源代码，即可判断是否返回预渲染内容

方法3：使用接口调试工具（Postman/Apifox等） #

操作步骤：

• 新建GET请求，填入需要验证的页面完整地址
• 在请求头（Headers）中添加User-Agent字段，值填入Googlebot的User-Agent字符串
• 发送请求后查看响应体的HTML内容即可

预渲染生效判断标准 #

如果返回的HTML内容中包含页面实际的业务文本、DOM节点内容，而非仅返回空的<app-root></app-root>根节点和SPA加载所需的JS脚本，说明爬虫身份识别成功，预渲染功能正常触发。如果和普通浏览器访问返回的内容一致，则说明预渲染规则未生效。

如果需要验证其他搜索引擎爬虫，只需替换对应爬虫的User-Agent值即可，比如Bingbot的UA为Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)

内容的提问来源于stack exchange，提问作者NeNaD