electron 打开 webview 的 devtools openDevTools

最新推荐文章于 2025-01-27 15:26:24 发布

缘_妙不可言

最新推荐文章于 2025-01-27 15:26:24 发布

阅读量1.5k

点赞数

分类专栏： electron 文章标签： javascript js electron webview vue

本文链接：https://blog.youkuaiyun.com/joy1793/article/details/115716169

版权

在electron项目中遇到Webview内页面加载问题，通过尝试使用`openDevTools`打开Webview的开发者工具进行调试。发现初始代码会导致devtools窗口闪烁并立即关闭。解决方法是修改js代码，确保Webview的devtools可以单独正确打开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

electron项目的webview需要注入preload js，但是我发现注入的preload js似乎没有正常执行。随即想打开webview网页的devtools看看。代码如下

问题描述：

如下代码在运行后devtools会闪一下，随即消失。

index.html

<webview id="link-view" src="https://v.qq.com/x/page/m3206njx773.html" allowpopups preload="js/inject.js"
       nodeintegration disablewebsecurity plugins class="webview"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

缘_妙不可言

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

electron-webview-schedule:Webview调度管理，支持Electron的异步队列

05-01

电子网页时间表 Webview调度管理模块，支持Electron的异步队列。分期付款$ npm i electron-webview-schedule --save用法在渲染器过程中导入。 import moment from 'moment' ;import PromiseQueue from 'electron-...

干货 | Electron在DevTools中的探索与实践

携程技术中心

05-21

1834

作者简介隋丰蔚，携程无线平台研发部前端工程师，现负责开发者工具NFES Developer Tools的设计与研发。引言目前，主流的桌面应用开发方法有几种，一是使用纯Na...

参与评论您还未登录，请先登录后发表或查看评论

Electron 打开开发者工具 devtools

12-14

1952

平时，我们利用chrome要调试网页的时候，按F12（mac下面是shift+花+i）打开的开发者工具，就是这个devtools，或者可以称之为“开发者模式”默认状态下，开发者工具的位置是上一次工具打开的位置（左边，右边，下边都有可能。取决于上一次的状态，但不会是分离状态，也没有处于顶部的状态）。在electron开发的过程中，可以用代码控制打开自带chrome的devtools开发者工具，进而调试渲染教程页面。Electron 打开开发者工具 devtools。分离状态打开devtools。

PC端微信如何强制开启DevTools

最新发布

nuaaye的博客

01-27

1437

PC端使用微信版本为3.9.10.19，然后运行WechatOpenDevTools-Python.exe工具启动微信，运行成功后即可在微信公众号和小程序里打开DevTools.

electron的devtools设置

梧桐芊羽的博客

11-10

6962

