首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在单独的窗口(分离的)上自动打开带有chrome窗口和devtools的木偶?

在单独的窗口上自动打开带有Chrome窗口和DevTools的木偶,可以通过编写脚本来实现。以下是一个示例脚本,可以使用Python编写并使用Selenium库来控制Chrome浏览器:

代码语言:txt
复制
from selenium import webdriver
from selenium.webdriver.chrome.options import Options

# 创建Chrome浏览器选项对象
chrome_options = Options()

# 设置Chrome浏览器以无界面模式运行
chrome_options.add_argument("--headless")

# 启动Chrome浏览器,并设置选项
driver = webdriver.Chrome(chrome_options=chrome_options)

# 打开新窗口
driver.execute_script("window.open()")

# 切换到新窗口
driver.switch_to.window(driver.window_handles[1])

# 打开DevTools
driver.execute_script("window.open('chrome://devtools')")

# 切换回原始窗口
driver.switch_to.window(driver.window_handles[0])

# 在原始窗口中打开木偶网页
driver.get("https://www.puppet.com/")

# 关闭浏览器
driver.quit()

这个脚本使用Selenium库来控制Chrome浏览器,并通过Chrome选项设置实现无界面模式运行。首先,它创建了一个Chrome选项对象,并添加了--headless参数来启动无界面模式。然后,它启动了Chrome浏览器,并设置了选项。接下来,它使用window.open()命令在新窗口中打开了一个空白页面。然后,它切换到新窗口,并使用window.open('chrome://devtools')命令打开了DevTools。然后,它切换回原始窗口,并使用driver.get()方法在原始窗口中打开了木偶网页。最后,它关闭了浏览器。

请注意,这个示例脚本使用的是Python和Selenium库,你可以根据自己的需求选择其他编程语言和相应的库来实现相同的功能。此外,这个脚本只是一个示例,你可以根据自己的需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

自动启动DevTools 在开发时候,一般都要需要启动浏览器,打开 DevTools ,并打开我们开发 URL 。我们可以在浏览器启动命令中添加一些配置,整个过程可以在一次点击中实现自动化。...在 Chrome DevTools Sources 面板中,打开一个文件,右键单击代码中某个位置,然后选择添加脚本以忽略列表。...启用本地文件替代 Chrome 允许任何 HTTP 请求使用你设备本地文件,而不是通过网络获取它。...在本地PC创建一个目录,在该目录中将存储替代文件,例如 localfiles ,然后打开 Chrome DevTools Sources 面板。...文件图标显示为带有紫色覆盖指示符: ? 它还将显示在 Overrides 选项卡 localfiles 目录中。

4.8K20

【译】一文洞察 Chrome DevTools 近半年新增了哪些功能

DevToolsChrome 74)新增功能 高亮显示所有受 CSS 属性影响节点 将鼠标悬停在会影响节点盒子模型 CSS 属性 padding 或 margin ,会高亮显示受到这个属性声明影响所有节点...DevToolsChrome 75)新增功能 CSS 函数自动补全有意义预设值 某些 CSS 属性(filter)值是函数。...当自动补全, filter 属性时,DevTools自动补全有意义值,可以很方便预览这个值将在节点上进行更改效果。 ?...老版本自动补全,DevTools 自动补全属性为 filter: blur ,在窗口中看不到任何更改。 ?...新自动补全,DevTools 自动补全属性为 filter: blur(1px),可以在窗口中看见改变效果。

1.6K30

【译】一文洞察 Chrome DevTools 近半年新增了哪些功能

DevToolsChrome 74)新增功能 高亮显示所有受 CSS 属性影响节点 将鼠标悬停在会影响节点盒子模型 CSS 属性 padding 或 margin ,会高亮显示受到这个属性声明影响所有节点...DevToolsChrome 75)新增功能 CSS 函数自动补全有意义预设值 某些 CSS 属性(filter)值是函数。...当自动补全, filter 属性时,DevTools自动补全有意义值,可以很方便预览这个值将在节点上进行更改效果。 ?...老版本自动补全,DevTools 自动补全属性为 filter: blur ,在窗口中看不到任何更改。 ?...新自动补全,DevTools 自动补全属性为 filter: blur(1px),可以在窗口中看见改变效果。

2K20

在 ts + Jest 单元测试中 debugging

温馨提示:因微信中外链都无法点击,请通过文末 “阅读原文” 到技术博客中完整查阅版; 本文简要介绍了如何在 Jest 单元测试中利用 Chrome Node DevTools 来辅助调试 1、背景 代码是...Chrome Node DevTools 刚开始我用 VSCode Debugger 功能,在 TS 源码进行 debugger 时候,发现在源码打断点无法准确定位: ?...这将作为断点 打开 Chrome 并输入地址栏:chrome://inspect, 点击 Open dedicated DevTools for Node会弹出一个单独 devtools 窗口,前端同学最熟悉不过了...弹出一个单独 devtools 窗口 执行命令 node --inspect node_modules/.bin/jest --runInBand --runInBand 选项,表示仅在当前进程中连续运行所有测试...Jest:简要总结了用 Chrome 调试 VSCode 调试,本文所用 Chrome 调试 就是通过这篇文章学会 debugging-jest-tests:微软官方仓库中给出 VScode 中

4K30

Selenium - 用这个力量做任何你想做事情

Chrome DevTools 简介 Chrome DevTools 是一组直接内置在基于 Chromium 浏览器( Chrome、Opera Microsoft Edge)中工具,用于帮助开发人员调试研究网站...借助 Chrome DevTools,开发人员可以更深入地访问网站,并能够: 检查 DOM 中元素 即时编辑元素 CSS 检查监控网站性能 模拟用户地理位置 模拟更快/更慢网络速度 执行调试...JavaScript 查看控制台日志 等等 Selenium 4 Chrome DevTools API Selenium 是支持 web 浏览器自动一系列工具综合项目。...它不使用包装 API,而是允许您直接传入 Chrome DevTools 命令该命令参数。...关于这个命令信息可以在文档中找到。 让我们看看如何在 Selenium 4 Chrome DevTools API 中完成这个过程。

17410

玩转 Chrome DevTools,定制自己调试工具

之前讲过,Chrome DevTools Chrome分离架构,两者之间通过 WebSocket 通信,通信协议是 Chrome DevTools Protocol,简称 CDP: 其实这不准确...我们找个网络相关: 可能你看到这些协议也不知道怎么用,这时候可以先打开 Chrome DevTools Protocol Monitor 面板,找个网页测试下: 看看 NetWork 部分都是怎么通过...跨端引擎就是通过前端技术来描述界面(比如也是通过 DOM),实际用安卓 IOS 原生组件来做渲染。...小程序引擎调试工具更简单,因为它实际渲染是用网页,有 CDP backend,可以直接 frontend 对接,不用自己实现 CDP 交互。...所以说,小程序调试工具实现起来还是很简单,不但 CDP 交互不用自己实现,而且一个窗口渲染,一个窗口显示Chrome DevTools frontend 这种功能 electron 都已经提供了。

3.6K30

Selenium 自动化 | 可以做任何你想做事情!

Chrome DevTools 简介 Chrome DevTools 是一组直接内置在基于 Chromium 浏览器( Chrome、Opera Microsoft Edge)中工具,用于帮助开发人员调试研究网站...借助 Chrome DevTools,开发人员可以更深入地访问网站,并能够: 检查 DOM 中元素 即时编辑元素 CSS 检查监控网站性能 模拟用户地理位置 模拟更快/更慢网络速度 执行调试...JavaScript 查看控制台日志 等等 Selenium 4 Chrome DevTools API Selenium 是支持 web 浏览器自动一系列工具综合项目。...它不使用包装 API,而是允许您直接传入 Chrome DevTools 命令该命令参数。...关于这个命令信息可以在文档中找到。 让我们看看如何在 Selenium 4 Chrome DevTools API 中完成这个过程。

66530

