文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Chrome开发者工具的11个高级使用技巧

在控制台中引用上一次的执行结果 我们常常需要在控制台中调试代码。比如你想知道如何在 JavaScript 中反转字符串，然后你在网络上搜索相关信息并找到以下代可行代码。...实际上，在控制台中，我们可以使用魔术变量$_引用上一次操作的结果。 ? $_是一个特殊变量，它的值始终等于控制台中上一次操作的执行结果。它可以让你更加优雅地调试代码。 ? 3....这似乎是不可能完成的任务，但是在 Chrome 浏览器中，有一个名为copy的函数可以帮助你实现这个功能。 ? 该copy函数不是由 ECMAScript 定义的，而是由 Chrome 浏览器提供的。...在控制台中引用当前选定的 DOM 元素 $0是另一个魔术变量，它会引用“元素”面板中当前选定的 DOM 元素。 ? 10....将 DOM 元素存储在全局临时变量中 如果要想在控制台中快速获取某个 DOM 元素的引用，可以执行以下操作： 选择某个元素 右键点击鼠标 存储为全局变量 ?

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

    Puppeteer 初探

    Puppeteer是一个Node库，它提供了一个高级API来通过DevTools协议控制无头 Chrome或Chromium ，它也可以配置为使用完整（非无头）Chrome或Chromium。...很早很早之前，前端就有了对 headless 浏览器的需求，最多的应用场景有两个 UI 自动化测试：摆脱手工浏览点击页面确认功能模式 爬虫：解决页面内容异步加载等问题 在Chrome headless...你可以在浏览器中手动完成的大部分事情都可以使用Puppteer完成 比如： 生成页面的屏幕截图和PDF。 抓取SPA并生成预先呈现的内容（即“SSR”）。 自动表单提交，UI测试，键盘输入等。...创建一个最新的自动化测试环境。使用最新的的JavaScript和浏览器功能，直接在最新版本的Chrome浏览器中运行测试。 捕获您网站的时间线跟踪，以帮助诊断性能问题。...iframe.evaluate() 在浏览器中执行函数，相当于在控制台中执行函数，返回一个 Promise Array.from 将类数组对象转化为对象 page.click() 点击一个元素 iframe

    3K20

    14个你可能不知道的JavaScript调试技巧

    获取函数的堆栈跟踪信息 使用JavaScript框架，会引入大量代码。 创建视图并触发事件，最后你想了解函数调用的过程。...由于JavaScript不是一个很结构化的语言, 有时候很难知道什么时候发生了什么。使用console.trace (仅仅只是在控制台中跟踪) 可以方便地调试JavaScript....在复杂的调试过程中寻找重点 在更复杂的调试中，我们有时希望输出很多行。可以做的就是保持良好输出结构，使用更多控制台函数，例如, , , , , 等等。然后，可以在控制台中快速浏览。...观察特定函数的调用及参数 在Chrome控制台中，可以观察特定的函数。每次调用该函数，就会打印出传入的参数。 输出： 这是查看传入函数参数的好方法。但是，如果控制台提示我们形参的数目就更好了。...有时使用浏览器更容易。 当你使用浏览器查看时，如果请求一个密码验证页面，不需要担心身份验证的cookie。下面看，在Firefox中如何编辑并重新发送请求。 打开控制台并切换到network选项卡。

    2.1K90

    JS 实现网页截屏五种方法

    https://segmentfault.com/a/1190000037673677 最近研究了下如何利用JavaScript实现网页截屏，包括在浏览器运行的JS，以及在后台运行的nodeJs的方法...所以screenshot方法是调用了Chrome Devtools Protocol的captureScreenshot。 总结： 支持WebGL。.../Contents/MacOS/firefox启动的是火狐默认的安装路径，因为我一开始就有火狐浏览器，所以启动的是最新版本的浏览器，然后就报错了，说不兼容。...在应用程序里面我把这个旧版本的火狐命名为Firefox59，然后这个路径就是/Applications/Firefox59.app/Contents/MacOS/firefox。...我在写例子的时候，发现的一个明显的不同就是Puppeteer截屏是异步函数，而SlimerJS截屏是同步函数？

    8.3K30

    14个你可能不知道的JavaScript调试技巧

    获取函数的堆栈跟踪信息 使用JavaScript框架，会引入大量代码。 创建视图并触发事件，最后你想了解函数调用的过程。...由于JavaScript不是一个很结构化的语言, 有时候很难知道什么时候发生了什么。使用console.trace (仅仅只是在控制台中跟踪) 可以方便地调试JavaScript....使用控制台打断点可能不太常见。在控制台中使用 debug(funcName)，当到达传入的函数时，代码将停止。 这个调试方法很快, 但缺点是不适用于私有或匿名函数。...观察特定函数的调用及参数 在Chrome控制台中，可以观察特定的函数。每次调用该函数，就会打印出传入的参数。...在控制台中快速访问元素 控制台中比 querySelector更快的方法是使用美元符号， $('css-selector')将返回CSS选择器的第一个匹配项。

    1.3K30

    爬虫工具-Playwright

    接着我们调用了 PlaywrightContextManager 对象的 chromium、firefox、webkit 属性依次创建了一个 Chromium、Firefox 以及 Webkit 浏览器实例...接着我们调用了 page 的 screenshot 方法，参数传一个文件名称，这样截图就会自动保存为该图片名称，这里名称中我们加入了 browser_type 的 name 属性，代表浏览器的类型，结果分别就是...另外我们还调用了 title 方法，该方法会返回页面的标题，即 HTML 中 title 节点中的文字，也就是选项卡上的文字，我们将该结果打印输出到控制台。...运行一下，这时候我们可以看到有三个浏览器依次启动并加载了百度这个页面，分别是 Chromium、Firefox 和 Webkit 三个浏览器，页面加载完成之后，生成截图、控制台打印结果就退出了。...加载完成之后，我们再调用 screenshot 方法获取当前页面截图，最后关闭浏览器。

    1.6K31

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

    框架介绍 Puppeteer 译为木偶，是一个 Node.js 库，内部通过 DevTools 协议提供控制 Chrome 或 Firefox 的一系列 API。...通过定义可以看出 Puppeteer 的核心在于提供用户控制浏览器行为的方法，以下是一些自动化入门示例： 自动提交表单、UI 测试、键盘输入等； 使用最新的 JavaScript 和 浏览器特性创建自动化环境...JavaScript 执行 Puppeteer 在其驱动的页面上下文中执行 JavaScript 函数。...await browser.disconnect() })() JavaScript 执行： 在 Puppeteer 驱动的页面上下文中执行 JavaScript 函数同样在入门示例中有过使用...获取元素值或 ElementHandle ： // 使用 map 函数将元素映射为 JavaScript 值，调用 wait() 将返回序列化的 JavaScript 值 const enabled =

    4.2K11

    14个你可能不知道的JavaScript调试技巧

    获取函数的堆栈跟踪信息 使用JavaScript框架，会引入大量代码。 创建视图并触发事件，最后你想了解函数调用的过程。...由于JavaScript不是一个很结构化的语言, 有时候很难知道什么时候发生了什么。使用console.trace (仅仅只是在控制台中跟踪) 可以方便地调试JavaScript....使用控制台打断点可能不太常见。在控制台中使用debug(funcName)，当到达传入的函数时，代码将停止。 这个调试方法很快, 但缺点是不适用于私有或匿名函数。...观察特定函数的调用及参数 在Chrome控制台中，可以观察特定的函数。每次调用该函数，就会打印出传入的参数。...在控制台中快速访问元素 控制台中比querySelector更快的方法是使用美元符号，$('css-selector')将返回CSS选择器的第一个匹配项。

    1.3K60

    js调试console.log使用总结图解

    2 之前在调试代码的时候,跟砸js代码执行情况,一般都是通过在代码块中使用alert的方式查看js代码的执行情况,今天也是看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log...()函数会阻断JavaScript程序的执行，从而造成副作用；而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑 一、什么是console.log()？...在具备调试功能的浏览器上，window对象中会注册一个名为console的成员变量，指代调试工具中的控制台。通过调用该console对象的log()函数，可以在控制台中打印信息。...console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。...不同的浏览器中console.log()行为可能会有所不同， 二、兼容没有调试控制台的浏览器 对于缺少调试控制台的老版本浏览器，window中的console对象并不存在，因此直接使用console.log

    2.3K20

    Playwright 简明入门教程：录制自动化测试用例，结合 Docker 使用

    ，因为现在我们只有软件基础框架，并没有要进行测试的浏览器环境（Chrome、Firefox 等等），所以我们还要进行浏览器环境下载。...当我们关闭测试使用的浏览器窗口之后，录制代码将自动保存在我们的文件夹中。...，是因为我们在录制的时候，可能选择到了因为一些特殊条件才会出现的元素路径，或者浏览器中的 JavaScript 随机生成的 HTML Elements 标识（ID、Class 等等）。...图片 在完成选择之后，我们可以通过在浏览器控制台通过执行下面的代码，来验证查找定位的元素是否和我们预期中的一样（相同且唯一）： Array.from(document.querySelectorAll(...如果我们将需要测试的应用的交互功能都进行录制，并且在代码提交的时候、版本发布的时候调用 Playwright 进行测试用例的执行，只把运行结果发送给我们，随着测试测试次数的积累，那么将能节省非常多不必要的

    3.6K70

    0202年了, Chrome DevTools 你还只会console.log吗 ?

    DevTools 使开发者更加深入的了解浏览器内部以及他们编写的应用。通过使用 DevTools,可以更加高效的定位页面布局问题,设置 JavaScript 断点并且更好的理解代码优化。...控制台中直接访问页面元素 在元素面板选择一个元素,然后在控制台输入 $0,就会在控制台中得到刚才选中的元素。如果页面中已经包含了 jQuery,你也可以使用 $($0)来进行选择。...函数监听器 monitor(function)/unmonitor(function) monitor(function),当调用指定的函数时,会将一条消息记录到控制台,该消息指示调用时传递给该函数的函数名和参数...分析程序性能 在 DevTools 窗口控制台中，调用 console.profile()开启一个 JavaScript CPU 分析器.结束分析器直接调用 console.profileEnd()....在 JavaScript 脚本中调用 console.clear()。 使用快捷键 Cmd + K (Mac) Ctrl + L (Windows and Linux)。 ? clear 15.

    1.5K20

    1000个项目中前10名的JavaScript错误介绍

    当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试（尝试）。...TypeError: Object doesn’t support property 这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。...通常，如果您在 Rollbar 命名空间内，则可以使用以下语法调用isAwesome方法： Javascript代码 this.isAwesome(); Chrome，Firefox 和 Opera...您可以在 Chrome 开发人员控制台和 Mozilla Firefox 开发人员控制台中进行测试。...您可以在 Chrome 开发者控制台中进行测试。 ? 此外，如果您将值传递给超出范围的函数，也可能会发生这种情况。 许多函数只接受其输入值的特定范围的数字。

    8.8K10

    分享一些Chrome开发工具的用法

    控制台中直接访问页面元素 在元素面板选择一个元素,然后在控制台输入$0,就会在控制台中得到刚才选中的元素。如果页面中已经包含了 jQuery,你也可以使用$($0)来进行选择。...函数监听器 monitor(function)/unmonitor(function) monitor(function),当调用指定的函数时,会将一条消息记录到控制台,该消息指示调用时传递给该函数的函数名和参数...分析程序性能 在 DevTools 窗口控制台中，调用 console.profile()开启一个 JavaScript CPU 分析器.结束分析器直接调用 console.profileEnd()....在 JavaScript 脚本中调用 console.clear()。 使用快捷键 Cmd + K (Mac) Ctrl + L (Windows and Linux)。 ? clear 15....await 16. debugger 断点 有时候我们需要打断点进行单步调试,一般会选择在浏览器控制台直接打断点,但这样还需要先去 Sources 里面找到源码,然后再找到需要打断点的那行代码,比较麻烦

    1.2K20

    几个非常实用的 Chrome Devtools 技巧

    前言 关于 Chrome 浏览器，如果你是一名前端开发者，相信对此并不陌生，我们可以用它来查看 网络请求、分析网页性能、调试 JavaScript 功能 等。...正文 控制台导入器 有时候想用某些库的 API，但又懒得去官网查，可以直接在控制台尝试。 要先安装 Console Importer，否则会报如下错误： 安装插件后，重启浏览器即可体验效果。...使用 “$” 和 “$$” 快速选择 DOM 元素 使用 document.querySelector 和 document.querySelectorAll 在控制台中选择当前页面的元素是最常见的需求...，单词太长，我们可以使用 和 在控制台中获取选中的 DOM 元素 当你通过 Elements 面板 选择一个元素时，如果想用 JavaScript 打印它的一些属性，比如宽度、高度、位置等，可以使用...$0 访问控制台中的元素。

    77510

    10 种 JavaScript 最常见的错误

    当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试。 ?...5、 TypeError: Object doesn’t support property 这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。 ?...通常，如果您在 Rollbar 命名空间内，则可以使用以下语法调用 isAwesome 方法： this.isAwesome(); Chrome，Firefox 和 Opera 会欣然接受这个语法。...您可以在 Chrome 开发人员控制台和 Mozilla Firefox 开发人员控制台中进行测试。 ?...原因应该是清楚的，即执行上下文不理解导致的指向错误。 7、 Uncaught RangeError 当你调用一个不终止的递归函数就会发生这种错误。您可以在 Chrome 开发者控制台中进行测试。 ?

    11.7K20

    10 种最常见的 Javascript 错误

    当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试（尝试）。 ?...TypeError: Object doesn’t support property 这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。 ?...通常，如果您在 Rollbar 命名空间内，则可以使用以下语法调用isAwesome方法： this.isAwesome(); Chrome，Firefox 和 Opera 会欣然接受这个语法。...您可以在 Chrome 开发人员控制台和 Mozilla Firefox 开发人员控制台中进行测试。 ?...您可以在 Chrome 开发者控制台中进行测试。 ? 此外，如果您将值传递给超出范围的函数，也可能会发生这种情况。 许多函数只接受其输入值的特定范围的数字。

    9.5K80

    Puppeteer MCP Server：赋能大模型的网页交互能力

    例如使用AI大模型调用天气工具、自动浏览网页、数据爬虫等。...puppeteer_select：选择带有 SELECT 标签的元素。 puppeteer_evaluate：在浏览器控制台中执行 JavaScript。...应用 配置完成后，您可以在 Cursor 中通过 Agent 模式调用上述工具，实现对网页的自动化操作。例如： 使用 puppeteer_navigate 工具导航到指定的网页。...我要求打开腾讯云开发者社区，Puppeteer mcp server 搜索到了网址，并在浏览器中打开了这个页面。 使用 puppeteer_screenshot 工具截取网页的屏幕截图。...使用 puppeteer_fill 工具填写表单中的输入字段。 使用 puppeteer_evaluate 工具在浏览器中执行自定义的 JavaScript 代码。

    1.3K50

    Puppeteer 入门指引

    的内容 UI 自动化测试、自动填充/提交表单、模拟 UI 输入 测试最新的 Javascript 和 Chrome 功能 性能测试，生成 timeline trace 用于定位网站性能问题 测试 Chrome...的插件 当然，puppeteer 也不是全能的，比如在跨浏览器兼容方面就有所欠缺，目前只对 Firefox 做了实验性的支持，所以要对网站做浏览器兼容性测试还是得选择 Selenium/WebDriver...监听浏览器控制台中的输出 page.on("console", (msg) => console.log("PAGE LOG:", msg.text())); await page.evaluate(...在浏览器执行代码中使用 debugger 目前有两种执行上下文：运行测试代码的 node.js 上下文和运行被测试代码的浏览器上下文，我们可以使用 page.evaluate() 在浏览器上下文中插入...screenshot.js Windows 下面可以使用cross-env npx cross-env DEBUG=puppeteer:* node screenshot.js 协议流量可能相当复杂，

    2K50

    Sentry 开发者贡献指南 - 浏览器 SDK 集成测试

    目录 结构 编写测试 Helpers Fixtures 在本地运行测试 故障排除 实战 安装依赖 Playwright 运行集成测试 更多 Sentry 的浏览器 SDK 的集成测试在内部使用 Playwright...这些测试在 Chromium、Firefox 和 Webkit 的最新稳定版本上运行。...[可选案例特定 subject] |---- test.ts [断言] 编写测试 Helpers utils/helpers.ts 包含可以在断言中使用的 helper（test.ts...这些 helper 定义了一个方便可靠的 API 来与 Playwright 的原生 API 进行交互。强烈建议在 helper 中定义所有常见的 Playwright 使用模式。...https://playwright.dev/docs/api/class-fixtures 在本地运行测试 可以使用最新版本的 Chromium 在本地运行测试： yarn test 要使用不同的浏览器

    88960
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券