手动下载Chrome并解决puppeteer无法使用问题


Posted in Javascript onNovember 12, 2018

因为网络原因,国内安装 puppeteer 的时候会报网络超时。这里使用 puppeteer-core 之后使用手动下载的 Chrome 进行操作。思路很简单,安装一个不带浏览器的 puppeteer ,再使用的时候将浏览器地址指向一个可执行的 Chrome 浏览器文件。

安装

安装 puppeteer-core

yarn add puppeteer-core

找到 puppeteer 中对应的浏览器并下载

node_modules/puppeteer-core/lib/BrowserFetcher.js 中找到各平台 Chrome 下载地址。其中 %s 替换为 DEFAULT_DOWNLOAD_HOST 的值, %d 替换为版本号。

手动下载Chrome并解决puppeteer无法使用问题

node_modules/puppeteer-core/packages.json 中找到版本号

手动下载Chrome并解决puppeteer无法使用问题

替换后得到下载地址

https://storage.googleapis.com/chromium-browser-snapshots/Mac/579032/chrome-mac.zip

下载后解压,放在项目目录中,这里我放在 chrome 下。

使用

这样就可以使用了。

使用代码

const puppeteer = require('puppeteer-core');
const path = require('path');

(async () => {
 const browser = await puppeteer.launch({
  // 这里注意路径指向可执行的浏览器。
  // 各平台路径可以在 node_modules/puppeteer-core/lib/BrowserFetcher.js 中找到
  // Mac 为 '下载文件解压路径/Chromium.app/Contents/MacOS/Chromium'
  // Linux 为 '下载文件解压路径/chrome'
  // Windows 为 '下载文件解压路径/chrome.exe'
  executablePath: path.resolve('./chrome/Chromium.app/Contents/MacOS/Chromium')
 });
 const page = await browser.newPage();
 await page.setViewport({
  width: 375,
  height: 667,
  deviceScaleFactor: 1,
  isMobile: true
 })
 await page.goto('https://marxjiao.com/');
 await page.screenshot({path: 'marx-blog.png'});
 await browser.close();
})();

执行文件

node index.js

执行后可看到,图片已经截图出来了

手动下载Chrome并解决puppeteer无法使用问题

代码地址:https://github.com/MarxJiao/puppeteer-test

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
vue elementui form表单验证的实现
Nov 11 #Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 #Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 #Javascript
Vue项目引进ElementUI组件的方法
Nov 11 #Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 #Javascript
vue组件从开发到发布的实现步骤
Nov 11 #Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 #Javascript
You might like
PHP 防恶意刷新实现代码
2010/05/16 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
详解python3百度指数抓取实例
2016/12/12 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python爬取微信公众号文章
2018/08/31 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
入党申请人的自我鉴定
2013/12/01 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
表彰大会策划方案
2014/05/13 职场文书
业务员岗位职责
2015/02/03 职场文书
学校教代会开幕词
2016/03/04 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript