一日一技：效率提高十倍，Puppeteer 如何启动交互模式？

在我们应用 Selenium 开发设计网络爬虫的情况下，应用 Jupyter 敲代码会相比 PyCharm 敲代码更便捷。假如应用 PyCharm 敲代码并立即运作，当某一行出错的情况下，全部程序流程就挂掉，改了编码之后务必彻底重新开始，那样会十分混日子。但假如应用 Jupyter 敲代码，那麼大家只必须再试出难题的这一行编码就可以了，不用把全部程序流程再重新启动一次。

但如果我们应用 JavaScript 实际操作 Puppeteer，应当如何完成写一行编码，运作一行编码呢?

我们知道，Node.js 的cmd自身的确是能够完成写一行程序执行一行的，如下图所显示：

但 Puppeteer 的编码 跟上边的这一段编码有点儿不一样，大家先讨论一下 Puppeteer 官方网文本文档里边，怎么写的编码：

留意，在其中有较长一段涵数是应用async申明的，它是多线程涵数。在 Node.js 的互动自然环境里边，务必把整篇涵数所有写进去，一次性运作，不可以一段一段运作。假如试着一段一段运作得话，编码便会出错，大家讨论一下：

这是由于，await关键字务必在一个多线程涵数里边应用。它不可以独立出現在最表层。这就规定大家把全部的编码都提到一个多线程涵数里边，随后运作这一多线程涵数。

但那样做，跟立即写一个.js 文档来运作有什么不同?我每一次想检测一个 XPath 句子可否一切正常运作，必须把全部编码再次跑一边。这不是浪费了互动自然环境的优点吗?

但事实上，Node.js 与 Chrome 自身就有一个非常好用的互动自然环境，但很多人很有可能并不了解。

要起动这一互动方式，事实上比较简单。大家从0开始来建立这一自然环境。

最先，大家建立一个文件夹名称test_puppeteer，随后应用 npm 或是yarn安裝puppeteer-core。应用puppeteer-core而不是puppeteer，是由于前面一种能够立即应用系统软件的 Chrome，而后面一种必须下载一个好几百 MB 的 Chromium，十分混日子。

 

  
mkdir test_puppeteer 
  
cd test_puppeteer 
  
yarn add puppeteer-core 
 

上边的指令实行进行之后，大家就可以起动这一互动自然环境了。

运行命令：

 

  
node --inspect 
 

运作实际效果如下图所显示：

如今，随意开一个 Chrome 的对话框，开启微信开发工具，如下图所显示：

大伙儿留意，在微信开发工具工具栏的左上方，图上箭头符号所偏向的部位，出現了 Node.js 的翠绿色 Logo。大家点一下一下它。

这时，会弹出来一个独立的微信开发工具对话框，如下图所显示：

这一对话框会全自动关系上大家刚刚起动的 Node.js。

如今，大家试一试立即在这个微信开发工具的 Console标签页上边写一些编码：

能够见到，在Console标签页复印出去的內容，也会在终端窗口出現。看上去，但是是以灰黑色对话框敲代码变成了在白对话框敲代码，这有什么好显摆的?

如今，大家先讨论一下你电脑的 Node.js 的版本号多少钱，假如低于14，那麼就赶快升級，使他高于或等于14。随后再度实行不久大家的指令，如下图所显示。

接下去，跟刚刚一样的流程，大家起动微信开发工具，随后试着立即启用Puppeteer，难以置信的一幕出現了：

如今大家早已能够立即应用await了!如今，在这个 Console菜单栏上边，大家就可以像在 Jupyter 里边写 JavaScript 编码了，写一行，运作一行，看一下实际效果，再写一行，再运行一行。

大家试着在这儿开启我的网站：

能够见到，我还在编码里边有意写错了一部分，应当用await browser.NewPage()可是我写的是await browser.page，造成 程序流程出错。可是没事儿。我下面再次改为恰当的就可以了。全部全过程不用重新启动电脑浏览器。你运作一行编码，它实行一行编码，编码不对，只必须改这一行再次实行就可以了。这才称为互动自然环境。

文中转载微信公众平台「未闻Code」，能够根据下列二维码关心。转截文中请联络未闻Code微信公众号。