文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

框架介绍 Puppeteer 译为木偶，是一个 Node.js 库，内部通过 DevTools 协议提供控制 Chrome 或 Firefox 的一系列 API。...puppeteer； 提供合理的默认选项； puppeteer-core 是通过 DevTools 协议提供编程接口驱动的核心库： 安装期间不会下载 Chrome for Testing 及 chrome-headless-shell...浏览器管理： 在入门示例中已经使用过了启动和关闭浏览器的 API，这里主要了解一下浏览器上下文（包含权限）和如何连接到正在运行的浏览器两部分。...node --inspect-brk index.mjs" // v7.24.2 + 在 Chrome 或 Chromium 中打开 chrome://inspect/#devices ，在新页面中的...在新打开的浏览器中，按 F8 可以恢复测试执行； 添加的 debugger; 关键字也会被命中并中断程序执行； 记录 DevTools 协议流量： 以上的调试方法都不起作用时，则可能是 Puppeteer

2.1K11
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    前端开发必备之Chrome开发者工具（上篇）

    Chrome 中的Web开发和调试工具，可用来对网站进行迭代、调试和分析 打开 Chrome 开发者工具的方式有： 在Chrome菜单中选择 更多工具 > 开发者工具 在页面元素上右键点击，选择 “检查...在 Elements 面板中选择元素，然后在 Styles 窗格中点击 :hov 按钮，使用复选框启用或停用当前选定元素的选择器 ?...会自动解析事件代码的框架或内容库封装部分，然后告诉您实际将事件绑定到代码中的位置 控制台面板（Console） 在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell 在页面上与 JavaScript...控制台默认设置为 top 环境，除非您通过检查其他环境中的某个元素来访问 DevTools。...当然你也可以在代码中使用 debugger 来设置代码行断点，效果和在 DevTools 中设置是一样的： console.log('a'); console.log('b'); debugger; console.log

    8.4K111

    你不知道的 Chrome DevTools 玩法

    ‍ ‍笔者在前段时间的开发时，需要通过 Chrome DevTools来分析一个接口，调试中发现了控制台中的 copy 函数，非常的好用，进而发现了新世界，学习到了 Chrome 一些奇怪的调试技巧，这里总结分享给大家...扩展网格线：默认情况下，网格线仅显示在带有display: grid或display: inline-grid设置在其上的元素内部；当打开此选项时，网格线沿每个轴延伸到视口的边缘。...在最下方的区域里，可以修改选定的动画。 在使用动画组捕捉动画后，我们可以进行慢速播放，重播动画。...完结撒花 本次介绍的功能多是一些笔者认为实用的功能，比如各种命令行函数，又或者是 Chrome 的新特性，比如 flex && grid 的调试功能，这些功能在开发中若是处置得当，能够很好的提升开发效率...，当然还有很多很多调试功能没有介绍，毕竟如何利用好 DevTools 也是一门很深的学问，这些特性就留在日后开发中挖掘再来补坑吧。

    97330

    你不知道的 Chrome DevTools 玩法

    ‍笔者在前段时间的开发时，需要通过 Chrome DevTools来分析一个接口，调试中发现了控制台中的 copy 函数，非常的好用，进而发现了新世界，学习到了 Chrome 一些奇怪的调试技巧，这里总结分享给大家...扩展网格线：默认情况下，网格线仅显示在带有display: grid或display: inline-grid设置在其上的元素内部；当打开此选项时，网格线沿每个轴延伸到视口的边缘。...目前在 Chrome 91 版本来看，调试 flex 的功能是要更多一些的，喜欢 grid 的不要担心，在92版本会同步两者的功能！...在最下方的区域里，可以修改选定的动画。 在使用动画组捕捉动画后，我们可以进行慢速播放，重播动画。...，当然还有很多很多调试功能没有介绍，毕竟如何利用好 DevTools 也是一门很深的学问，这些特性就留在日后开发中挖掘再来补坑吧。

    1.9K20

    JavaScript调试和优化，深入研究谷歌Chrome浏览器开发工具（二）

    函数的完整调用堆栈显示在控制台中，带有代码文件名和行号，您可以单击它们导航到源代码中相应的行。 值得一提的是，console.trace()也可以与DevTools Snippets工具一起使用。...它结合了旧的时间线和JavaScript CPU Profiler，它仍然存在，但是隐藏在更多的工具中——在它将从未来版本的Chrome中移除之前。...从定义中，您可以看到帧速率是一个与拍摄和计算机图形有关的概念，但它也被用于现代性能工具，如Chrome DevTools，以度量页面对用户交互的响应性。...Lighthouse设置DevTools来模拟移动设备，对页面运行一系列测试，然后在审计面板中显示结果。然后，您可以将报告可视化或下载它。 ?...在本文中，我们介绍了Chrome DevTools，特别是控制台面板、API和性能相关工具。

    2.7K40

    Chrome 安全策略 - 私有网络控制（CORS-RFC1918）

    从非安全环境要求到私有网络请求已被弃用 在私有网络访问规范中，只有当启动上下文是安全的时，才允许从公共网站向私有网络的请求。...如果文档以及其所有父级文档的内容都是是 HTTPS 协议，并且没有混合的内容，则该文档被认为是安全的。 因此，在 Chrome 90 中，从非安全上下文发起的对私有网络的请求被正式标记为已弃用。...通过设置上报端点，网站可以指示浏览器将报告发送到指定服务端。 弃用报告是 Reporting API 支持的报告类型之一。这使网站可以在使用不推荐使用的功能时接收报告。...DevTools 警告 从非安全上下文发起私有网络请求时，Chrome 在控制台中打印弃用警告： 从非安全上下文发起请求时， DevTools问题 面板中会显示一个问题： Chrome 92 将直接弃用...从 Chrome 92 开始，Chrome 将直接阻止从非安全上下文发起的私有网络请求，并且将在 DevTools 控制台中记录一条 TypeError 错误。

    6K40

    Puppeteer 入门指引

    Puppeteer 是什么 Puppeteer 是一个 Node library，提供了一套完整的通过 DevTools 协议操纵 Chrome 或 Chromium 的 API。...熟悉爬虫或者 UI 自动化的同学可能会联想到 PhantomJS、CasperJS 或者 Selenium，而作为 Chrome DevTools 团队亲自出品和维护的 puppeteer 不管是在功能的完整性...示例 4 - 自动填充表单并提交（在 https://developers.google.com 页面搜索框中输入关键词 Headless Chrome 并搜索） 创建 search.js const...在浏览器执行代码中使用 debugger 目前有两种执行上下文：运行测试代码的 node.js 上下文和运行被测试代码的浏览器上下文，我们可以使用 page.evaluate() 在浏览器上下文中插入...debugger 进行调试： 首先在启动 puppeteer 的时候设置 {devtools: true}： 然后在 evaluate() 的执行代码中插入 debugger，这样 Chromium 在执行到这一步的时候会停止

    1.7K50

    JavaScript调试和优化，深入研究谷歌Chrome浏览器开发工具（一）

    Chrome DevTools集成了许多子工具，用于在客户端上调试web应用程序，比如记录性能配置文件和检查动画——主要是通过DevTools控制台来学习web开发。...怎么打开Chrome的开发工具窗口： 在页面任意位置，单击鼠标右键，选择上下文菜单“检查”，英文版叫（Inspect ） 在windows/Linux系统上使用键盘快捷键Ctrl + Shift + I...控制台可以全屏幕面板打开，也可以在任何其他DevTools面板旁边打开，在DevTools打开并有焦点的时候按下Escape。 ?...在使用浏览器的控制台时，如果您想输入多行表达式，您需要使用Shift + enter，因为只要enter就会在此时执行输入行中的内容。...可以在刷新或更改页面之间保存日志(通过启用“保留日志”复选框)，直到清除控制台或关闭选项卡为止。 ? 您可以通过右键单击控制台并选择save as…来保存控制台中的历史记录，然后选择日志文件的位置。

    87950

    分享 10 个你可能不知道的 Devtools 技巧！

    编辑并重新发送网络请求 在 Web 开发中，我们可能要频繁调试网页上的请求，可能我们需要改动一个很小的参数，然后被迫重启一遍项目或者等待热更新，其实使用 Devtools 的重新发送请求的功能会很方便。...Edge 和 Firefox 的 Devtools 都提供了编辑并重新发送网络请求的功能（Chrome 在最近的版本中也在尝试提供类似的能力，不过只能覆盖 Header ，体验并不是很好） 比如，在 Edge...切换 Devtoos 语言 一般情况下 Devtools 都会继承操作系统当前选择的默认语言，但是 Devtoos 上的翻译有时候真的挺别扭的，在 Safari 、 Chrome 或 Edge 中，我们都可以在...Devtoos 的设置中随意切换目标语言，如果你也觉得翻译过来的中文比较别扭，还是建议直接使用英文版 但是，在 Firefox 中，DevTools 始终会与浏览器的语言匹配，所以如果你想使用法语版的...测量网页上的任意距离 有时候可能我们希望快速测量网页上某个区域的大小或两个物体之间的距离。当然，我们可以直接使用 DevTools 来获取任何选定元素的大小。

    57310

    前端工程师生产环境 debugger 技巧

    F12 打开 devTools； 第二步，把大象装进冰箱。找到需要 debug 的前端文件，格式化，打断点，调试上下文，定位问题； 第三步，关闭冰箱门。解决问题。...提示信息在 coding 过程中一般是使用 字符串，压缩混淆过程中一般是不会进行处理的，会保留原文，当然代码打包构建过程中，对代码压缩混淆也可以选择对中文进行 unicode 转码，此时如果关键字是中文...(2) 已知相关代码中存在的编译混淆后依然还保留的的关键代码，会向外暴露的方法名； 如何 debug 混淆后的 js ？...开发环境中，我们可以直接在 IDE 中修改代码，代码的变更就直接更新到了浏览器中了。那么生产环境，我们可以直接在 chrome 中修改代码，然后立马看代码修改后的效果吗？...当然，你想要的 chrome devTools 都有。chrome devTools 提供了 local overrides 能力。 local overrides 如何工作的？

    1.4K40

    急速 debug 实战一（浏览器-基础篇）

    条件代码行 在确切的代码区域中，且仅当其他一些条件成立时。 DOM 在更改或移除特定 DOM 节点或其子级的代码中。 XHR 当 XHR 网址包含字符串模式时。...DevTools 始终会在执行此代码行之前暂停。 在 DevTools 中设置代码行断点： 点击 Sources 标签。 打开包含您想要中断的代码行的文件。 转至代码行。 代码行的左侧是行号列。...代码中的代码行断点 在代码中调用 debugger 可在该行暂停。 此操作相当于使用代码行断点，只是此断点是在代码中设置，而不是在 DevTools 界面中设置。...您可以将 debug() 插入您的代码（如 console.log() 语句），也可以从 DevTools 控制台中进行调用。debug() 相当于在第一行函数中设置代码行断点。...如果是从 DevTools 控制台中调用 debug()，则很难确保目标函数在范围内。 下面介绍一个策略： 在函数在范围内时设置代码行断点。 触发此断点。

    3.4K10

    在 Chrome DevTools 中调试 JavaScript

    函数断点 由浅入深说一说怎么样在 Chrome DevTools 中调试 JavaScript。 一、案发现场 为了方便理解，我写了一个小demo。...在完成此设置后，DevTools 会忽略您已设置的任何断点。 ? 点击num1+num2按钮，则会看见正确的结果啦！...六、介绍其他几种断点 断点类型 使用场景 代码行 在确切的代码区域中 条件代码行 在确切的代码区域中，且仅当其他一些条件成立时 DOM 在更改或移除特定 DOM 节点或其子级的代码中 XHR 当 XHR...debugger 在代码中调用 debugger 可在该行暂停。 此操作相当于使用代码行断点，只是此断点是在代码中设置，而不是在 DevTools 界面中设置。...您可以将 debug() 插入您的代码（如 console.log() 语句），也可以从 DevTools 控制台中进行调用。 debug() 相当于在第一行函数中设置代码行断点。

    5.1K20

    你会在浏览器中打断点吗？我会！

    在chrome/chromium的内核中，其中有很多C/C++的代码。我们可以在chromium 在线仓库[2]进行查询。...keyup', 'keydown']); 然后，我们还可以在控制台的Element中直接选中元素，然后在Console中输入对应的指令 在特定元素触发对应的事件后，在控制台就会打印除对应的Event的信息...其实这是chrome-devtool的一种内置变量。在Elements选中一个元素时，我们就可以在Console中查询对应的元素引用。...设置 DevTools 中的代码行断点： 点击Sources选项卡 打开想要设置断点的文件 我们可以在Sources的左侧文件目录中进行搜索 如果想调试的文件层级过于深，我们可以使用⌘ P的快捷键，通过文件名来搜索...一个带有「两个点的粉色图标」出现在行号列的顶部。 这个示例展示了在第 9 行设置的「日志代码行断点」，将变量i的值输出到控制台。

    61110

    控制台禁用js_禁止直接访问js

    因为我们不知道浏览器是否开启了工具条及工具条的宽高，所以我们设置一个阈值如200，如果outer – inner 大于200，我们就认为开启了控制台。...3、利用控制台特性改写对象toString 对于一些浏览器，如果控制台输出的是对象，则保留对象的引用，每次打开控制台的时候，如果对象类型是function、date等(以前还有regexp，现在已失效)...、console.error等均有效 5)、只在chrome内核浏览器有效，firefox、ie失效 var devtools = new Date(); //function(){}; devtools.toString...代码测试仅测试了firefox、ie、chrome浏览器及部分chrome内核浏览器(如360、qq浏览器、UC浏览器、搜狗浏览器) 5、利用debugger的特性，无限递归 这个方法不能监测控制台被打开...Firefox：页面直接卡死 从上面的测试结果来看，我们可以设置一个间隔2000ms的定时器来不断执行check，这样当控制台开启时，不论是否取消debugger调式，都会使页面卡住。

    9.8K20

    【干货】Chrome插件(扩展)开发全攻略

    在权限上，它和background非常类似，它们之间最大的不同是生命周期的不同，popup中可以直接通过chrome.extension.getBackgroundPage()获取background的...这是因为content-script有一个很大的“缺陷”，也就是无法访问页面中的JS，虽然它可以操作DOM，但是DOM却不能调用它，也就是无法在DOM中通过绑定事件的方式调用content-script...意思就是你想要在web中直接访问插件中的资源的话必须显示声明才行，配置文件中增加如下： { // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的 "web_accessible_resources...// 显示的文字，除非为“separator”类型否则此参数必需，如果类型为“selection”，可以使用%s显示选定的文本 contexts: ['page'], // 上下文环境，可选：["all...是针对插件全局的，即使你在background中保存的数据，在content-script也能获取到； chrome.storage.sync可以跟随当前登录用户自动同步，这台电脑修改的设置会自动同步到其它电脑

    11.9K40

    2024年必备：每个前端开发者都应掌握的Chrome开发工具调试技巧

    在Chrome中，profile 和 profileEnd 函数分别用于启动和停止DevTools的性能分析器。...Chrome控制台也提供了一些快捷方式来设置断点。...虽然DevTools提供了多种检测浏览器事件的方法，比如设置事件断点和查看绑定在window对象上的全局事件，但如果你想直接从控制台检测和浏览Web应用事件，应该怎么做呢？...但如果我们想知道特定事件何时被触发，又不使用DevTools GUI中基于GUI的事件监听器断点功能，该怎么办呢？...我们介绍了如何有效利用Chrome DevTools的各种功能来调试Web应用，包括使用JQuery风格的选择器快速选取DOM元素、利用简洁的控制台API快捷方式进行日志记录、监控函数调用以及处理事件。

    60010

    JavaScript 开发者需要了解的15个 DevTools 技巧

    使用隐身模式 隐身模式或私有模式会使用单独的用户配置文件，在浏览器重新启动之后不会保留 Cookie，localStorage或缓存文件之类的数据。...自动启动DevTools 在开发的时候，一般都要需要启动浏览器，打开 DevTools ，并打开我们开发的 URL 。我们可以在浏览器启动命令中添加一些配置，整个过程可以在一次点击中实现自动化。...这可以帮助你确定性能瓶颈的原因： ? 7. 过滤网络请求 DevTools 的 Network 面板提供了几个过滤器，其中包括一个仅显示 JavaScript 请求的 JS 按钮。...在 Chrome DevTools Sources 面板中，打开一个文件，右键单击代码中的某个位置，然后选择添加脚本以忽略列表。...Chrome 可以在 DevTools 中模拟设备硬件 - 从 More tools 菜单中选择 Sensors ： ? 有几个选项： 选择一个主要城市或输入自定义的纬度和经度。

    4.9K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券