mainWindow = new BrowserWindow({ height: sHeight, width: sWidth, useContentSize: true, autoHideMenuBar: true, //是否隐藏菜单 }) // mainWindow.webContents.openDevTools() //关闭开发者工具使用 mainWindow.webContents.closeDevTools(); mainWin..

Android -- Html5混合开发之WebView调试必备神器DevTools

一只驴在敲代码

12-04

1707

1.前言 Android & Html5 混合开发本身并不难，难点在于Webview加载H5的异常定位。本人最近在开发中遇到一个坑，Webview加载H5页面，当Webview调用H5的js方法将图片的base64、宽度和高度这几个参数传给H5后，H5需要根据宽高设置图片显示。 webView.loadUrl("javascript:setPNG('" + webViewId + "...

electron 中webview如何与主进程渲染进程进行事件监听通信

qq_25842063的博客

10-12

3001

直接上代码 const webview = document.querySelector('webview'); webview.addEventListener('dom-ready', () => { webview.openDevTools(); console.log('渲染进程在webview加载完之后发送消息') }) //上面...

【electron】手把手教你在 electron 环境下使用 vue-devtools，附详细报错解决办法

kinghzking的专栏

10-12

4673

Vue Devtools 是一款由 Vue.js 官方开发的开发工具，旨在帮助开发者更轻松地调试和开发 Vue.js 应用程序。这个问题半年前就发现了，当时没有解决掉，后来经常想到该问题，最近想到通过Edge浏览器可以下载最新的插件，省去了各种可能遇到的坑，最终解决问题。总之，Vue Devtools 是 Vue.js 开发者必备的工具之一，可以帮助开发者更高效地开发和调试 Vue.js 应用程序。遇到问题，多搜索，多思考，结合现有知识，找到合适的方案。这个就不说了，简单方便，但是获取的不一定是最新的。

electron-devtools-installer:确保Chrome DevTools扩展到Electron的简便方法

04-29

Electron DevTools安装程序这是将DevTool扩展安装到Electron中的简便方法。您不必费心去下载扩展程序，找到正确的文件夹，然后为每个人的计算机配置路径。安装npm install electron-devtools-installer --save-dev...

：electron：命令行electronic devtools安装程序-JavaScript开发

05-26

dti命令行Electron Developer Tools安装程序。列出可用于电子的开发人员工具。列出已安装的devtools以及已安装的版本。轻松安装和卸载Developer dti命令行Electron Developer Tools Installer。列出可用于电子的...

electron-webview-ime-fix

05-26

标题“electron-webview-ime-fix”指的是一个针对Electron框架中的特定问题的解决方案，这个问题涉及到在Webview组件中输入法（IME，Input Method Editor）的位置显示不正确。Electron是一个流行的开源库，它允许...

devtron：[寻找维护人员] Electron DevTools扩展

02-04

事件检查器，显示在核心Electron API（例如窗口，应用程序和进程）上的应用程序中注册的事件和侦听器。 App Linter ，用于检查您的应用程序是否存在问题以及功能是否缺失。正在安装 npm install --save-dev ...

electron桌面应用打开webview的方法

总结，交流，记录，成长

05-08

7859

const windowOptions = { title: 'demo', // titleBarStyle: 'hidden', width: 1440, height: 900, webPreferences: { devTools: true, //可禁用devTools:false, nodeIntegration: true, context...

关于electron的基本调试

RJ0024的博客

06-04

1884

介绍调试是开发中必不可少的一个过程，electron分为主进程和渲染进程，所以需要有分别调试这两个进程渲染进程调试 electron渲染进程的调试跟web开发的调试过程差不多一样，因为这个进程相当于Chromium 的一个窗口，在开发环境中可以设置：win.webContents.openDevTools() 来打开devtools来调试代码。接下来就可以对渲染进程进行调试， vue-devtools 通常我们是使用vue+electron的模式进行开发，而在平时vue开发中，我们通常使用vue-

electron打包后调用控制台方法

热门推荐

浩星

11-06

1万+

前言： electron打包桌面应用的时候，本地启动时,f12调试功能台是自动打开的，但是我们打包出来以后，有某些特殊时刻也是需要打开控制台的，他默认不打开使用步骤：我们打开我们项目中自动生成/手动生成的配置文件background.js 以我自己的配置文件为例：核心是：win.webContents.openDevTools() 打开调试框 function createWindow () { // 关闭顶部导航菜单栏 Menu.setApplicatio...

《Electron 基础知识》代码打开开发者工具DevTools

前端技术

10-10

416

《Electron 基础知识》代码打开开发者工具DevTools

Electron开发过程中如何调试？

王铁柱666的博客

10-29

1070

在Electron开发过程中，前端部分的调试主要涉及界面调试和主进程调试。

electron入门（16.0版本亲测可用）

量子前端的博客

11-21

3789

根据业务需求，开始学习electron跨桌面应用框架。记录~~~~~ 创建一个electron项目在node环境的支持下，新建文件夹 npm init -y //创建一个基础package npm i electron npm i electron/remote //由于新版本，需要使用这个package来使用remote模块这样子，一个基础目录就准备好了，接下来需要准备一个主进程js文件和html主进程界面，并在main.js中写入： const { app, BrowserWindow,

electron webview devtools

08-08

在Electron中，可以使用webview元素来嵌入网页，并且可以通过打开DevTools来调试这个网页。根据引用和引用中的代码，可以看到打开webview的DevTools有两种方式。在引用中的代码中，使用了openDevTools方法，并通过指定mode参数为'bottom'来设置DevTools的位置。而在引用中的代码中，直接调用openDevTools方法，没有指定位置。所以，通过以上两种方式，我们可以成功在Electron的webview中打开DevTools进行调试。同时，引用简单介绍了Electron的特性和一些常见的开发问题。