除此之外，开发者工具还支持控制台API。 在本文中，我会向你介绍控制台API提供的主要功能并逐一介绍如何使用它们。...通过使用控制台API，你就可以在不离开“Console”标签的前提下使用所有这些功能。 让我们从最常见的操作开始介绍：选择一个或多个DOM元素。...选择DOM元素 如果你像我一样喜爱jQuery，你一定很喜欢它那简洁实用的DOM选择功能。...与使用jQuery时不同，你甚至都不需要输入[0]来访问第一个元素： $('span.green') 关于$的斗争 选择$这个命名已经给一些开发人员造成困扰。...选择多个元素 和通过$来选择一个元素一样，控制台API还定义了一个名为$$的document.querySelectorAll的别名用来选择所有满足条件的DOM元素。
近期接触了Cypress和TestCafe，两个测试框架都基于Node.js，都不再使用Selenium+WebDriver，而且开箱即用，非常轻量级，就凭不再使用WebDriver这一点，极大地勾起了我的好奇心...启动后的Cypress界面如下： 选择项目地址，然后就可以继续选择并执行项目里面的测试脚本。...你可以将这些函数作为常规的异步函数调用，也就是说，你可以获得它们的结果并使用参数向它们传递数据。 Selector API提供方法和属性来选择页面上的元素并获取它们的状态。...例如，单击示例web页面上的Submit按钮将打开一个“谢谢”页面；要访问打开页面上的DOM元素，就必须使用Selector函数。 下面的示例演示如何访问文章标题元素并获取其实际文本。...例如，“谢谢”页面上的文章标题应该显示为用户输入的名称。要检查页面Title是否正确，必须向测试添加断言: 下面的测试演示了如何使用内置的断言，后续专题学习。
环境搭建：根据选择的编程语言，安装相应的开发环境和Selenium库。例如，使用Python可以通过pip安装selenium库。 编写测试脚本：根据学习资料和需求，编写测试脚本。...("example") # 断言 assert "Example" in driver.title # 关闭浏览器 以上示例使用了Python语言和Chrome浏览器驱动，打开了一个网页，定位了一个元素...学习资料：阅读官方文档是学习Cypress的最佳途径。官方文档提供了详细的教程和示例，涵盖了Cypress的各个方面，包括安装、使用、断言和定位元素等。...Cypress使用JavaScript编写测试脚本，可以使用Cypress提供的API进行元素定位、操作和断言等。...多语言支持：Playwright支持JavaScript、TypeScript、Python和.NET等多种编程语言，方便开发人员选择适合自己的语言进行测试脚本编写。
之前我们说过cypress其实就是一个二次开发过的chrome，而且你所写的测试是在浏览器进程中运行的，这也意味Cypress测试直接访问真实的DOM元素，而不是像webdriver一样通过json wire...protocol、通过proxy server 转换成各种浏览器driver所能识别的命令，这样来来回回会耗费很多时间，所以cypress设计之初就抛弃了 webdriver这种架构。...这是来自官方的文档，所以我们不用再像webdriver那样去封装等待方法，cypress 所有的操作都已经自带了retry功能，直到到达设置的timeout。...坑一：除了cy对象外的所有操作都是同步的 这就意味着类似以下代码你必须用promise封装，否则将会出现错误永远拿不到正确值，因为Cypress....坑三：当元素不存在或者没有找到时，测试会失败 这个坑貌似听起来很正确，但我们想一下这个场景：如果我们希望当某个元素不存在时，需要执行某个操作。但是因为以上默认的实现，没有找到元素，所以会直接报错。
安装控制台导入器插件 $i('name') 安装 npm 包 3. 重新发送 XHR 请求 我们在工作中经常需要和后端开发人员一起调试接口。使用这个功能可以提高我们的对接效率。...复制 JavaScript 变量 我们如何将复杂的数据复制到剪贴板？ 太奇妙了，您可以使用 Chrome 浏览器提供的复制功能来完成。 7....通过 Elements 面板选择 DOM 元素。 使用 $0 访问控制台中的元素。 8.捕获全尺寸屏幕截图 如果我们要对一个多屏的页面进行截图，有什么好的办法吗？...9.展开所有子节点 如何一次展开 DOM 元素的所有子节点？不是一个一个吗？ 你可以使用“元素”面板中的组合键“Alt + 单击”一次展开所有子节点。...“”和“ 使用 document.querySelector 和 document.querySelectorAll 在控制台中选择当前页面的元素是最常见的需求，但是有点太长了，我们可以使用 $ 和 $
它的选择器API可更轻松实现PageObject模式。TestCafe最近发布了1.0.x版本，进一步提升了稳定性和功能性。...还可以选择本地安装，以支持不同项目使用不同的版本： npm install --save-dev testcafe 就算没写过代码的QA同学也完全都够上手，瞧，是不是非常的惊喜。...2、远程机器打开任意浏览器，访问控制台中输出的URL即可进行测试。...Cypress目前只支持Chrome，其开发团队目前正在致力于对IE、Firefox等浏览器的支持，以满足对跨浏览器测试的支持。...再比如，我个人在使用testcafe过程中遇到了框架不稳定的问题，执行typetext()（用于在输入框中输入字符串）时，文字的后半部分输入尚未完整就继续执行下一个action，且在排除了版本匹配问题后仍不稳定出现
Log Rocket LogRocket 使你可以重播用户在你站点上所做的操作，从而帮你重现错误并更快地解决问题。 官网：https://logrocket.com/ ? Log Rocket 4....CSS Scan 让你与“检查元素”再见。它能立即检查悬停的任何元素的 CSS，并且只需要单击一下即可复制其整个规则。 官网：https://getcssscan.com/ ?...Cypress 对浏览器中运行的所有内容进行快速、轻松和可靠的测试。 官网：https://www.cypress.io/ ? Cypress 10....被 Microsoft、Google 和大量的开发测试团队所选择，Axe 是世界领先的可访问性工具包。 官网：https://www.deque.com/axe/ ? Axe 17....BEM Cheat Sheet 即使是最有经验的 CSS 开发人员，也不会总是立即找到正确的类名，这很快会使你感到绝望。
第四篇文章，来聊聊 Golang 生态中如何“遥控”浏览器，更简单、可靠的使用基于 CDP （Chrome DevTools Protocol）协议的浏览器作为容器，获取诸如微博、B 站 这类动态渲染内容信息...如果我想直接使用 Golang 调用 Chrome ，恰好 chromedp 有现成的例子，我可能会直接用 chromedp。但如果我想做一个稳定的服务，我会选择更小巧、灵活、简单的 rod。...如果你的操作系统里本身就安装了 Chrome，那么可以使用 --remote-debugging-port=9222 --headless 参数启动一个可以被 Rod 使用的 Headless 浏览器容器环境...实际使用的时候，我们还需要注意下面的细节：网页访问是否一直转圈儿没有加载完毕、网页证书是否过期导致无法访问、我们该怎么设置调试模式来观察程序执行过程，以及在前几篇文章中提到的，如何使用 JS SDK 来获取页面中的数据...-p 9222:3000 browserless/chrome 在后续的文章中，我们会继续展开这部分细节，关于如何部署和使用高可用的无头浏览器集群。
如果你想看看它是如何工作的，首先使用相关的键盘快捷键进入浏览器的控制台：contenteditable="true"``contentEditable="true" Chrome: Option + ⌘...这是我们可以使用的： javascript: document.querySelectorAll("*").forEach(element => element.style.background="rgb...类切换可用于触发外观的更改（例如替代主题或状态）甚至动画，但仅出于测试原因使用开发人员工具执行此操作时可能会有点繁琐（即网站实际上并不能正常运行）用户的方式）。...与其他小书签类似，使用此小书签可以快速切换课程并节省时间。 创建以下小书签以定位与您选择的“SELECTOR”匹配的所有元素，然后切换“CLASS”。...是否有任何过度重复的 Web 开发工作流程需要您使用 Web 浏览器有时令人尴尬的开发人员工具？如果是这样，创建自己的省时书签非常容易。请记住以javascript:!开头的 URL。
1.2 工具选择 端到端测试的工具也有不少，最为突出的是老牌 e2e 测试工具 NightWatch，根据需要安装 Selenium或其他Webdriver，优势是可以测试多类浏览器，兼容性好，而 Cypress...只要将鼠标悬停在 命令日志 上就能够清楚的了解到每一步发生了什么。 可调式能力： 你再也不需要去猜测测试为什么失败了。 调试工具 和Chrome的调试工具差不多。...环境搭建 安装非常简单： $ npm install cypress --save-dev 可以选择多种打开方式： # 1. 二进制文件可以从./node_modules/.bin中访问 $ ....使用npx $ npx cypress open # 4....属性的元素 断言： 在 Cypress 中有两种断言写法: 隐式: 使用 .should() 或者 .and()，.and() 只是 .should() 的别名，它链接多个断言使代码更易读
让你爱上console.log 先的简单介绍一下chrome的控制台，打开chrome浏览器，按f12就可以轻松的打开控制台 大家可以看到控制台里面有一首诗还有其它信息，如果想清空控制台，可以点击左上角那个...比如用上键就相当于使用上次在控制台的输入符号 2、$_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的 上面的$_需要领悟其奥义才能使用得当，而0 4则代表了最近5个你选择过的DOM...3、Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点 4、copy通过此命令可以将在控制台获取到的内容复制到剪贴板 （哈哈 刚刚从控制台复制的...$$ // 简单理解就是 document.querySelectorAll 而已。 $_ // 是上一个表达式的值 $0-$4 // 是最近5个Elements面板选中的DOM元素，待会会讲。...console.log 改变输出文字的样式 2、利用控制台输出图片 3、指定输出文字的样式 最后说一下chrome控制台一个简单的操作，如何查看页面元素，看下图就知道了 你在控制台简单操作一遍就知道了
让你爱上console.log 先的简单介绍一下chrome的控制台，打开chrome浏览器，按f12就可以轻松的打开控制台 ?...比如用上键就相当于使用上次在控制台的输入符号 2、$_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的 ?...3、Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点 ? 4、copy通过此命令可以将在控制台获取到的内容复制到剪贴板 ?...$$ // 简单理解就是 document.querySelectorAll 而已。 $_ // 是上一个表达式的值 $0-$4 // 是最近5个Elements面板选中的DOM元素，待会会讲。...2、利用控制台输出图片 ? 3、指定输出文字的样式 ? 最后说一下chrome控制台一个简单的操作，如何查看页面元素，看下图就知道了 ?
我们为什么需要移动端调试 随着移动浪潮的到来，越来越多的页面需要呈现在用户的手机上，前端的产品形态重心也慢慢从 PC 转向 mobile，就我个人来说，入职一年多，绝大多是都在开发移动端的网页（公司使用...在开发 PC 页面时，Chrome 和 Firefox 提供了很好的开发者工具（aka：控制台），其中涵盖了一个前端工程师所需要的全部工具，话虽这么说，站在我的角度上来讲，开发一般的页面，Console...和 Network 就足够了。...Chrome浏览器自带了移动设备模拟功能，所以只需点击控制台左上角那个带有手机/pad icon 的图标，即可进入移动设备模式，并且伴有主流设备的选项可供选择，几乎解决了移动端样式调试的需求。...通过对浏览器控制台的“模拟”，vConsole 实现了： 查看打印日志 查看网络请求 查看页面元素 查看 cookie 和 localStorage 在控制台执行 js 自定义插件 但是就算有了这样的工具
Chrome提供了所需的一切。跳到控制台并点击‘切换设备模式’按钮。观察窗口变化即可! 4. 如何快速找到DOM元素 在Elements面板中标记一个DOM元素，并在控制台中使用它。...Chrome控制台会保留选择历史的最后五个元素，最终选择的首个元素被标记为，第二个选择的元素为，依此类推。...格式化后的代码虽然不像真实代码那样有用，但至少可以看到发生了什么。点击 Chrome控制台中的源代码查看器中的按钮即可。 8....在控制台中快速访问元素 控制台中比更快的方法是使用美元符号，将返回CSS选择器的第一个匹配项。将返回所有匹配项。如果多次使用一个元素，可以把它保存为一个变量。 13....但是，当您调试JavaScript时，Chrome可以在DOM元素发生更改时暂停。你甚至可以监视它的属性。在Chrome控制台中，右击该元素，然后在设置中选择中断：
chrome实用插件： Chrome调试工具介绍： 快速切换文件 在源代码中搜索 在源代码中快速跳转到指定的行 使用多个插入符进行选择 设备模式 格式化凌乱的js源码 颜色选择器 改变颜色格式 强制改变元素状态...（方便查看不同状态下元素的样式） 利用chrome来查看和编辑本地文件 选择下一个匹配项 可视化的DOM阴影 奇淫技 Chrome Dev开发者选项 总结 转用Chrome，不仅仅因为它的插件之丰富...3.接着你就能像我一样愉快地不用一分钱就能访问Facebook，gmail,谷歌学术等等网站了，同时也能访问chrome商店了。...改变颜色格式 相信前端开发人员都知道，颜色有很多种表示方式，比如rgb,hsl,十六进制表示方法等。看了下面的这个图，我相信你肯定会佩服chrome的功能强大，连细节都做得那么好。...在颜色预览功能使用快捷键Shift + Click，可以在rgba、hsl和hexadecimal来回切换颜色的格式 强制改变元素状态（方便查看不同状态下元素的样式） chrome控制台有一个可以模拟
我们先在commands.js中定义，这里我们要传递的参数是一个元素选择器。这样我们就可以灵活的在页面上选择到任何一个能捕捉到的元素。...cy.waitForApiResponse(); 2.5 Cypress对象 除了以上说的这些方法外，我们还可以将一些元素和值包装成Cypress对象，这样做的作用就是让这些抽象后的对象可以在自定义命令中使用更多的...在commands.js中定义，我们使用cy.wrap()将对象包装成Cypress对象，使用自带的日志命令。...{ prevSubject: 'element' }的方法时，这里的this就像我之前说的那样，指向的是前一个命令的主体。...cypress你的自定义命令期望前一个命令的主体作为传参，一般在多个自定义命令中共享同一个元素的场景中会频繁使用到。
在下面的内容中，我们将一起一步一步学习如何理解上面的这段代码。 选择页面中所有的元素 我们需要做的第一件事情是获取页面中所有的元素，在上面的代码中，Addy使用了一个Chrome浏览器中特有的函数 。...你可以在你的Chrome浏览器控制台中输入 ('a')，然后你就能得到一个当前页面中所有锚元素的列表。...函数是许多现代浏览器命令行API中的一个部分，它等价于document.querySelectorAll,你可以将一个CSS选择器作为这个函数的参数，然后你就能够获得当前页面中所有匹配这个CSS选择器的元素列表...如果你在浏览器控制台以外的地方，你可以使用document.querySelectorAll('*')来代替 ('*')。...我们首先要学会如何使用toString函数将一个十进制的数组转换为一个十六进制整数。
用法 两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。...querySelector 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。...document.getElementById返回的便是实时结果，上面对其添加一个子元素后，再次获取所有子元素个数，已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点...浏览器报怨表示不是一个合法的选择语句。 同时，有趣的事情来了，或许你以为将冒号直接转义就解决问题了。 ? 同样，也表示非法。...理解这点后，可以来看一个更有趣的例子了。比如我们要选择类名里面含反斜杠的元素。是的，我们需要一共使用四个反斜杠！才能正常工作。 ?
jqeury demo dayjs demo 添加条件断点 通过下面的代码，希望当食物的名字是 鸡太美 时 触发断点，该如何实现呢？...使用 “$” 和 “$$” 快速选择 DOM 元素 使用 document.querySelector 和 document.querySelectorAll 在控制台中选择当前页面的元素是最常见的需求...，单词太长，我们可以使用 和 在控制台中获取选中的 DOM 元素 当你通过 Elements 面板 选择一个元素时，如果想用 JavaScript 打印它的一些属性，比如宽度、高度、位置等，可以使用...$0 访问控制台中的元素。...在控制台重新发送请求 对于同一个请求，有时需要重新发送，这时可以这样做: 1.选择 Network 面板 中的 Fetch/XHR 2.选中要重新发送的请求，Replay XHR 在控制台发送修改参数后的请求
如果你是一名 Web 开发人员，那么你肯定会花不少时间在浏览器开发工具或 Web 控制台中，审查元素、修改 CSS 或在控制台中运行命令，这些是每个 Web 开发都知道如何使用的一些基本操作，但其实上我们还可以在浏览器内完成很多其他事情...如果你像我一样想尽可能的提高效率，那么你一定需要把这些快捷键用好。多光标需要使用 CTRL+点击。 ? 多光标是很有帮助的，但不是很准确，而且当你需要选择和替换一个文本的大量出现时，有点麻烦。...对于这些情况，你可以使用更合适的CTRL+D 快捷键。 ? 在上面的 GIF 中，你可以看到如何使用 CTRL+D 来选择（也可以选择CTRL+U 来取消选择）文本，以方便修改或替换它们。...颜色选择器 为了使颜色调整更容易，我们可以使用颜色选择器，通过找到你想改变颜色的元素，然后点击它的 CSS 颜色字段来打开。...如果你想知道如何从浅色模式改为深色模式，那么可以导航到 DevTools 的右上角--点击3个竖点图标，接下来选择更多工具，然后选择设置，在设置菜单中选择首选项，最后将主题设置为暗色即可。 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