自动化-Appium-​第一个Demo-Web(Python版)

方式二:开启Appium Desktop 打开Appium Desktop 服务IP端口默认情况下,直接点击Start Server v1.8.0来开启Appium服务,如图所示。...-f chrome-devtools://devtools/bundled/inspector.html Mac打开Chrome浏览器,在地址栏输入http://localhost:9221/,这里会显示所有已连接设备清单...ws=localhost:9222/devtools/page/1 打开Chrome窗口,将复制地址粘贴后访问 显示html源码信息,则可以获取相应Webview元素信息。...-f chrome-devtools://devtools/bundled/inspector.html Mac打开Chrome浏览器,在地址栏输入http://localhost:9221/,这里会显示所有已连接设备清单...ws=localhost:9222/devtools/page/1 打开Chrome窗口,将复制地址粘贴后访问 显示html源码信息,则可以获取相应Webview元素信息。

2.4K10

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

}, } 需要特别说明是,虽然你可以通过chrome-extension://xxx/background.html直接打开后台页,但是你打开后台页真正一直在后台运行那个页面不是同一个,换句话说...在权限,它background非常类似,它们之间最大不同是生命周期不同,popup中可以直接通过chrome.extension.getBackgroundPage()获取background...是的,Chrome允许插件在开发者工具(devtools)动手脚,主要表现在: 自定义一个多个Elements、Console、Sources等同级别的面板; 自定义侧边栏(sidebar),目前只能自定义...每打开一个开发者工具窗口,都会创建devtools页面的实例,F12窗口关闭,页面也随着关闭,所以devtools页面的生命周期devtools窗口是一致。...chrome.devtools.panels:面板相关; chrome.devtools.inspectedWindow:获取被审查窗口有关信息; chrome.devtools.network:获取有关网络请求信息

11.6K40

自动化-Appium-元素定位工具

例如:之前保存好Demo预设置进行启动或删除。 一般选择Simple模式即可。服务IP端口默认情况下,点击Start Server v1.8.0来开启Appium服务。...服务IP端口默认情况下,点击Start Server v1.8.0来开启Appium服务。 点击放大镜(Start Inspector Session)。...-f chrome-devtools://devtools/bundled/inspector.html Mac打开Chrome浏览器,在地址栏输入http://localhost:9221/,这里会显示所有已连接设备清单...ws=localhost:9223/devtools/page/1 打开Chrome窗口,将复制地址粘贴后访问 显示html源码信息,则可以获取相应Webview元素信息。...Mac打开终端输入启动命令(ios-webkit-debug-proxy将自动为你运行,无需单独启动): remotedebug_ios_webkit_adapter --port=9000 打开Mac

4.3K10

使用 Chrome Devtools 调试您 Node.js 程序

在 Node.js 开发过程中除了万能 console.log 之外,本节介绍一个 Node.js 与 Chrome Devtools 结合调试工具,以后你可以选择使用浏览器来调试 Node.js...在 Chrome打开 浏览器地址栏输入 chrome://inspect/ 按回车键,如下所示: ?...Remote Target 下展示了当前运行 Node.js 版本号,打开 inspect 或 Open dedicated Devtools for Node 链接,如下所示: ?...断点调试 调试工具窗口介绍 上方展示与服务器端调试需要 5 个面板, Chrome 开发工具中是基本相同,可以理解为 “服务端定制版” Connection:链接 Console:控制台 Sources...如果要允许远程调试链接,建议是使用 SSL 隧道方式,假设我们服务运行在服务器 debug.nodejs.red ,首先启动服务,上面的方式一样。

2.9K10

Chrome DevTools 远程调试安卓网页原理

