首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Puppeteer不会在headless模式下返回HTML标记,但是当它不在headless模式下时会返回HTML标记--为什么会这样呢?

Puppeteer 是一个 Node.js 库,它提供了一个高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。在 headless 模式下,Puppeteer 不会渲染页面的 HTML 标签,因为它不会启动浏览器界面,而是直接与浏览器引擎通信。

原因分析

  1. 渲染差异:在非 headless 模式下,浏览器会完整地渲染页面,包括 HTML 标签。而在 headless 模式下,浏览器不会渲染页面的用户界面,因此不会生成完整的 HTML 标签。
  2. 性能优化:Headless 模式下,Puppeteer 主要用于自动化测试和抓取数据,不需要渲染用户界面,因此性能更高。

解决方法

如果你需要在 headless 模式下获取完整的 HTML 内容,可以手动获取页面的 HTML 内容。以下是一个示例代码:

代码语言:txt
复制
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 获取页面的 HTML 内容
  const content = await page.content();

  console.log(content);

  await browser.close();
})();

参考链接

通过这种方式,即使在 headless 模式下,你也可以获取到完整的 HTML 内容。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

用Node.js把HTML转成PDF格式

Puppeteer 默认以 headless 模式运行 Chrome 或 Chromium,但其也可以被配置为完整的(non-headless模式运行。...首先,我们启动浏览器(仅在 headless 模式支持 PDF 生成),然后打开新页面,设置视口,并导航到提供的URL。...设置 waitUntil:'networkidle0' 选项意味着至少500毫秒没有网络连接时,Puppeteer 认为导航已完成。 (可以从 API docs 获取更多信息。)...否则你可能忽略一个事实:你无法运行最新的 Puppeteer 版本,并且你还需要用一个标记禁用 shm : 1const browser = await puppeteer.launch({ 2 headless...但是在跨浏览器兼容性方面,的表现如何? 在选择 CSS 打印规则时,你必须在每个浏览器中测试结果,以确保提供的布局是相同的,并且它不是100%能做到这一点。

6.6K30

web自动化测试-puppeteer入门与实践

在chrome 59 chrome团队支持了headless模式,在Headless模式,用于自动化测试和不需要可视化用户界面的服务器。...puppeteer的出现让很多lib的开发者放弃继续开发,比如PhantomJS 的作者他看到puppeteer的出现就果断的放弃了PhantomJS的维护,很多小伙伴该伤心了吧。...1.下面就是使用 Puppeteer 进行自动化的一个典型示例: 上述代码通过puppeteer.launch方法生成了一个browser的实例,此时在默认情况headless模式,对应于浏览器,...上述代码通过puppeteer.launch({headless:false})此时headless模式是关闭的,但我们执行代码的时候回发现此时会打开一个chrome,并且可以看到执行的步骤,这在我们平时的调试过程中是非常重要的...2.接着进入代码目录执行yarn install该命令自动的安装相关的依赖,当然这是在你吧文章中的环境相关的都安装好了的情况

1.5K30
  • 超越Selenium的存在---Pyppeteer

    实际上是 Puppeteer 的 Python 版本的实现,但他不是 Google 开发的,是一位来自于日本的工程师依据 Puppeteer 的一些功能开发出来的非官方版本。...因为什么?...headless (bool): 是否启用 Headless 模式,即无界面模式,如果 devtools 这个参数是 True 的话,那么该参数就会被设置为 False,否则为 True,即默认是开启无界面模式的...首先可以试用最常用的参数 headless,如果我们将它设置为 True 或者默认不设置,在启动的时候我们是看不到任何界面的,如果把设置为 False,那么在启动的时候就可以看到界面了,一般我们在调试的时候会把设置为...关闭 Headless 模式之后的界面 但是可以看到这就是一个光秃秃的浏览器而已,看一相关信息: ?

    1.4K40

    别只用 Selenium,新神器 Pyppeteer 绕过淘宝更简单!

    实际上是 Puppeteer 的 Python 版本的实现,但他不是 Google 开发的,是一位来自于日本的工程师依据 Puppeteer 的一些功能开发出来的非官方版本。...因为什么?...headless (bool): 是否启用 Headless 模式,即无界面模式,如果 devtools 这个参数是 True 的话,那么该参数就会被设置为 False,否则为 True,即默认是开启无界面模式的...首先可以试用最常用的参数 headless,如果我们将它设置为 True 或者默认不设置,在启动的时候我们是看不到任何界面的,如果把设置为 False,那么在启动的时候就可以看到界面了,一般我们在调试的时候会把设置为...关闭 Headless 模式之后的界面 但是可以看到这就是一个光秃秃的浏览器而已,看一相关信息: ?

    5.1K31

    Headless Chrome:服务端渲染JS站点的一个方案【上篇】【翻译】介绍Headless Chrome 预渲染页面

    :Headless浏览器完全可以作为服务端渲染的一个替代方案,在服务端转化js 站点为静态html页面;在webserver 上运行Headless 浏览器完全可以预渲染现代js 模式的应用,增加响应速度...Headless Chrome 预渲染页面     所有爬虫都理解HTML,所以我们需要解决的是如何执行JS,来生成HTML。如果我告诉你有这样一个工具,你觉得如何?    ...Headless Chrome 不关心使用什么库、框架、或者工具链;早饭吃进去Javascript,午饭就会吐出来静态的HTML。...> 2.SSR (Server Side Render)方法 接下来,简单实现一ssr方法 ssr.mjs import puppeteer from 'puppeteer'; //内存缓存,key...缓存渲染后的HTML是提高响应的最有效方法,当你再次请求的时候,避免再次运行headless chrome。后续讨论其他方面的优化。

    2K50

    在 Docker 中配置 Headless Chrome Node.js 服务器

    网站爬虫和基于 HTML 的内容分析也有无数的用例。 在 99% 的场合,你实际上不需要浏览器 GUI,因为它是完全自动化的。...Headless Chrome 与 Node.js Node.js 是 Google Chrome 开发团队使用的主要环境,拥有用于与 Chrome 通信的原生集成库:Puppeteer.js。...最重要的是,Puppeteer 不需要 GUI。所有这些都可以在无头模式下完成。...这对于我们的容器镜像来说白白的占用空间,这就是为什么我们要保留 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD = true 这个环境变量的原因。...Headless Chrome 的常见问题 Google Chrome 在执行时会占用大量内存,因此 Headless Chrome 在服务器端产生相同的情况也就不足为奇了。

    2.9K10

    Puppeteer 初探

    Puppeteer是一个Node库,提供了一个高级API来通过DevTools协议控制无头 Chrome或Chromium ,它也可以配置为使用完整(非无头)Chrome或Chromium。...你可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。 为什么产生Puppeteer?...很早很早之前,前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 在Chrome headless...,仅在Node v7.6.0或更高版本中受支持。...使用Headless模式 Puppeteer默认以Headless模式加载Chromium,如果想加载完整的Chromium(这样方便观察网页加载的效果究竟是怎么样的),可以执行以下命令 const browser

    2.7K20

    Node:使用Puppeteer完成一次复杂的爬虫

    简而言之,这货是一个提供高级API的node库,能够通过devtool控制headless模式的chrome或者chromium,它可以在headless模式模拟任何的人为操作。...和cheerio的区别 cherrico本质上只是一个使用类似jquery的语法操作HTML文档的库,使用cherrico爬取数据,只是请求到静态的HTML文档,如果网页内部的数据是通过ajax动态获取的...这是我们要爬取的淘宝网页,只有中间的商品项目是我们需要爬取的内容,仔细分析的结构,相信一个前端都有这样的能力。...因为Puppeteer启动一个浏览器,执行内部的逻辑,所以占用的内存是蛮多的,看了看控制台,这个node进程大概占用300MB左右的内存。...在分析DOM收集数据时,也多次利用了原生的方法获取DOM属性(如果网站有jquery也可以直接用,没有的话需要外部注入,在typescript需要进行一些配置,避免报错未识别的$变量,这样就可以通过jquery

    3.4K90

    Pyppeteer:比selenium更高效的爬虫界的新神器

    使用这些框架获取HTML源码,这样我们爬取到的源代码就是JavaScript 渲染以后的真正的网页代码,数据自然就好提取了。同时,也就绕过分析 Ajax 和一些 JavaScript 逻辑的过程。...虽然也可以通过中间代理的方式进行js注入屏蔽webdriver检测,但是webdriver对浏览器的模拟操作(输入、点击等等)都会留下webdriver的标记,同样会被识别出来,要绕过这种检测,只有重新编译...现在网站或系统的开发,逐渐趋于前后端分离,这样数据的传入就需要通过接口的方式进行传输。所以Ajax、动态渲染数据采集逐渐成为常态,Pyppeteer的使用越来越多。...默认为 False •headless(bool):是否在无头模式运行浏览器。...,在浏览器退出的时候自动删除临时目录 # 在删除的时候可能删除失败(不知道为什么会出现权限问题,我用的windows) 导致浏览器退出失败 # 然后chrome进程就会一直没有退出 CPU就会狂飙到

    2.3K41

    Puppeteer:从零出发,全面掌握浏览器自动化神器

    造成这个现象的原因是 Puppeteer 会将对象序列化导致得到了不正确的结果,为了处理返回的对象,Puppeteer 提供了通过引用返回对象的方法: import puppeteer from 'puppeteer...; 启用浏览器调试:调试时会自动启动开发者工具; 打印浏览器日志:启用后可以接管浏览器意外崩溃或无法正常启动时的日志信息。...() => { const browser = await puppeteer.launch({ // 开发环境中不使用无头模式 headless: production...传统模式 示例中访问了 taobao 主页,并启用的请求拦截,请求 url 包含 .png 或 .jpg 后缀时,请求将被中止: import puppeteer from 'puppeteer';...可以用于测试 Chrome 扩展程序,但需要注意的是 headless: 'shell' 模式中不可用。

    1.2K11

    如何使用Puppeteer进行新闻网站数据抓取和聚合

    图片导语Puppeteer是一个基于Node.js的库,提供了一个高级的API来控制Chrome或Chromium浏览器。...我们可以使用puppeteer.launch方法来实现,该方法接受一个可选的配置对象作为参数,其中可以设置浏览器的各种选项,如是否显示界面、是否启用沙盒模式、是否忽略HTTPS错误等。...Puppeteer实例,并启动一个浏览器,设置headless为false表示显示界面 const browser = await puppeteer.launch({ headless: false...title: '杭州亚运倒计时200天 火炬接力将于5月15日启动', link: 'https://news.163.com/21/0829/17/GTQ1H7F60001899O.html'...', timeAndSource: '2021-08-29 17:41:00 来源:中国新闻网' }]这样,我们就成功地使用Puppeteer进行了新闻网站数据抓取和聚合。

    41720

    Puppeteer自动化的性能优化与执行速度提升

    Headless Chrome ,无头模式,浏览器的无界面形态,可以在不打开浏览器的前提下,在命令行中运行测试脚本,能够完全像真实浏览器一样完成用户所有操作,不用担心运行测试脚本时浏览器受到外界的干扰,...代码如下: const browser = await puppeteer.launch( { headless:true, args: [ ‘–disable-gpu’, // GPU...Chromium 程序能运行成千上万的 tab 页,可不可以复用Chromium 只打开一个 tab 页然后关闭?...不过这里要注意,官方并不建议这样做,因为一个 tab 页阻塞或者内存泄露导致整个浏览器阻塞并 Crash。万全的解决办法是定期重启程序,请求 1000 次或者内存超过限制后重启对应的进程。...之前想过,robot 出现未知错误时,就保存 html、js、css 等文件,特定的元素是保留下来了,但是因为特定的账号没有登录,一打开 html 文件时,是重现不了特定的场景的,补不了场景。

    6.9K20

    「nodejs + docker + github pages 」 定制自己的 「今日头条」

    那我们能不能将这些社区里我们想要的信息做一整合 定制成自己的“今日头条”?...思路 每天定时抓取 资讯的标题和链接 整合后发布到自己的网站 这样每天只要打开自己的网站就可以看到属于自己的今日头条啦~ 抓取资讯 puppeteer 定时任务 node-schedule 部署 docker...; const task = async () => { // 打开chrome浏览器 const browser = await puppeteer.launch({ // 关闭无头模式...ok~我们趁阴明站长不在的时候,来掘金"拿点"东西~ 掘金的前端热门文章是我比较关注的模块,我们来"拿"这个模块的资讯. const puppeteer = require("puppeteer");...接下来,我们只要找出文章列表对应的类名就可以对进行爬取. const puppeteer = require("puppeteer"); const task = async () => { /

    1.2K40
    领券