electron 打开 webview 的 devtools openDevTools

最新推荐文章于 2024-10-29 15:52:56 发布

缘_妙不可言

最新推荐文章于 2024-10-29 15:52:56 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.csdn.net/joy1793/article/details/115716169

版权

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

摘要由CSDN通过智能技术生成

项目场景：

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项目中引入devtools

skysys的研究小屋

07-05

1386

官方文档说明：https://www.electronjs.org/docs/tutorial/devtools-extension electron-devtools-installer 插件 https://github.com/MarshallOfSound/electron-devtools-installer vuejs devtool 插件 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnna

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

携程技术中心

05-21

1802

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

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

Electron 打开开发者工具 devtools

12-14

1859

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

Electron开发过程中如何调试？

王铁柱666的博客

10-29

674

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

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

前端技术

10-10

360

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

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

一只驴在敲代码

12-04

1664

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

electron webview devtools

08-08

在Electron中，可以使用webview元素来嵌入网页，并且可以通过打开DevTools来调试这个网页。根据引用和引用中的代码，可以看到打开webview的DevTools有两种方式。在引用中的代码中，使用了openDevTools方法，并通过...

electron webview

最新发布

01-02

### Electron WebView 使用方法在Electron应用程序中，`<webview>`标签用于加载远程网页或本地HTML文件。此标签提供了一种安全的方式，可以在独立的进程中渲染外部内容。 #### 基本属性设置为了使 `<webview>` ...

electron的devtools设置

梧桐芊羽的博客

11-10

6852

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

electron桌面应用打开webview的方法

总结，交流，记录，成长

05-08

7840

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

WeChatOpenDevTools---划时代的小程序抓包工具

2301_79445611的博客

10-06

8880

寄了

Devtools(1)打开和快捷键

技术爱好者

04-01

4329

文章目录打开方式命令菜单和快捷键关于Chrome的开发工具的使用. 主要组成面板(panel): Elements Console Sources Network Performance Memory Application Security Lighthouse Recorder 打开方式单击鼠标右键并点击检查. Control+Shift+c打开Element面板(c - css). F12. Control+Shift+j打开Console面板(j - javascript).

【微信】【Windows端】开启2024最新版微信小程序Devtools调试窗口

kinghzking的专栏

03-08

7941

通过上面的操作，我们可以打开DevTools界面，但是该界面中只有三个标签，这是因为微信当检查的是小程序的时候，启动的是自己定制的DevTools。x64dbg目录下，会将断点、注释等各种信息保存下来，方便下次继续使用，但是随着版本变更，这些配置文件会错乱，导致各种异常，删掉他们，重试。如果上述都有问题，就只能想办法过反调试了，x64dbg本身提供了很多工具，自己也可以写插件尝试。将该串拿出来，格式化后，查看到有两个可疑值，修改为true。总之，微信是通过不同的地址，打开不同的DevTools的。

Chrome DevTools

pangmiao

11-05

1683

DevTools

【微信】【Windows端】开启2024最新版微信内置浏览器Devtools调试窗口

热门推荐

kinghzking的专栏

03-08

1万+

我们只需要将页面拖拽出来，变成多个窗口，然后打开调试窗口就可以了。在上面的图片中，显示了一个窗口，该窗口有两个页面。当打开任意一个页面的调试窗口后，我们无法打开另一个。》，虽然能够正常使用，但是保不准啥时候腾讯关闭了这个通道就失效了。在微信中，任意地方打开一个网页（图示为订阅号页面中点开的）；菜单，即可打开调试窗口（导读中的那个Devtools图片）。关键字`xweb-enable-inspect`这个是搜了很多文章，一个个试出来的，就这个好用。针对微信，使用了很多技术，这里简单的说下。

electron-vue解决打包错误、无法调用出开发者工具（亲测有效）

zhouzuoluo的博客

01-21

2753

错误1：unresolved node modules vue... 或 not found modules..的错误解决方式：依赖的模块错误，删除node_module文件夹后，尽量用npm install而不是淘宝镜像cnpm安装错误2：Cannot create symlinks (on Windows hosts, it requires admin privileges); skipping mas platform 解决方式：在项目根目录下以管理权限运行命令行窗口cmd后，输...

开源项目教程：OpenAPI DevTools 深度指南

gitblog_00145的博客

09-03

568

开源项目教程：OpenAPI DevTools 深度指南项目地址:https://gitcode.com/gh_mirrors/op/openapi-devtools 1. 项目介绍 OpenAPI DevTools 是一款高效且直观的浏览器扩展，专为开发人员设计，能够在实时环境中自动生成 OpenAPI 规范。这款工具无缝集成于 Chrome 的开发者工具中，自动捕获并转换网络请求成规范格式...