今天我们就来了解一下: 远程调试安卓网页 用数据线把安卓手机电脑连接起来,在手机设置里打开 USB 调试: 然后在 chrome 打开 chrome://inspect 页面,勾选 Discover...不过这个过程你可能会遇到这样问题,打开窗口是空白或者是 404: 这是因为调试目标可能是任意 chrome 版本,那么 Chrome Devtools 自然也要用相应版本才行,所以就需要动态下载...Chrome DevTools 原理 Chrome DevTools 被设计成了 Chrome 分离架构,两者之间通过 WebSocket 通信,设计了专门通信协议:Chrome DevTools...总结 Chrome DevTools Chrome分离架构,两者通过 WebSocket 通信,通信协议是 Chrome DevTools Protocol,可以在金丝雀版本 Protocol...要注意是调试目标浏览器要和用 Chrome DevTools 版本一一对应才行,所以第一次调试会先下载 Chrome DevTools,这需要访问 google 域名,如果没有科学上网,会有白屏

2K10

自动化-Appium-第一个Demo-Web(Java版)

方式二:开启Appium Desktop 打开Appium Desktop 服务IP端口默认情况下,直接点击Start Server v1.6.5来开启Appium服务,如图所示。...-f chrome-devtools://devtools/bundled/inspector.html Mac打开Chrome浏览器,在地址栏输入http://localhost:9221/,这里会显示所有已连接设备清单...ws=localhost:9222/devtools/page/1 打开Chrome窗口,将复制地址粘贴后访问 显示html源码信息,则可以获取相应Webview元素信息。...-f chrome-devtools://devtools/bundled/inspector.html Mac打开Chrome浏览器,在地址栏输入http://localhost:9221/,这里会显示所有已连接设备清单...ws=localhost:9222/devtools/page/1 打开Chrome窗口,将复制地址粘贴后访问 显示html源码信息,则可以获取相应Webview元素信息。

2.2K10

【腾讯TMQ】Google 是如何做 Chrome 浏览器性能测试

二、运行环境 PCtelemetry需要python2.7环境,需要安装psutilpywin32两个python库。...2)通过_runtime.Evaluate,执行js命令window.performance.timing监控网页加载完成事件,网页加载完成后获取网页加载速度,类似在F12 devtoolsconsole...q=devtools_protocol_dispatcher.cc&sq=package:chromium&dr 使用远程调试协议和websocket可以很轻松实现chrome自动化测试。...4.4Chrome中性能数据打点方法 下面显示了代码中对Startup.BrowserWindowDisplay性能输出起始时间地方,在window窗口显示完毕函数中输出进程启动时间当前窗口显示时间...其他性能测试用例,gpu,绘图性能用例正在移植中。 大家在做性能测试时,都是通过何种渠道方式获取到细化后性能指标的?

2.3K01

如何使用谷歌浏览器 Chrome 更好地调试

本文重点介绍使用 Chrome DevTools 更轻松地对 Web 应用程序进行故障排除一些最佳做法、关键功能提示。 什么是谷歌浏览器开发工具?...DevTools 面板快速视图 要访问 DevTools,请按 Control + Shift + C(在 Windows 或 Linux Command + Option + C(在 Mac...Google Chrome DevTools 窗口在迷你窗口打开时会在顶部显示一些快速选项卡,以及一些额外隐藏选项卡,可通过单击它们旁边 >> 符号或切换到全屏视图来访问这些选项卡。...在 Chrome 中创建代码片段: 1.打开 DevTools 窗口并单击选项卡面板中“Sources”。 2.单击>>符号,选择“snippets”,然后选择 New snippet。...尽管如此,这只是 Google Chrome DevTools 中提供众多功能一小部分。你还使用哪些其他工具技巧?可以在下面的评论区告诉我。

3.6K30

(最新版)如何正确移除Selenium中 window.navigator.webdriver

可能有读者会认为,是不是通过写 Chrome 浏览器插件,让插件里面的 JavaScript 语句在网站页面刚刚打开,还没有运行自带 JavaScript 之前运行。...这种方式虽然可以解决问题,但稍显麻烦,我们今天方法非常简单。就是使用 Google Chrome Devtools-Protocol(Chrome 开发工具协议)简称CDP。...那么如何在 Selenium 中调用 CDP 命令呢?实际非常简单,我们使用driver.execute_cdp_cmd。...根据 Selenium 官方文档[2],传入需要调用 CDP 命令参数即可: 于是我们可以写出如下代码: from selenium.webdriver import Chrome driver...,无论你打开多少个网址,他都会自动提前在网站自带所有 js 之前执行这个语句,隐藏window.navigator.webdriver。

4.2K30

(新)关于修改window.navigator.webdriver代码失效问题

《前文回顾》 前面写过两篇关于sycm自动化爬取文章 ①关于抓取代码文章链接 《出师未捷身先死sycm数据自动化》 ②关于chrome版本迭代后,代码失效问题解决方案文章链接 《关于修改window.navigator.webdriver...) 换个简单点儿方法,使用 Google Chrome Devtools-Protocol(Chrome 开发工具协议)简称CDP。...’如何在 Selenium 中调用 CDP 命令? 使用driver.execute_cdp_cmd。根据 Selenium 官方文档,传入需要调用 CDP 命令参数即可: ?...,无论你打开多少个网址,他都会自动提前在网站自带所有 js 之前执行这个语句,隐藏window.navigator.webdriver。...('excludeSwitches', ['enable-automation']) 原先 这句代码可以带着,如果去掉,也可以正常验证操作,但是浏览器地址栏会出现自动控制标志,如下图,加上原先这句代码就不会出现这个提示框

1.7K41

自动化测试工具-Taiko

2、简介 Taiko是一个免费开源Node.js库,带有一个简单API来自动化基于Chromium浏览器(Chrome、Microsoft Edge、Opera)Firefox。...Taiko与Selenium区别: (1)Taiko与Selenium非常不同。Selenium使用W3C标准WebDriver。Taiko使用Chrome DevTools协议。...Taiko不需要驱动程序(ChromeDriver)来连接自动化浏览器。Taiko捆绑了最新版本Chromium,但它可以自动化任何支持Chrome DevTools协议浏览器。...例如:要启动Chrome浏览器实例,输入 openBrowser() 提示浏览器已打开 此时Chrome浏览器也自动打开 要查看所有可用API,命令行输入 .api 显示所有可用API方法 要查看某个...具有降低规范、数据驱动执行、并行执行测试报告等功能。Gauge使测试维护变得更加容易,Gauge易于安装并与Taiko很好地集成,使用GaugeTaiko,我们可以编写更可靠自动化测试。

1.3K20

反制Webdriver - 从Bot到RCE进发

在整个流程当中,Selenium端点通过向Webdriver端口相应seesion接口发送请求控制webdriver,webdriver通过预定调试接口以及相应协议来浏览器交互(Chrome通过...Chrome DevTools Protocol来交互)。...由于不同浏览器厂商都定义了自己driver,因此不同浏览器driver之间使用协议可能会有所不同。比如Chrome就是用Chrome DevTools Protocol。...如果对Chrome DevTools Protocol有一些简单了解的话,不难发现他本身提供了一些接口来允许你自动操作webdriver。...,firefox设计了一套与chrome逻辑差异比较大调试协议,在原文中,作者使用了一个TCP连接拆分错误来完成相应利用,并且在Firefox 87.0当中被修复。

1K20

极力推荐谷歌浏览器插件

Adblock Plus 每天刷网页最烦就是各种乱七八糟广告,Adblock Plus是Chrome浏览器中非常流行一款广告拦截插件。 阻止 YouTube™ 广告、弹出窗口并抵御恶意软件!...Octotree 树形展示 Github 项目代码,让你能像在GitHub像你IDE里一样浏览搜索代码。 Top 7....当您标签页位于OneTab列表时,您将节省高达95%内存,因为你将减少Google Chrome浏览器中打开标签页数量。 Top 8....② 再次点击图标会变回浅灰色,以后再打开该网站网页时,将不会被自动解除限制。 ---- Top 13....Vue.js devtools Vue.js devtools是基于google chrome浏览器一款调试vue.js应用开发者浏览器扩展,可以在浏览器开发者工具下调试代码 ---- Top

2.8K21
领券